feat: transfer old react-query hooks (#109)

* feat: added initial setup * fix: style * feat: added auth queries * feat: added password reset hooks * feat: folders refactor * fix: added server fixes * fix: removed bugged test * feat: changed hooks, consts & logout * fix: error handling * feat: fix merge issues * fix: deployment issue * fix: other issues
nmashchenko · Nov 30, 2023 · bfee5d5 · bfee5d5 · github-actions · Nov 30, 2023
1 parent 37ad0de
commit bfee5d5
Show file tree

Hide file tree

Showing 54 changed files with 731 additions and 133 deletions.
diff --git a/client/.env.local.example b/client/.env.local.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GOOGLE_API_OAUTH_TOKEN=
+NEXT_PUBLIC_GITHUB_API_OAUTH_TOKEN=
diff --git a/client/.eslintrc.json b/client/.eslintrc.json
@@ -5,13 +5,14 @@
     "jest": true
   },
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "@tanstack/query"],
   "extends": [
     "next",
     "next/core-web-vitals",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "globals": {
     "React": "readonly"
@@ -37,6 +38,9 @@
       }
     ],
     "@typescript-eslint/no-explicit-any": "error",
-    "@typescript-eslint/no-var-requires": "off"
+    "@typescript-eslint/no-var-requires": "off",
+    // query rules
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/stable-query-client": "error"
   }
 }
