DEV Community: Satvik Daga

Longest Substring Without Repeating Characters

Satvik Daga — Sun, 18 Feb 2024 16:17:03 +0000

Problem

Given a string s, find the length of the longest substring without repeating characters.

Example 1:

Input: s = "abcabcbb"
Output: 3
Explanation: The answer is "abc", with the length of 3.

Example 2:

Input: s = "bbbbb"
Output: 1
Explanation: The answer is "b", with the length of 1.

Example 3:

Input: s = "pwwkew"
Output: 3
Explanation: The answer is "wke", with the length of 3.
Notice that the answer must be a substring, "pwke" is a subsequence and not a substring.

Approaches

Brute Force Approach

Before we dive into the optimal solution, let's briefly discuss the brute force approach. It involves generating all possible substrings of the given string and checking each one for duplicate characters. While this approach is straightforward, its time complexity is O(N²), making it impractical for large inputs.

Optimal Approach

To solve this problem efficiently, we'll employ the sliding window pattern along with a hash table to keep track of characters and their indices.

Here's how our algorithm works:

We initialize two pointers, l and r, representing the left and right indices of our sliding window. Initially, both are set to 0.
We also initialize a variable len to store the length of the longest substring, starting with 0.
As we iterate through the string:
- If the character at the right index r is not already in our hash table, we add it along with its index.
- If the character is already in the hash table, indicating a repeating character, we update the left index l to the next index after the last occurrence of the character.
- We update the len with the maximum value between its current value and the length of the current substring (r - l + 1).
We repeat this process until we traverse the entire string.

Example Walkthrough

Let's walk through an example to better understand our algorithm:

Given the string "abcabcbb", here's how our algorithm works:

Initially, l = r = 0, and len = 0.
As we iterate:
- At index 0, we encounter 'a'. We add it to the hash table.
- At index 1, we encounter 'b'. We add it to the hash table.
- At index 2, we encounter 'c'. We add it to the hash table.
- At index 3, we encounter 'a', which is already in the hash table. We update l to 1 (the next index after the last occurrence of 'a').
- We continue this process, updating the hash table and len accordingly.
Finally, we find that the longest substring without repeating characters is "abc", with a length of 3.
Code

def lengthOfLongestSubstring(s: str) -> int:
    ans = left = 0
    seen = dict()

    for i, c in enumerate(s):
        # Only update the left index if a repeat character exists in the current sliding window
        if seen.get(c, -1) >= left:
            left = seen.get(c) + 1
        # Update the max length for each iteration
        ans = max(ans, i - left + 1)
        seen[c] = i

    return ans

Conclusion

By employing the sliding window pattern and a hash table, we can efficiently solve the problem of finding the length of the longest substring without repeating characters in a given string. This approach has a time complexity of O(N), where N is the length of the input string, making it highly scalable and suitable for large inputs.

So next time you encounter a similar problem, remember the power of the sliding window and hash table combination for efficient problem-solving!

Maximizing XOR

Satvik Daga — Sun, 17 Jul 2022 18:45:04 +0000

Question

Given 2 integers l and r, find the maximal value of a xor b, where a and b satisfy the following condition:
l ≤ a ≤ b ≤ r
For example, if l = 11 and r = 12, then

11⊕11 = 0
11⊕12 = 7
12⊕12 = 0

Our maximum value is 7.

Naive Solution

A naive solution is to calculate XOR value for all values in the range and find the maximum.

def maximizingXOR(l, r):
    # Since xor of equal values is 0
    if l == r:
        return 0
    # Set an initial max value
    _max = -1
    # Iterate over all values in the range
    for i in range(l, r+1):
        for j in range(l, r+1):
            # Replace the max value if the xor is greater than the current max value
            _max = max(i ^ j, _max)
    # Return the max value
    return _max

Time Complexity

O(N²) where N is the range i.e. N = r - l + 1.

Efficient Solution

Lets look at the XOR operation first. For binary values, XOR is:

