web.code-snippets

{
  "React": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "react",
    "body": [
      "import { ${1:Box}, ${1}Props } from \"@mui/material\";",
      "import * as React from \"react\";",
      "",
      "type ${TM_FILENAME_BASE}Props = Omit<${1}Props, \"children\">;",
      "",
      "function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props): JSX.Element {",
      "  const { sx, ...other } = props;",
      "",
      "  return (",
      "    <$1 sx={{ ...sx }} {...other}>",
      "      $0",
      "    </$1>",
      "  );",
      "}",
      "",
      "export { ${TM_FILENAME_BASE}, type ${TM_FILENAME_BASE}Props };",
      ""
    ],
    "description": "React Component"
  },
  "Mutation": {
    "scope": "typescript",
    "prefix": "mutation",
    "body": [
      "import * as React from \"react\";",
      "import { graphql, useMutation } from \"react-relay\";",
      "import { ${1/(.)(.*)/${1:/upcase}$2/}Input } from \"./__generated__/${TM_FILENAME_BASE/\\.hooks//}Mutation.graphql\";",
      "",
      "const mutation = graphql`",
      "  mutation ${TM_FILENAME_BASE/\\.hooks//}Mutation(\\$input: ${1/(.)(.*)/${1:/upcase}$2/}Input!) {",
      "    ${1:action}(input: \\$input) {",
      "      ${2:payload}",
      "    }",
      "  }",
      "`;",
      "",
      "type Input = ${1/(.)(.*)/${1:/upcase}$2/}Input;",
      "type InputErrors = { [key in keyof Input | \"_\"]?: string[] };",
      "",
      "function use${1/(.)(.*)/${1:/upcase}$2/}(): {",
      "  input: Input;",
      "  errors: InputErrors;",
      "  loading: boolean;",
      "  handleChange: React.ChangeEventHandler;",
      "  handleSubmit: React.FormEventHandler;",
      "} {",
      "  const [commit, loading] = useMutation(mutation);",
      "  const [errors, setErrors] = React.useState<InputErrors>({});",
      "  const [input, setInput] = React.useState<Input>({",
      "    $0",
      "  });",
      "",
      "  const handleChange = React.useCallback(",
      "    (event: React.ChangeEvent<HTMLInputElement>) => {",
      "      const { name, value } = event.target;",
      "      setInput((prev) => ({ ...prev, [name]: value }));",
      "    },",
      "    [],",
      "  );",
      "",
      "  const handleSubmit = React.useCallback(",
      "    (event: React.FormEvent) => {",
      "      event.preventDefault();",
      "      commit({",
      "        variables: { input },",
      "        onCompleted(res, errors) {",
      "          const err = errors?.[0];",
      "          if (err) {",
      "            setErrors(err.errors || { _: [err.message] });",
      "          } else {",
      "            setErrors({});",
      "          }",
      "        },",
      "      });",
      "    },",
      "    [input],",
      "  );",
      "",
      "  return React.useMemo(",
      "    () => ({ input, errors, loading, handleChange, handleSubmit }),",
      "    [input, errors, loading, handleChange, handleSubmit],",
      "  );",
      "}",
      "",
      "export { use${1}, type Input, type InputErrors };",
      ""
    ],
    "description": "Mutation React Hook"
  }
}