diff --git a/client/package.json b/client/package.json
@@ -24,17 +24,21 @@
   "dependencies": {
     "@react-oauth/google": "^0.11.1",
     "@storybook/addon-styling": "^1.3.6",
-    "@tanstack/react-query": "beta",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query-devtools": "^5.0.1",
     "@teameights/types": "^1.1.24",
+    "@types/js-cookie": "^3.0.5",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@uiball/loaders": "^1.3.0",
     "add": "^2.0.6",
+    "axios": "^1.5.1",
     "clsx": "^2.0.0",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
+    "js-cookie": "^3.0.5",
     "lodash.debounce": "^4.0.8",
     "next": "13.4.12",
     "qs": "^6.11.2",
@@ -67,6 +71,7 @@
     "@storybook/nextjs": "7.2.1",
     "@storybook/react": "7.2.1",
     "@storybook/testing-library": "0.2.0",
+    "@tanstack/eslint-plugin-query": "^5.0.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.5",

diff --git a/client/public/images/team8s.png b/client/public/images/team8s.png
diff --git a/client/src/app/(auth)/layout.tsx b/client/src/app/(auth)/layout.tsx
@@ -7,8 +7,9 @@ import { LogoBig, LogoSmall } from '@/shared/assets';
 import { Flex, Tabs } from '@/shared/ui';
 import styles from './styles.module.scss';
 import { useGetScreenWidth } from '@/shared/lib';
+import Image from 'next/image';
 
-const baseLayouts = ['confirmation', 'expired', 'success'];
+const baseLayouts = ['confirmation', 'expired', 'success', 'processing'];
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
   const router = useRouter();
@@ -30,9 +31,7 @@ export default function AuthLayout({ children }: { children: ReactNode }) {
       <div className={styles.logo} onClick={handleBack}>
         {width > 420 ? <LogoBig /> : <LogoSmall />}
       </div>
-      <div className={styles.headerNormalizer}>
-        <Tabs options={options} currentTab={tab} onTabChange={handleChange} />
-      </div>
+      <Tabs options={options} currentTab={tab} onTabChange={handleChange} />
     </header>
   );
 
@@ -59,7 +58,15 @@ export default function AuthLayout({ children }: { children: ReactNode }) {
           {children}
         </Flex>
       </div>
-      <img className={styles.right} src='https://dummyimage.com/4000x4000' alt='Main image' />
+      <Image
+        src='/images/team8s.png'
+        width={0}
+        height={0}
+        alt={'Teameights screen'}
+        sizes='100vw'
+        className={styles.right}
+        priority
+      />
     </Flex>
   );
 

diff --git a/client/src/app/(auth)/login/page.tsx b/client/src/app/(auth)/login/page.tsx
@@ -9,6 +9,7 @@ import { Button, Flex, Input, InputPassword, Typography } from '@/shared/ui';
 import { useState } from 'react';
 import styles from '../shared.module.scss';
 import { Github, Google } from '@/shared/assets';
+import { useLogin } from '@/entities/session';
 
 interface LoginProps {
   email: string;
@@ -19,6 +20,7 @@ export default function LoginPage() {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const router = useRouter();
+  const { mutate: loginUser, isPending } = useLogin();
 
   const {
     register,
@@ -27,11 +29,17 @@ export default function LoginPage() {
   } = useForm<LoginProps>();
 
   const login = useGoogleLogin({
-    onSuccess: codeResponse => console.log(codeResponse),
+    // issue: https://github.com/MomenSherif/react-oauth/issues/12
+    onSuccess: codeResponse => router.push(`/proxy/google?code=${codeResponse.code}`),
     flow: 'auth-code',
   });
 
-  const onSubmit: SubmitHandler<LoginProps> = data => console.log(data);
+  const loginWithGit = () =>
+    router.push(
+      `https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_API_OAUTH_TOKEN}`
+    );
+
+  const onSubmit: SubmitHandler<LoginProps> = data => loginUser(data);
 
   return (
     <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
@@ -68,7 +76,9 @@ export default function LoginPage() {
         </Flex>
 
         <Flex direction='column' gap={24}>
-          <Button type='submit'>Log in</Button>
+          <Button type='submit' loading={isPending}>
+            Log in
+          </Button>
 
           <Flex justify='center' align='center' gap={13} className={styles.lines_container}>
             <div className={styles.line} />
@@ -83,7 +93,7 @@ export default function LoginPage() {
               <Google />
               <Typography>Google</Typography>
             </Button>
-            <Button typeBtn='secondary' size='l' width='100%' type='button'>
+            <Button typeBtn='secondary' size='l' width='100%' type='button' onClick={loginWithGit}>
               <Github />
               <Typography>Github</Typography>
             </Button>

diff --git a/client/src/app/(auth)/password/recover/page.tsx b/client/src/app/(auth)/password/recover/page.tsx
@@ -4,27 +4,24 @@ import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { ArrowLeft } from '@/shared/assets';
 import { Button, Flex, Input, Typography } from '@/shared/ui';
-import { useRouter } from 'next/navigation';
 import styles from '../password.module.scss';
+import { useForgotPassword } from '@/entities/session';
 
 interface RecoverProps {
   email: string;
 }
 
 export default function Recover() {
   const [email, setEmail] = useState('');
-  const router = useRouter();
+  const { mutate: forgotPassword, isPending } = useForgotPassword();
 
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm<RecoverProps>();
 
-  const onSubmit: SubmitHandler<RecoverProps> = data => {
-    console.log(data);
-    router.push('confirmation');
-  };
+  const onSubmit: SubmitHandler<RecoverProps> = data => forgotPassword(data);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -58,7 +55,7 @@ export default function Recover() {
           onChange={e => setEmail(e.target.value)}
         />
         <Flex direction='column' justify='center' align='center' gap={8} width='100%'>
-          <Button width='100%' disabled={!email.length}>
+          <Button width='100%' disabled={!email.length} loading={isPending}>
             Reset password
           </Button>
           <Button width='100%' typeBtn='secondary' type='button'>

diff --git a/...th)/password/update/[id]/[token]/page.tsx → ...t/src/app/(auth)/password/update/page.tsx b/...th)/password/update/[id]/[token]/page.tsx → ...t/src/app/(auth)/password/update/page.tsx
@@ -1,30 +1,30 @@
 'use client';
-import styles from '../../../password.module.scss';
+import styles from '../password.module.scss';
 import { Button, Flex, InputPassword, Typography } from '@/shared/ui';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { useRouter } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useResetPassword } from '@/entities/session';
 
 interface UpdateProps {
   password: string;
   repeatPassword: string;
 }
-export default function Update({ params }: { params: { id: string; token: string } }) {
-  const { id, token } = params;
+export default function Update() {
+  const searchParams = useSearchParams();
+  const hash = searchParams.get('hash') ?? ''; // default value is ""
   const [password, setPassword] = useState('');
   const [repeatPassword, setRepeatPassword] = useState('');
-  const router = useRouter();
+  const { mutate: resetPassword, isPending } = useResetPassword();
 
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm<UpdateProps>();
 
-  const onSubmit: SubmitHandler<UpdateProps> = data => {
-    console.log(data, id, token);
-    router.push('/password/success');
-  };
+  const onSubmit: SubmitHandler<UpdateProps> = data =>
+    resetPassword({ password: data.password, hash });
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -54,7 +54,7 @@ export default function Update({ params }: { params: { id: string; token: string
             placeholder='Password'
             {...register('password', {
               required: 'You must specify a password',
-              minLength: { value: 8, message: 'Password must have at least 8 characters' },
+              // minLength: { value: 8, message: 'Password must have at least 8 characters' },
             })}
             error={errors?.password ? errors.password.message : undefined}
             value={password}
@@ -70,7 +70,9 @@ export default function Update({ params }: { params: { id: string; token: string
             onChange={e => setRepeatPassword(e.target.value)}
           />
         </Flex>
-        <Button width='100%'>Reset password</Button>
+        <Button width='100%' loading={isPending}>
+          Reset password
+        </Button>
       </Flex>
     </form>
   );

diff --git a/client/src/app/(auth)/signup/page.tsx b/client/src/app/(auth)/signup/page.tsx
@@ -6,6 +6,8 @@ import { Github, Google } from '@/shared/assets';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { Button, Flex, Input, InputPassword, Typography } from '@/shared/ui';
 import styles from '../shared.module.scss';
+import { useRouter } from 'next/navigation';
+import { useRegister } from '@/entities/session';
 
 interface SignupProps {
   email: string;
@@ -17,9 +19,11 @@ export default function SignupPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [repeatPassword, setRepeatPassword] = useState('');
+  const router = useRouter();
+  const { mutate: registerUser } = useRegister();
 
   const login = useGoogleLogin({
-    onSuccess: codeResponse => console.log(codeResponse),
+    onSuccess: codeResponse => router.push(`/proxy/google?code=${codeResponse.code}`),
     flow: 'auth-code',
   });
 
@@ -29,7 +33,13 @@ export default function SignupPage() {
     formState: { errors },
   } = useForm<SignupProps>();
 
-  const onSubmit: SubmitHandler<SignupProps> = data => console.log(data);
+  const loginWithGit = () =>
+    router.push(
+      `https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_API_OAUTH_TOKEN}`
+    );
+
+  const onSubmit: SubmitHandler<SignupProps> = data =>
+    registerUser({ email: data.email, password: data.password });
 
   return (
     <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
@@ -66,7 +76,7 @@ export default function SignupPage() {
         </Flex>
 
         <Flex direction='column' gap={24}>
-          <Button type='submit'>Log in</Button>
+          <Button type='submit'>Sign up</Button>
 
           <Flex justify='center' align='center' gap={13} className={styles.lines_container}>
             <div className={styles.line} />
@@ -81,7 +91,7 @@ export default function SignupPage() {
               <Google />
               <Typography>Google</Typography>
             </Button>
-            <Button typeBtn='secondary' size='l' width='100%' type='button'>
+            <Button typeBtn='secondary' size='l' width='100%' type='button' onClick={loginWithGit}>
               <Github />
               <Typography>Github</Typography>
             </Button>

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -14,9 +14,9 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <ReactQueryProvider>
-      <html lang='en'>
-        <body className={inter.variable}>
+    <html lang='en'>
+      <body className={inter.variable}>
+        <ReactQueryProvider>
           {/* <CookieBanner /> */}
           <Toaster
             theme='dark'
@@ -25,8 +25,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             }}
           />
           {children}
-        </body>
-      </html>
-    </ReactQueryProvider>
+        </ReactQueryProvider>
+      </body>
+    </html>
   );
 }