0⊕0 = 0
1⊕1 = 0
0⊕1 = 1
1⊕0 = 0

So, XOR is 0 for same bits and 1 for different bits.

Now, lets consider the pattern of binary values from l to r. Since l is smaller than r, so the first bit from l to r either changes from 0 to 1 or it remains 1.

Example 1:
l = 10 = (01010)2
r = 20 = (10100)2
Here the first bit changes from 0 to 1.

Example 2:
l = 10 = (1010)2
r = 15 = (1111)2
Here the first bit remains 1.

So if we take XOR of any 2 numbers in the range [l, r], for maximum value their first bit will be fixed which will be the same as the first bit of XOR of l and r itself.

Now lets observe the XOR of l and r. From its most significant bit, we know that the maximum XOR value in the range will have the same most significant bit. Its most significant bit also tells us the maximum value we can achieve i.e. let XOR of l and r be 1xxx where x can be 0 or 1 then maximum XOR value we can get is 1111 because from l to r its possible to choose 2 numbers in such a way that all x in xxx become 1.

Example 1:
l = 10 = (01010)2
r = 20 = (10100)2
l ^ r = (01010) ^ (10100) = (11110)
Now as l ^ r is of the form (1xxxx), we get the maximum XOR as (11111) by choosing a and b as 15 and 16 (01111 and 10000).

Example 2:
l = 10 = (1010)2
r = 15 = (1111)2
l ^ r = (1010) ^ (1111) = (0101)
Now as l ^ r is of the form (1xx), we get the maximum XOR as (111) by choosing a and b as 10 and 13 (1010 and 1101).

So to get the maximum XOR value, we just need (l ^ r). Calculate (l ^ r) first and then from most significant bit of this value, we will add all 1s to get the final result.

Efficient Solution 1

def maximizingXOR(l, r):
    result = 1
    xor = l ^ r  # 1xxx
    # iterate for (MSB+1) times
    while xor:
        result <<= 1
        xor >>= 1
    # return MSB with all added 1s i.e. if xor was 1xxx return 1111
    return result - 1

Time Complexity

O(logN) where N is the range i.e. N = r - l + 1.

Efficient Solution 2

Another solution is to directly use the log function to get the most significant bit.

import math

def maximizingXOR(l, r):
    # log(0) is not possible, so condition to prevent it
    if l == r:
        return 0
    return (1 << (int(math.log(l ^ r, 2)) + 1)) - 1

Time Complexity

O(1) assuming log function takes O(1) time.

React useScrollTo hook

Satvik Daga — Sat, 02 Oct 2021 18:06:44 +0000

Ever since the introduction of hooks in React 16.8, they have become an integral part of every React devs arsenal.
Hooks solve a wide variety of seemingly unconnected problems in React that one may encounter over years of writing and maintaining tens of thousands of components.

Recently while I was working on one of my projects, I encountered a relatively common problem. I wanted to scroll to a component when its loaded on screen or on some other event. If you have worked with pure js, then there is a very simple solution using scrollIntoView function.



const elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Run the above code on that particular event and it works like a charm.

Now when I searched for a solution in React, I came across this library react-scroll. Its a react library for animating vertical scrolling that provides functionality to scroll to a component on an event. Its good but I didn't want to add another dependency and change the default scrolling I have been using in my app.

So here is a custom hook I came up with that scrolls to an element on an event like load or click.



const useScrollTo = <T extends Element>() => {
  const ref = useRef<T>(null);
  const [shouldScrollTo, setShouldScrollTo] = useState(false);

  useEffect(() => {
    if (ref.current && shouldScrollTo) {
      ref.current.scrollIntoView({ behavior: 'smooth' });
      setShouldScrollTo(false);
    }
  }, [shouldScrollTo]);

  return [ref, setShouldScrollTo];
};

