Feat/next 13

packages/api/package.json

@@ -13,6 +13,7 @@
     "start": "node dist",
     "generate": "prisma generate",
     "db:migrate": "prisma migrate dev",
+    "db:seed": "ts-node src/db/seed.ts",
     "build": "rm -rf dist && tsc --build",
     "buildSchema": "ts-node buildSchema.ts",
     "typecheck": "tsc --noEmit",
@@ -64,6 +65,7 @@
     "typegraphql-prisma": "0.22.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^7.6.0",
     "@types/bcryptjs": "2.4.2",
     "@types/express": "4.17.14",
     "@types/express-jwt": "6.0.4",

packages/api/src/db/schema.prisma

@@ -1,11 +1,13 @@
 generator client {
-  provider = "prisma-client-js"
+  provider        = "prisma-client-js"
+  previewFeatures = ["orderByNulls"]
 }
 
 generator typegraphql {
-  provider = "typegraphql-prisma"
-  output   = "../../../../node_modules/@generated"
-  emitOnly = "inputs,enums,crudResolvers"
+  provider        = "typegraphql-prisma"
+  output          = "../../../../node_modules/@generated"
+  emitOnly        = "inputs,enums,crudResolvers"
+  useSimpleInputs = true
 }
 
 datasource db {

packages/api/src/db/seed.ts

@@ -0,0 +1,23 @@
+import "reflect-metadata"
+import "dotenv/config"
+
+import { faker } from "@faker-js/faker"
+
+import { prisma } from "../lib/prisma"
+
+const createUserData = () =>
+  Array.from({ length: 40 }).map(() => {
+    const firstName = faker.name.firstName()
+    const lastName = faker.name.lastName()
+    return {
+      firstName,
+      lastName,
+      email: faker.internet.email(firstName, lastName),
+      password: faker.internet.password(),
+    }
+  })
+
+export async function main() {
+  await prisma.user.createMany({ data: createUserData() })
+}
+main()

packages/api/src/modules/user/user.resolver.ts

@@ -1,7 +1,7 @@
 import { Arg, Args, Ctx, Mutation, Query, Resolver } from "type-graphql"
 import { Inject, Service } from "typedi"
 
-import { CreateOneUserArgs, FindFirstUserArgs, FindManyUserArgs, Role } from "@generated"
+import { CreateOneUserArgs, FindFirstUserArgs, FindManyUserArgs, Role, UserUpdateInput } from "@generated"
 
 import { createToken, decodeRefreshToken, decodeToken } from "../../lib/jwt"
 import { prisma } from "../../lib/prisma"
@@ -12,7 +12,6 @@ import { ResolverContext } from "../shared/resolverContext"
 import { LoginInput } from "./inputs/login.input"
 import { RegisterInput } from "./inputs/register.input"
 import { ResetPasswordInput } from "./inputs/resetPassword.input"
-import { UpdateUserInput } from "./inputs/updateUser.input"
 import { AuthResponse } from "./responses/auth.response"
 import { RefreshTokenResponse } from "./responses/refreshToken.response"
 import { UsersResponse } from "./responses/users.response"
@@ -58,7 +57,7 @@ export default class UserResolver {
   // UPDATE ME
   @UseAuth()
   @Mutation(() => User)
-  async updateMe(@CurrentUser() currentUser: User, @Arg("data") data: UpdateUserInput): Promise<User> {
+  async updateMe(@CurrentUser() currentUser: User, @Arg("data") data: UserUpdateInput): Promise<User> {
     return await prisma.user.update({ where: { id: currentUser.id }, data })
   }
 

packages/app/package.json

@@ -31,32 +31,32 @@
     "@react-navigation/native": "6.0.13",
     "@react-navigation/native-stack": "6.9.1",
     "@react-navigation/stack": "6.3.2",
-    "expo": "45.0.8",
-    "expo-status-bar": "1.4.0",
+    "expo": "^46.0.0",
+    "expo-status-bar": "~1.4.0",
     "graphql": "15.8.0",
     "graphql-tag": "2.12.6",
     "native-base": "3.4.19",
     "polished": "4.2.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1",
-    "react-native-svg": "12.4.4",
-    "react-native-web": "0.18.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.69.6",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
+    "react-native-svg": "12.3.0",
+    "react-native-web": "~0.18.7",
     "styled-components": "5.3.6",
     "styled-system": "5.1.5"
   },
   "devDependencies": {
-    "@babel/core": "7.19.6",
+    "@babel/core": "^7.18.6",
     "@graphql-codegen/add": "3.2.1",
     "@graphql-codegen/cli": "2.13.7",
     "@graphql-codegen/typescript": "2.8.0",
     "@graphql-codegen/typescript-operations": "2.5.5",
     "@graphql-codegen/typescript-react-apollo": "3.3.5",
-    "@types/react": "17.0.51",
-    "@types/react-dom": "17.0.17",
-    "@types/react-native": "0.70.6",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@types/react-native": "~0.69.1",
     "eslint-plugin-react": "7.31.10",
     "eslint-plugin-react-hooks": "4.6.0"
   },

packages/app/src/components/InputError.tsx

@@ -6,7 +6,7 @@ interface Props {
   error?: Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined
 }
 
-export const InputError: React.FC<Props> = (props) => {
+export function InputError(props: Props) {
   if (!props.error) return null
   return (
     <Stack direction="row" space={2} alignItems="center">

packages/web/.env.local

@@ -0,0 +1 @@
+SENTRY_IGNORE_API_RESOLUTION_ERROR=1

packages/web/.gitignore

@@ -5,3 +5,5 @@ node_modules/
 
 # Sentry
 .sentryclirc
+
+.vscode

packages/web/codegen.yml

@@ -3,6 +3,7 @@ documents:
   - "src/components/**/*.{ts,tsx}"
   - "src/lib/**/*.{ts,tsx}"
   - "src/pages/**/*.{ts,tsx}"
+  - "src/app/**/*.{ts,tsx}"
 overwrite: true
 generates:
   src/lib/graphql.tsx:

packages/web/next.config.js

@@ -8,7 +8,10 @@ const sentryWebpackPluginOptions = {
  */
 module.exports = withSentryConfig(
   {
-    reactStrictMode: false,
+    experimental: { appDir: true, esmExternals: false },
+    sentry: {
+      hideSourceMaps: false,
+    },
     env: {
       NEXT_PUBLIC_PULL_REQUEST_NUMBER: process.env.VERCEL_GIT_PULL_REQUEST_NUMBER,
       NEXT_PUBLIC_APP_ENV: process.env.NEXT_PUBLIC_APP_ENV,

packages/web/package.json

@@ -29,17 +29,19 @@
   "license": "MIT",
   "dependencies": {
     "@apollo/client": "3.7.0",
-    "@chakra-ui/react": "1.8.9",
-    "@emotion/react": "11.10.4",
-    "@emotion/styled": "11.10.4",
+    "@chakra-ui/icons": "^2.0.11",
+    "@chakra-ui/react": "^2.3.6",
+    "@emotion/react": "11.10.5",
+    "@emotion/styled": "11.10.5",
     "@hookform/resolvers": "2.9.10",
+    "@next/font": "^13.0.0",
     "@sentry/nextjs": "7.16.0",
     "dayjs": "1.11.6",
     "framer-motion": "6.5.1",
     "graphql": "15.8.0",
-    "next": "12.3.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "14.2.3",
     "react-hook-form": "7.38.0",
     "react-icons": "4.6.0",
@@ -53,8 +55,8 @@
     "@graphql-codegen/typescript-operations": "2.5.5",
     "@graphql-codegen/typescript-react-apollo": "3.3.5",
     "@types/cookie": "0.5.1",
-    "@types/react": "17.0.51",
-    "@types/react-dom": "17.0.17",
-    "eslint-config-next": "12.3.1"
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint-config-next": "^13.0.0"
   }
 }

packages/web/src/pages/forgot-password.tsx → packages/web/src/app/(auth)/forgot-password/page.tsx

@@ -1,17 +1,16 @@
+"use client"
 import * as React from "react"
 import { gql } from "@apollo/client"
 import { Box, Button, Center, Heading, Stack, Text } from "@chakra-ui/react"
-import Head from "next/head"
 import Link from "next/link"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 
 import type { MutationForgotPasswordArgs } from "lib/graphql"
 import { useForgotPasswordMutation } from "lib/graphql"
 import { useForm } from "lib/hooks/useForm"
 import { useToast } from "lib/hooks/useToast"
 import Yup from "lib/yup"
 import { Form } from "components/Form"
-import { HomeLayout } from "components/HomeLayout"
 import { Input } from "components/Input"
 
 const _ = gql`
@@ -45,9 +44,6 @@ export default function ForgotPassword() {
   }
   return (
     <Center flexDir="column" pt={10}>
-      <Head>
-        <title>Forgot password</title>
-      </Head>
       <Box w={["100%", 400]}>
         <Form {...form} onSubmit={handleSubmit}>
           <Stack spacing={4}>
@@ -65,4 +61,3 @@ export default function ForgotPassword() {
     </Center>
   )
 }
-ForgotPassword.getLayout = (page: React.ReactNode) => <HomeLayout>{page}</HomeLayout>

packages/web/src/app/(auth)/layout.tsx

@@ -0,0 +1,63 @@
+"use client"
+import type { LinkProps} from "@chakra-ui/react";
+import { Box, HStack, Link, useColorModeValue } from "@chakra-ui/react"
+import NextLink from "next/link"
+import { usePathname } from "next/navigation"
+
+import { Limiter } from "components/Limiter"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Box h="65px" w="100%" borderBottom="1px solid" borderColor={useColorModeValue("gray.100", "gray.700")}>
+        <Limiter
+          display="flex"
+          transition="200ms all"
+          py={{ base: 4, md: 3 }}
+          bg={useColorModeValue("white", "gray.800")}
+          justifyContent="space-between"
+          alignItems="center"
+          w="100%"
+        >
+          {/* Left link list */}
+          <HStack>
+            <HomeLink
+              href="/"
+              color={useColorModeValue("purple.600", "purple.400")}
+              pl={0}
+              textTransform="uppercase"
+              fontWeight="bold"
+            >
+              Home
+            </HomeLink>
+          </HStack>
+        </Limiter>
+      </Box>
+      {children}
+    </>
+  )
+}
+
+interface HomeLinkProps extends LinkProps {
+  href: string
+}
+
+function HomeLink({ href, ...props }: HomeLinkProps) {
+  const pathname = usePathname()
+  const isActive = pathname === href
+
+  return (
+    <Link
+      as={NextLink}
+      href={href}
+      px={4}
+      py={2}
+      textDecor="none !important"
+      _hover={{ color: isActive ? "purple.600" : "purple.500" }}
+      color={isActive ? "purple.600" : "gray.500"}
+      {...props}
+    >
+      {props.children}
+    </Link>
+  )
+}

packages/web/src/app/(auth)/login/head.tsx

@@ -0,0 +1,7 @@
+export default function Head() {
+  return (
+    <>
+      <title>Login</title>
+    </>
+  )
+}