// Scroll to the element on component load
const Example1: FunctionComponent = () => {
  const [scrollToRef, setShouldScrollTo] = useScrollTo();

  useEffect(()=> {
    setShouldScrollTo(true)
  }, [setShouldScrollTo]);

  return (
    <HTMLElementToScrollTo ref={scrollToRef}/>
    {/* Some Other Components */}
  )
}

// Scroll to the element on click 
const Example2: FunctionComponent = () => {
  const [scrollToRef, setShouldScrollTo] = useScrollTo();

  return (
    <HTMLElementToScrollTo ref={scrollToRef}/>
    {/* Some Other Components */}
    <HTMLElementToClick onClick={() => setShouldScrollTo(true)} />
  )
}

You can checkout this demo that uses this hook to scroll to the first and last image on a button click.

dagasatvik10 / react-useScrollTo-demo

Demo of useScrollTo hook in React

Add Pipeline Resolvers in AWS Amplify

Satvik Daga — Sat, 18 Jul 2020 18:19:13 +0000

AWS AppSync and AWS Amplify make it easy for anyone to build Web Application (or iOS/Android Applications) without having to manage the underlying infrastructure. Developers can focus on building their front-end web application while AppSync and Amplify handles the heavy-lifting on the backend infrastructure side.

What are pipeline resolvers?

AWS AppSync executes resolvers on a GraphQL field. In some cases, applications require executing multiple operations to resolve a single GraphQL field. With pipeline resolvers, developers can now compose operations (called Functions or Pipeline Functions) and execute them in sequence. Pipeline resolvers are useful for applications that, for instance, require performing an authorization check before fetching data for a field.

What are we building?

In this tutorial, you'll learn how to add a pipeline resolver in an AWS Amplify application. You'll build a new AWS Amplify backend with:

A User model.
A signupUser mutation that uses a pipeline resolver.
A lambda function that takes the password field from input data and replaces it with a hashed password for security. It will be part of the pipeline resolver for signupUser mutation.

Prerequisites

To complete this tutorial, you will need:

Node.js(>=10.x) and NPM(>=6.x) installed. Download from here.
An AWS account. If you don't have one, you can create here.
Amplify CLI installed and configured.

Step 1 - Create a new React App

$ npx create-react-app amplify-pipeline
$ cd amplify-pipeline

Step 2 - Initialize a new backend

$ amplify init

You'll be prompted for some information about the app.

Step 3 - Add GraphQL API

Run the following command.

$ amplify add api

Select the following options:
- Select GraphQL
- When asked if you have a schema, say No
- Select one of the default samples; you can change this later
- Choose to edit the schema and it will open the new schema.graphql in your editor
Update schema.graphql with the following code:

type User @model {
  id: ID!
  name: String!
  email: AWSEmail!
  password: String
}

Save the file and hit enter in your terminal window. If no error messages are thrown this means the transformation was successful and schema is valid.

Step 4 - Add a Lambda function to hash password

Create a lambda function that takes the password field from the input and returns hashed password in response.

Run the following command.

$ amplify add function

Complete the relevant prompts.

Update the source code of the amplifypipelineHashPassword lambda function(i.e. index.js).

const bcrypt = require('bcryptjs');

exports.handler = async (event) => {
  // get password field from input
  const { password } = event.arguments.input;
  // use bcrypt to hash password
  const hash = await bcrypt.hash(password, 10);
  // return the hashed password as response
  return {
    hash,
  };
};

Add bcryptjs node library to the lambda function. Run this from the root directory of your React app.

$ cd amplify/backend/function/amplifypipelineHashPassword/src
$ npm install bcryptjs

Now you can deploy the API and lambda function to AWS.

$ amplify push

Step 5 - Add user signup mutation

You will add a custom mutation called signupUser that creates a new user.
For this, you will need to add a custom resolver that targets the User table.

Here instead of a custom resolver, you'll add a pipeline resolver and a pipeline function that targets the UserTable.

Add signupUser mutation to schema.graphql.

type Mutation {
  signupUser(input: SignupUserInput!): User
}

input SignupUserInput {
  id: ID
  name: String!
  email: AWSEmail!
  password: String
}

Add a pipeline resolver and pipeline function resource to a stack(like CustomResources.json) in the stacks/ directory. The DataSourceName is auto-generated. In most cases, it’ll look like {MODEL_NAME}Table. To confirm the data source name, you can verify it from within the AppSync Console (amplify console api) and clicking on the Data Sources tab.

// stacks/CustomResources.json

{
// ... The rest of the template
"Resources": {
    "MutationCreateUserFunction": {
      "Type": "AWS::AppSync::FunctionConfiguration",
      "Properties": {
        "ApiId": {
          "Ref": "AppSyncApiId"
        },
        "Name": "MutationCreateUserFunction",
        "DataSourceName": "UserTable",
        "FunctionVersion": "2018-05-29",
        "RequestMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/pipelineFunctions/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["MutationCreateUserFunction", "req", "vtl"]]
              }
            }
          ]
        },
        "ResponseMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/pipelineFunctions/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["MutationCreateUserFunction", "res", "vtl"]]
              }
            }
          ]
        }
      }
    },
    "MutationSignupUserResolver": {
      "Type": "AWS::AppSync::Resolver",
      "Properties": {
        "ApiId": {
          "Ref": "AppSyncApiId"
        },
        "TypeName": "Mutation",
        "FieldName": "signupUser",
        "Kind": "PIPELINE",
        "PipelineConfig": {
          "Functions": [
            {
              "Fn::GetAtt": ["MutationCreateUserFunction", "FunctionId"]
            }
          ]
        },
        "RequestMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["Mutation", "signupUser", "req", "vtl"]]
              }
            }
          ]
        },
        "ResponseMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["Mutation", "signupUser", "res", "vtl"]]
              }
            }
          ]
        }
      },
      "DependsOn": ["MutationCreateUserFunction"]
    }
  }
}

Write the pipeline resolver templates in the resolvers directory. These are the before and after mapping templates that are run in the beginning and the end of the pipeline respectively.

## resolvers/Mutation.signupUser.req.vtl

## [Start] Stash resolver specific context.. **
$util.qr($ctx.stash.put("typeName", "Mutation"))
$util.qr($ctx.stash.put("fieldName", "signupUser"))
{}
## [End] Stash resolver specific context.. **

## resolvers/Mutation.signupUser.res.vtl

$util.toJson($ctx.prev.result)

Write the pipelineFunction templates for MutationCreateUserFunction resource. Create a pipelineFunctions folder if it doesn't exist in your API resource. From your app root, run the following command.

$ cd amplify/backend/api/amplifypipeline
$ mkdir pipelineFunctions

In the req template, you access the previous function result to get the hashed password. You then replace the password field in the input with the hashed password. So the new user created will save the hashed password in the database instead.
Note: In a pipeline function, you can access the results of the previous pipeline function as $ctx.prev.result.

## pipelineFunctions/MutationCreateUserFunction.req.vtl

## [Start] Replace password in input with hash
## Set hash from previous pipeline function result
#set( $hash = $ctx.prev.result.hash )
## Set the password field as hash if present
$util.qr($context.args.input.put("password", $util.defaultIfNull($hash, $context.args.input.password)))
## [End] Replace password in input with hash

## [Start] Set default values. **
$util.qr($context.args.input.put("id", $util.defaultIfNull($ctx.args.input.id, $util.autoId())))
#set( $createdAt = $util.time.nowISO8601() )
## Automatically set the createdAt timestamp. **
$util.qr($context.args.input.put("createdAt", $util.defaultIfNull($ctx.args.input.createdAt, $createdAt)))
## Automatically set the updatedAt timestamp. **
$util.qr($context.args.input.put("updatedAt", $util.defaultIfNull($ctx.args.input.updatedAt, $createdAt)))
## [End] Set default values. **
## [Start] Prepare DynamoDB PutItem Request. **
$util.qr($context.args.input.put("__typename", "User"))
#set( $condition = {
  "expression": "attribute_not_exists(#id)",
  "expressionNames": {
      "#id": "id"
  }
} )
#if( $context.args.condition )
  #set( $condition.expressionValues = {} )
  #set( $conditionFilterExpressions = $util.parseJson($util.transform.toDynamoDBConditionExpression($context.args.condition)) )
  $util.qr($condition.put("expression", "($condition.expression) AND $conditionFilterExpressions.expression"))
  $util.qr($condition.expressionNames.putAll($conditionFilterExpressions.expressionNames))
  $util.qr($condition.expressionValues.putAll($conditionFilterExpressions.expressionValues))
#end
#if( $condition.expressionValues && $condition.expressionValues.size() == 0 )
  #set( $condition = {
  "expression": $condition.expression,
  "expressionNames": $condition.expressionNames
} )
#end
{
  "version": "2017-02-28",
  "operation": "PutItem",
  "key": #if( $modelObjectKey ) $util.toJson($modelObjectKey) #else {
  "id":   $util.dynamodb.toDynamoDBJson($ctx.args.input.id)
} #end,
  "attributeValues": $util.dynamodb.toMapValuesJson($context.args.input),
  "condition": $util.toJson($condition)
}
## [End] Prepare DynamoDB PutItem Request. **

In the res template, convert to JSON and return the result.

## pipelineFunctions/MutationCreateUserFunction.res.vtl

#if( $ctx.error )
  $util.error($ctx.error.message, $ctx.error.type)
#end
$util.toJson($ctx.result)

Step 6 - Add hash password lambda to pipeline

To add a lambda function to an AppSync pipeline resolver, you need:

A lambda function. You already created the hash password lambda function.
An AppSync DataSource HashPasswordLambdaDataSource that targets the lambda function.
An AWS IAM role HashPasswordLambdaDataSourceRole that allows AppSync to invoke the lambda function on your behalf to the stack’s Resources block.
A pipeline function InvokeHashPasswordLambdaDataSource resource that invokes the HashPasswordLambdaDataSource.
Update MutationSignupUserResolver resource block and add lambda function in the pipeline. Here is the complete resources block in a stack(like CustomResources.json) in the stacks/ directory.

// stacks/CustomResources.json

{
// ... The rest of the template
  "Resources": {
    "InvokeHashPasswordLambdaDataSource": {
      "Type": "AWS::AppSync::FunctionConfiguration",
      "Properties": {
        "ApiId": {
          "Ref": "AppSyncApiId"
        },
        "Name": "InvokeHashPasswordLambdaDataSource",
        "DataSourceName": "HashPasswordLambdaDataSource",
        "FunctionVersion": "2018-05-29",
        "RequestMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/pipelineFunctions/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["InvokeHashPasswordLambdaDataSource", "req", "vtl"]]
              }
            }
          ]
        },
        "ResponseMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/pipelineFunctions/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["InvokeHashPasswordLambdaDataSource", "res", "vtl"]]
              }
            }
          ]
        }
      },
      "DependsOn": "HashPasswordLambdaDataSource"
    },
    "HashPasswordLambdaDataSourceRole": {
      "Type": "AWS::IAM::Role",
      "Properties": {
        "RoleName": {
          "Fn::If": [
            "HasEnvironmentParameter",
            {
              "Fn::Join": [
                "-",
                [
                  "HashPasswordLambdabf85",
                  {
                    "Ref": "AppSyncApiId"
                  },
                  {
                    "Ref": "env"
                  }
                ]
              ]
            },
            {
              "Fn::Join": [
                "-",
                [
                  "HashPasswordLambdabf85",
                  {
                    "Ref": "AppSyncApiId"
                  }
                ]
              ]
            }
          ]
        },
        "AssumeRolePolicyDocument": {
          "Version": "2012-10-17",
          "Statement": [
            {
              "Effect": "Allow",
              "Principal": {
                "Service": "appsync.amazonaws.com"
              },
              "Action": "sts:AssumeRole"
            }
          ]
        },
        "Policies": [
          {
            "PolicyName": "InvokeLambdaFunction",
            "PolicyDocument": {
              "Version": "2012-10-17",
              "Statement": [
                {
                  "Effect": "Allow",
                  "Action": ["lambda:InvokeFunction"],
                  "Resource": {
                    "Fn::If": [
                      "HasEnvironmentParameter",
                      {
                        "Fn::Sub": [
                          "arn:aws:lambda:${AWS::Region}:${AWS::AccountId}:function:amplifypipelineHashPassword-${env}",
                          {
                            "env": {
                              "Ref": "env"
                            }
                          }
                        ]
                      },
                      {
                        "Fn::Sub": [
                          "arn:aws:lambda:${AWS::Region}:${AWS::AccountId}:function:amplifypipelineHashPassword",
                          {}
                        ]
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    },
    "HashPasswordLambdaDataSource": {
      "Type": "AWS::AppSync::DataSource",
      "Properties": {
        "ApiId": {
          "Ref": "AppSyncApiId"
        },
        "Name": "HashPasswordLambdaDataSource",
        "Type": "AWS_LAMBDA",
        "ServiceRoleArn": {
          "Fn::GetAtt": ["HashPasswordLambdaDataSourceRole", "Arn"]
        },
        "LambdaConfig": {
          "LambdaFunctionArn": {
            "Fn::If": [
              "HasEnvironmentParameter",
              {
                "Fn::Sub": [
                  "arn:aws:lambda:${AWS::Region}:${AWS::AccountId}:function:amplifypipelineHashPassword-${env}",
                  {
                    "env": {
                      "Ref": "env"
                    }
                  }
                ]
              },
              {
                "Fn::Sub": ["arn:aws:lambda:${AWS::Region}:${AWS::AccountId}:function:amplifypipelineHashPassword", {}]
              }
            ]
          }
        }
      },
      "DependsOn": "HashPasswordLambdaDataSourceRole"
    },
    "MutationCreateUserFunction": {
      "Type": "AWS::AppSync::FunctionConfiguration",
      "Properties": {
        "ApiId": {
          "Ref": "AppSyncApiId"
        },
        "Name": "MutationCreateUserFunction",
        "DataSourceName": "UserTable",
        "FunctionVersion": "2018-05-29",
        "RequestMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/pipelineFunctions/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["MutationCreateUserFunction", "req", "vtl"]]
              }
            }
          ]
        },
        "ResponseMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/pipelineFunctions/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["MutationCreateUserFunction", "res", "vtl"]]
              }
            }
          ]
        }
      }
    },
    "MutationSignupUserResolver": {
      "Type": "AWS::AppSync::Resolver",
      "Properties": {
        "ApiId": {
          "Ref": "AppSyncApiId"
        },
        "TypeName": "Mutation",
        "FieldName": "signupUser",
        "Kind": "PIPELINE",
        "PipelineConfig": {
          "Functions": [
            {
              "Fn::GetAtt": ["InvokeHashPasswordLambdaDataSource", "FunctionId"]
            },
            {
              "Fn::GetAtt": ["MutationCreateUserFunction", "FunctionId"]
            }
          ]
        },
        "RequestMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["Mutation", "signupUser", "req", "vtl"]]
              }
            }
          ]
        },
        "ResponseMappingTemplateS3Location": {
          "Fn::Sub": [
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/${ResolverFileName}",
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              },
              "ResolverFileName": {
                "Fn::Join": [".", ["Mutation", "signupUser", "res", "vtl"]]
              }
            }
          ]
        }
      },
      "DependsOn": ["MutationCreateUserFunction", "InvokeHashPasswordLambdaDataSource"]
    }
  }
}

Add templates for InvokeHashPasswordLambdaDataSource pipeline function.

## pipelineFunctions/InvokeHashPasswordLambdaDataSource.req.vtl

## [Start] Invoke AWS Lambda data source: HashPasswordLambdaDataSource. **
{
  "version": "2018-05-29",
  "operation": "Invoke",
  "payload": {
      "typeName": "$ctx.stash.get("typeName")",
      "fieldName": "$ctx.stash.get("fieldName")",
      "arguments": $util.toJson($ctx.arguments),
      "identity": $util.toJson($ctx.identity),
      "source": $util.toJson($ctx.source),
      "request": $util.toJson($ctx.request),
      "prev": $util.toJson($ctx.prev)
  }
}
## [End] Invoke AWS Lambda data source: HashPasswordLambdaDataSource. **

## pipelineFunctions/InvokeHashPasswordLambdaDataSource.res.vtl

## [Start] Handle error or return result. **
#if( $ctx.error )
  $util.error($ctx.error.message, $ctx.error.type)
#end
$util.toJson($ctx.result)
## [End] Handle error or return result. **

Now deploy the latest code to AWS.

$ amplify push

Step 7 - Test your mutation

Run the following command. It will open the AppSync console where you can run graphQL queries and mutation under Queries tab.

$ amplify console api

Create new user using the signupUser mutation.

mutation {
  signupUser(
    input: {
      name: "Satvik Daga", 
      email: "test@example.com", 
      password: "test123"
    }) {
    id
    name
    email
    password
  }
}

The password of the newly created user is hashed.
First, the password field is hashed by the HashPasword Lambda function, and then a user with hashed password is created by the pipeline resolver for signupUser mutation.

Note: You can also test your app locally by running the following command amplify mock. Click here for more details.

Conclusion

Congratulations! You have successfully added a pipeline resolver to your AWS Amplify application. Now you can easily add a pipeline resolver for any graphQL operation.

You can find the complete source code for this tutorial on GitHub.

dagasatvik10 / amplify-pipeline-tutorial

Add pipeline resolver in AWS Amplify

This project is part of the tutorial to add pipeline resolvers to AWS amplify.

You can find the complete tutorial here

Prerequisites

To complete this tutorial, you will need:

Node.js(>=10.x) and NPM(>=6.x) installed. Download from here.
An AWS account. If you don't have one, you can create here.
Amplify CLI installed and configured.

Getting Started

Clone this repository
Initialize a new AWS backend
```
$ amplify init
```
Each commit corresponds to a complete step in the tutorial.
- Checkout the commits corresponding to each step by-
```
$ git log --pretty=oneline
```
- Replace commitId with the corresponding commitId for a step and then run checkout.
```
$ git checkout <commitId>
```
Run the following if you want to deploy the code
```
$ amplify push
```

Built With

AWS Amplify
React

View on GitHub

A Simple Introduction to git

Satvik Daga — Tue, 23 Jul 2019 22:00:01 +0000

Version Control Systems(VCS) are one of the most important things a developer needs to know about. Since its release in 2005, git has continued to be one of the most widely used VCS. So without further delay, lets get started with basics of git.

First thing to do is install git on whatever OS you are using. Let's see how it's done on Ubuntu.

$ sudo apt-add-repository ppa:git-core/ppa
$ sudo apt-get update
$ sudo apt-get install -y git

Check that git is installed in your system. You should see something like this.

$ git --version
git version 2.20.1 (Apple Git-117)

Great! Let's make your first commit.

Create a new project folder and initialize it as a git repository.

$ mkdir git-tutorial
$ cd git-tutorial
$ git init
Initialized empty Git repository in /home/sa.daga/src/demo/git-tutorial/.git/

There are 3 different areas where code can exist in git:

Unstaged
Staged
Committed

Run the following command on the terminal in the git-tutorial directory.

$ git status
On branch master

No commits yet

nothing to commit (create/copy files and use "git add" to track)

git status command tells you which code is staged and which is unstaged.

Create a new file in the git-tutorial directory and again run git status.

$ echo "test1" > a.txt
$ cat a.txt
test1
$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    a.txt

nothing added to commit but untracked files present (use "git add" to track)

As you can see, it shows that you have a file named a.txt in your directory and it is untracked. Untracked is git's way of saying that currently it does not care about the changes in this file. Changes in a.txt are currently in the unstaged area.

Note: Don't confuse untracked with unstaged. Files are untracked but changes are unstaged.

Now add this file to the staged area and again run git status.

$ git add a.txt
$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

    new file:   a.txt

a.txt has now moved to the staged area.
Let's modify a.txt and again run git status.

$ echo "test2" >> a.txt
$ cat a.txt
test1
test2
$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

    new file:   a.txt

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   a.txt

As you can see, git status tells us that the a.txt has been modified. So the a.txt that contains test1 is in the staged area whereas change test2 is in the unstaged area.

Note: Output of git commands can contain information about what commands you can run next. Like in the output of above command, git displays commands that you can run if you want to unstage a staged change, add unstaged changes to staged area or discard changes in a file.

You can even see the modifications in each file by running git diff.

$ git diff
diff --git a/a.txt b/a.txt
index 9daeafb..8e042fb 100644
--- a/a.txt
+++ b/a.txt
@@ -1 +1,2 @@
 test1
+test2

Output of git diff shows that test2 has been appended to a.txt in the next line of test1.
Let's add your first commit. Only staged changes are committed.

$ git commit -m "some commit message"
[master (root-commit) 4d75ac6] some commit message
 1 file changed, 1 insertion(+)
 create mode 100644 a.txt

git commit command is used to add a commit. Option -m is used to pass a commit message to the commit which describes what changes are being committed. Replace some commit message with a custom message which describes the changes being committed.

Note: A commit message is necessary to add a commit. If -m option is not passed along with git commit, an editor(usually vim or nano) is opened where you have to write a commit message.

Again run git status followed by git diff.

$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   a.txt

no changes added to commit (use "git add" and/or "git commit -a")
$ git diff
diff --git a/a.txt b/a.txt
index 9daeafb..8e042fb 100644
--- a/a.txt
+++ b/a.txt
@@ -1 +1,2 @@
 test
+git

git status no longer shows no commits yet message. Also since the staged changes were committed, only unstaged changes are displayed in git status.
git diff displays the changes in each file with respect to staged changes if they exist else with respect to committed changes.

To see history of commits, you can run git log.

$ git log
commit 4d75ac6ce5c533b2ec7bac5e0e00e112b2d5d417 (HEAD -> master)
Author: dagasatvik10 <dagasatvik10@gmail.com>
Date:   Wed Jul 24 02:13:23 2019 +0530

    some commit message

By default, with no arguments, git log lists the commits made in the project in reverse chronological order; that is, the most recent commits show up first.

Wrap up

Congrats on working your way through this tutorial! In it, we covered basic git commands like git init, git status, git add, git diff, git commit and git log.
Keep exploring more about git and if you have any issues, don't hesitate to ask.

This was my very first blog, so please provide me with feedback on what can I do to improve.

DEV Community: Satvik Daga

Longest Substring Without Repeating Characters

Problem

Approaches

Brute Force Approach

Optimal Approach

Example Walkthrough

Code

Conclusion

Maximizing XOR

Question

Naive Solution

Time Complexity

Efficient Solution

Efficient Solution 1

Time Complexity

Efficient Solution 2

Time Complexity

React useScrollTo hook

dagasatvik10 / react-useScrollTo-demo

Demo of useScrollTo hook in React

Add Pipeline Resolvers in AWS Amplify

What are pipeline resolvers?

What are we building?

Prerequisites

Step 1 - Create a new React App

Step 2 - Initialize a new backend

Step 3 - Add GraphQL API

Step 4 - Add a Lambda function to hash password

Step 5 - Add user signup mutation

Step 6 - Add hash password lambda to pipeline

Step 7 - Test your mutation

Conclusion

dagasatvik10 / amplify-pipeline-tutorial

Add pipeline resolver in AWS Amplify

Prerequisites

Getting Started

Built With

A Simple Introduction to git

Wrap up