From a62455b49def24f72a0ef3c5646480535faaad82 Mon Sep 17 00:00:00 2001
From: yuqi88 <snow34545@gmail.com>
Date: Tue, 29 Mar 2022 05:39:16 -0700
Subject: [PATCH 1/3] styling submit button

---
 src/pages/puzzles/[instanceId]/index.tsx | 36 +++++++++++++-----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/pages/puzzles/[instanceId]/index.tsx b/src/pages/puzzles/[instanceId]/index.tsx
index d64af96..01da8ff 100644
--- a/src/pages/puzzles/[instanceId]/index.tsx
+++ b/src/pages/puzzles/[instanceId]/index.tsx
@@ -169,23 +169,25 @@ const PuzzlePage = ({
               setAnswer={setAnswer}
             />
           </div>
-          {isAuthenticated ? (
-            <Button
-              style={'primary'}
-              type={'submit'}
-              content={'Submit'}
-              onClick={() =>
-                handleSubmit(answer, puzzleInstance, puzzle, randomSeed, user)
-              }
-            />
-          ) : (
-            <Button
-              style={'primary'}
-              content={'Login to Submit'}
-              arrowDirection={'right'}
-              onClick={() => signIn()}
-            />
-          )}
+          <div>
+            {isAuthenticated ? (
+                <Button
+                    style={'primary'}
+                    type={'submit'}
+                    content={'Submit'}
+                    onClick={() =>
+                        handleSubmit(answer, puzzleInstance, puzzle, randomSeed, user)
+                    }
+                />
+            ) : (
+                <Button
+                    style={'primary'}
+                    content={'Login to Submit'}
+                    arrowDirection={'right'}
+                    onClick={() => signIn()}
+                />
+            )}
+          </div>
         </section>
       </main>
     </>

From 4246c8b9b926e0342ba0dddbb7b2e0c53f0b3fb8 Mon Sep 17 00:00:00 2001
From: yuqi88 <snow34545@gmail.com>
Date: Tue, 29 Mar 2022 05:40:46 -0700
Subject: [PATCH 2/3] add responsiveness

---
 src/styles/pages/PuzzlePage.module.scss | 53 +++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/styles/pages/PuzzlePage.module.scss b/src/styles/pages/PuzzlePage.module.scss
index 34cbe0a..2c0d32c 100644
--- a/src/styles/pages/PuzzlePage.module.scss
+++ b/src/styles/pages/PuzzlePage.module.scss
@@ -22,8 +22,6 @@
   justify-content: space-between;
 
   .text {
-    flex: 0 0 65%;
-    max-width: 65%;
     width: 100%;
     padding: 2rem 2rem;
 
@@ -52,8 +50,7 @@
   }
 
   .image {
-    flex: 0 0 35%;
-    max-width: 35%;
+    flex: 1;
     position: relative;
     width: 100%;
     height: auto;
@@ -94,3 +91,51 @@
 .feedbackContainer {
   margin: 3rem 0;
 }
+
+
+/* MEDIA QUERIES*/
+@media (max-width: 600px) {
+  .card{
+    max-width: 600px;
+    flex-direction: column;
+  }
+}
+@media (max-width: 768px) {
+  .card{
+    max-width: 720px;
+    flex-direction: column;
+  }
+}
+@media (max-width: 992px) {
+  .card{
+    max-width: 960px;
+    flex-direction: column;
+
+  }
+}
+@media (max-width: 1200px) {
+  .card {
+    max-width: 1140px;
+  }
+  .text{
+    flex: 0 0 65%;
+  }
+  .image{
+    flex: 0 0 35%;
+  }
+}
+@media (min-width: 1200px) {
+  .card{
+    min-width: 1140px;
+  }
+  .text{
+    flex: 0 0 65%;
+  }
+  .image{
+      flex: 0 0 35%;
+  }
+
+}
+
+
+

From bdf1b6c9a37ac9de91b52d3a25557969364af246 Mon Sep 17 00:00:00 2001
From: yuqi88 <snow34545@gmail.com>
Date: Tue, 29 Mar 2022 05:41:31 -0700
Subject: [PATCH 3/3] run prettify

---
 src/__mocks__/index.ts                        |  2 +-
 src/__mocks__/pages/api/puzzles/index.ts      | 38 ++++++++++---------
 .../pages/api/admin/validate.test.ts          | 10 +++--
 .../pages/api/auth/reset-password.test.ts     | 15 ++++++--
 src/__tests__/pages/api/auth/signup.test.ts   |  7 ++--
 src/__tests__/pages/api/puzzles/id.test.ts    | 36 +++++++++---------
 .../pages/api/puzzles/instances/index.test.ts |  4 +-
 src/__tests__/pages/user/index.test.ts        |  7 ++--
 .../App/SignUpDialog/SignUpDialog.module.scss | 10 ++---
 src/components/App/SignUpDialog/index.tsx     | 29 ++++++++------
 src/pages/_app.tsx                            | 11 +++---
 src/pages/auth/signup/index.tsx               |  4 +-
 src/pages/puzzles/[instanceId]/index.tsx      | 28 +++++++-------
 src/styles/pages/PuzzlePage.module.scss       | 24 +++++-------
 14 files changed, 120 insertions(+), 105 deletions(-)

diff --git a/src/__mocks__/index.ts b/src/__mocks__/index.ts
index 901f3a0..9b6c4ce 100644
--- a/src/__mocks__/index.ts
+++ b/src/__mocks__/index.ts
@@ -1,3 +1,3 @@
-import { PrismaClient } from "@prisma/client";
+import { PrismaClient } from '@prisma/client';
 
 export const prisma = new PrismaClient();
diff --git a/src/__mocks__/pages/api/puzzles/index.ts b/src/__mocks__/pages/api/puzzles/index.ts
index 74ab120..2fffd09 100644
--- a/src/__mocks__/pages/api/puzzles/index.ts
+++ b/src/__mocks__/pages/api/puzzles/index.ts
@@ -13,32 +13,36 @@ import {
   mockQuestion
 } from './instances/create';
 
-export const mockPuzzleInstance = (puzzle?: Puzzle): Promise<PuzzleInstance> => {
+export const mockPuzzleInstance = (
+  puzzle?: Puzzle
+): Promise<PuzzleInstance> => {
   return prisma.puzzleInstance.create({
     data: {
       hint: mockHint(),
       longitude: mockLongtitude(),
       latitude: mockLatitude(),
       address: mockAdress(),
-      puzzle: puzzle ? {
-        connect: {
-          id: puzzle.id
-        }
-      } : {
-        create: {
-          name: mockName(),
-          difficulty: mockDifficulty(),
-          content: [mockContent(), mockContent(), mockContent()],
-          question: mockQuestion(),
-          variables: {},
-          isGenerated: mockBoolean(),
-          puzzleType: {
+      puzzle: puzzle
+        ? {
+            connect: {
+              id: puzzle.id
+            }
+          }
+        : {
             create: {
-              name: mockName()
+              name: mockName(),
+              difficulty: mockDifficulty(),
+              content: [mockContent(), mockContent(), mockContent()],
+              question: mockQuestion(),
+              variables: {},
+              isGenerated: mockBoolean(),
+              puzzleType: {
+                create: {
+                  name: mockName()
+                }
+              }
             }
           }
-        }
-      }
     }
   });
 };
diff --git a/src/__tests__/pages/api/admin/validate.test.ts b/src/__tests__/pages/api/admin/validate.test.ts
index 0f30f24..825fdba 100644
--- a/src/__tests__/pages/api/admin/validate.test.ts
+++ b/src/__tests__/pages/api/admin/validate.test.ts
@@ -50,10 +50,11 @@ describe('/api/admin/validate: Success', () => {
     await adminValidate(req, res);
 
     expect(status).toHaveBeenNthCalledWith(1, 200);
-    expect(json).toHaveBeenNthCalledWith(1, 
+    expect(json).toHaveBeenNthCalledWith(
+      1,
       expect.objectContaining({
         email: adminEmail,
-        password: expect.any(String),
+        password: expect.any(String)
       })
     );
   });
@@ -92,10 +93,11 @@ describe('/api/admin/validate: Success', () => {
     await adminValidate(req, res);
 
     expect(status).toHaveBeenNthCalledWith(1, 403);
-    expect(json).toHaveBeenNthCalledWith(1, 
+    expect(json).toHaveBeenNthCalledWith(
+      1,
       expect.objectContaining({
         email: userEmail,
-        password: expect.any(String),
+        password: expect.any(String)
       })
     );
   });
diff --git a/src/__tests__/pages/api/auth/reset-password.test.ts b/src/__tests__/pages/api/auth/reset-password.test.ts
index 5bd3f5b..1ddd7cd 100644
--- a/src/__tests__/pages/api/auth/reset-password.test.ts
+++ b/src/__tests__/pages/api/auth/reset-password.test.ts
@@ -159,7 +159,10 @@ describe('/api/auth/reset-password: Failed', () => {
 
     await resetPasswordHandler(req, res);
 
-    req = { ...req, body: { ...req.body, email: undefined } as resetPasswordProps } as NextApiRequest;
+    req = {
+      ...req,
+      body: { ...req.body, email: undefined } as resetPasswordProps
+    } as NextApiRequest;
 
     await resetPasswordHandler(req, res);
 
@@ -190,7 +193,10 @@ describe('/api/auth/reset-password: Failed', () => {
 
     await resetPasswordHandler(req, res);
 
-    req = { ...req, body: { ...req.body, oldPassword: undefined } as resetPasswordProps } as NextApiRequest;
+    req = {
+      ...req,
+      body: { ...req.body, oldPassword: undefined } as resetPasswordProps
+    } as NextApiRequest;
 
     await resetPasswordHandler(req, res);
 
@@ -221,7 +227,10 @@ describe('/api/auth/reset-password: Failed', () => {
 
     await resetPasswordHandler(req, res);
 
-    req = { ...req, body: { ...req.body, newPassword: undefined } as resetPasswordProps } as NextApiRequest;
+    req = {
+      ...req,
+      body: { ...req.body, newPassword: undefined } as resetPasswordProps
+    } as NextApiRequest;
 
     await resetPasswordHandler(req, res);
 
diff --git a/src/__tests__/pages/api/auth/signup.test.ts b/src/__tests__/pages/api/auth/signup.test.ts
index 70070bf..f947f58 100644
--- a/src/__tests__/pages/api/auth/signup.test.ts
+++ b/src/__tests__/pages/api/auth/signup.test.ts
@@ -35,10 +35,11 @@ describe('/api/auth/signup: Succeeded', () => {
     await signUpHandler(req, res);
 
     expect(status).toHaveBeenNthCalledWith(1, 201);
-    expect(json).toHaveBeenNthCalledWith(1,
+    expect(json).toHaveBeenNthCalledWith(
+      1,
       expect.objectContaining({
         email,
-        password: expect.any(String),
+        password: expect.any(String)
       })
     );
 
@@ -93,7 +94,7 @@ describe('/api/auth/signup: Succeeded', () => {
       expect(json).toHaveBeenCalledWith(
         expect.objectContaining({
           email: user.email,
-          password: expect.any(String),
+          password: expect.any(String)
         })
       );
     });
diff --git a/src/__tests__/pages/api/puzzles/id.test.ts b/src/__tests__/pages/api/puzzles/id.test.ts
index b3548bf..5fa6705 100644
--- a/src/__tests__/pages/api/puzzles/id.test.ts
+++ b/src/__tests__/pages/api/puzzles/id.test.ts
@@ -10,27 +10,27 @@ beforeEach(async () => {
 });
 
 describe('/api/puzzles/[id]: Succeeded', () => {
-   it('sucessfully retrieves puzzle', async () => {
-      const newPuzzle = await mockPuzzle();
-      const json = jest.fn();
-      const status = jest.fn(() => {
-         return { json };
-      });
-      const res = {
-         status
-      } as unknown as NextApiResponse;
+  it('sucessfully retrieves puzzle', async () => {
+    const newPuzzle = await mockPuzzle();
+    const json = jest.fn();
+    const status = jest.fn(() => {
+      return { json };
+    });
+    const res = {
+      status
+    } as unknown as NextApiResponse;
 
-      const req = {
-         query: {
-            id: newPuzzle.id,
-         }
-      } as unknown as NextApiRequest;
+    const req = {
+      query: {
+        id: newPuzzle.id
+      }
+    } as unknown as NextApiRequest;
 
-      await getPuzzleById(req, res);
+    await getPuzzleById(req, res);
 
-      expect(json).toHaveBeenNthCalledWith(1, newPuzzle);
-      expect(status).toHaveBeenNthCalledWith(1, 200);
-   });
+    expect(json).toHaveBeenNthCalledWith(1, newPuzzle);
+    expect(status).toHaveBeenNthCalledWith(1, 200);
+  });
 });
 
 // TODO: Create failed tests
diff --git a/src/__tests__/pages/api/puzzles/instances/index.test.ts b/src/__tests__/pages/api/puzzles/instances/index.test.ts
index b488fb9..f3e62c9 100644
--- a/src/__tests__/pages/api/puzzles/instances/index.test.ts
+++ b/src/__tests__/pages/api/puzzles/instances/index.test.ts
@@ -47,7 +47,9 @@ describe('/api/puzzles/instances', () => {
         ])
       });
     });
-    expect(json.mock.calls[0][0].puzzleInstances.length).toEqual(numPuzzleInstances);
+    expect(json.mock.calls[0][0].puzzleInstances.length).toEqual(
+      numPuzzleInstances
+    );
   });
 });
 
diff --git a/src/__tests__/pages/user/index.test.ts b/src/__tests__/pages/user/index.test.ts
index ca83acf..a2316a5 100644
--- a/src/__tests__/pages/user/index.test.ts
+++ b/src/__tests__/pages/user/index.test.ts
@@ -33,12 +33,13 @@ describe('/api/user: Succeeded', () => {
     const res = {
       status
     } as unknown as NextApiResponse;
-  
+
     await usersHandler(req, res);
-    expect(json).toHaveBeenNthCalledWith(1, 
+    expect(json).toHaveBeenNthCalledWith(
+      1,
       expect.objectContaining({
         email,
-        password: expect.any(String),
+        password: expect.any(String)
       })
     );
     expect(status).toHaveBeenNthCalledWith(1, 200);
diff --git a/src/components/App/SignUpDialog/SignUpDialog.module.scss b/src/components/App/SignUpDialog/SignUpDialog.module.scss
index e7e13b0..32a243d 100644
--- a/src/components/App/SignUpDialog/SignUpDialog.module.scss
+++ b/src/components/App/SignUpDialog/SignUpDialog.module.scss
@@ -5,22 +5,22 @@
   flex-direction: column;
 
   .dialogTitle {
-    font-size: .8rem;
-    margin-top: -.1rem;
+    font-size: 0.8rem;
+    margin-top: -0.1rem;
   }
 
   .dialogBtn {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
   }
 
   .dialogBtn > button {
     height: 1.8rem;
     width: 3rem;
-    font-size: .8rem;
-    border-radius: .5rem;
+    font-size: 0.8rem;
+    border-radius: 0.5rem;
     color: $white;
     gap: 1rem;
 
diff --git a/src/components/App/SignUpDialog/index.tsx b/src/components/App/SignUpDialog/index.tsx
index 169419c..bd4e54e 100644
--- a/src/components/App/SignUpDialog/index.tsx
+++ b/src/components/App/SignUpDialog/index.tsx
@@ -4,28 +4,33 @@ import styles from './SignUpDialog.module.scss';
 
 const SignUpDialog = ({ t }: { t: Toast }) => {
   return (
-    <span className={ styles.wrapper }>
+    <span className={styles.wrapper}>
       <b>This email has already been used.</b>
-      <p className={ styles.dialogTitle }>
+      <p className={styles.dialogTitle}>
         Would you like to make another account?
       </p>
-      <div className={ styles.dialogBtn }>
-        <button onClick={ () => { toast.dismiss(t.id) } } >
+      <div className={styles.dialogBtn}>
+        <button
+          onClick={() => {
+            toast.dismiss(t.id);
+          }}
+        >
           No
         </button>
-        <button onClick={ () => {
-          toast.dismiss(t.id);
-          toast('Please log out before you make an other account', {
-            icon: '⚠️',
-            duration: 2000
-          });
-        } }
+        <button
+          onClick={() => {
+            toast.dismiss(t.id);
+            toast('Please log out before you make an other account', {
+              icon: '⚠️',
+              duration: 2000
+            });
+          }}
         >
           Yes
         </button>
       </div>
     </span>
   );
-}
+};
 
 export default SignUpDialog;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e2b4c81..6ea12ec 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -9,7 +9,6 @@ const MyApp = ({
   Component,
   pageProps: { session, initStore, ...pageProps }
 }: AppProps) => {
-
   const TOAST_LIMIT = 1;
   const { toasts } = useToasterStore();
 
@@ -17,15 +16,15 @@ const MyApp = ({
   // Solution is proposed by @timolins from https://github.com/timolins/react-hot-toast/issues/31#issuecomment-803359550
   useEffect(() => {
     toasts
-      .filter((t) => t.visible)
+      .filter(t => t.visible)
       .filter((_, i) => i >= TOAST_LIMIT)
-      .forEach((t) => toast.dismiss(t.id));
+      .forEach(t => toast.dismiss(t.id));
   }, [toasts]);
 
   return (
-    <SessionProvider session={ session }>
-      <Toaster position='top-right' />
-      <Component { ...pageProps } />
+    <SessionProvider session={session}>
+      <Toaster position="top-right" />
+      <Component {...pageProps} />
     </SessionProvider>
   );
 };
diff --git a/src/pages/auth/signup/index.tsx b/src/pages/auth/signup/index.tsx
index 8ffab87..1a5a45b 100644
--- a/src/pages/auth/signup/index.tsx
+++ b/src/pages/auth/signup/index.tsx
@@ -27,9 +27,7 @@ const SignUpPage = () => {
       return false;
     }
     if (status === 'authenticated') {
-      toast(t => (
-        <SignUpDialog t={ t } />
-      ));
+      toast(t => <SignUpDialog t={t} />);
       return false;
     } else {
       signUp({ email, password });
diff --git a/src/pages/puzzles/[instanceId]/index.tsx b/src/pages/puzzles/[instanceId]/index.tsx
index 01da8ff..52317c9 100644
--- a/src/pages/puzzles/[instanceId]/index.tsx
+++ b/src/pages/puzzles/[instanceId]/index.tsx
@@ -171,21 +171,21 @@ const PuzzlePage = ({
           </div>
           <div>
             {isAuthenticated ? (
-                <Button
-                    style={'primary'}
-                    type={'submit'}
-                    content={'Submit'}
-                    onClick={() =>
-                        handleSubmit(answer, puzzleInstance, puzzle, randomSeed, user)
-                    }
-                />
+              <Button
+                style={'primary'}
+                type={'submit'}
+                content={'Submit'}
+                onClick={() =>
+                  handleSubmit(answer, puzzleInstance, puzzle, randomSeed, user)
+                }
+              />
             ) : (
-                <Button
-                    style={'primary'}
-                    content={'Login to Submit'}
-                    arrowDirection={'right'}
-                    onClick={() => signIn()}
-                />
+              <Button
+                style={'primary'}
+                content={'Login to Submit'}
+                arrowDirection={'right'}
+                onClick={() => signIn()}
+              />
             )}
           </div>
         </section>
diff --git a/src/styles/pages/PuzzlePage.module.scss b/src/styles/pages/PuzzlePage.module.scss
index 2c0d32c..5bf133d 100644
--- a/src/styles/pages/PuzzlePage.module.scss
+++ b/src/styles/pages/PuzzlePage.module.scss
@@ -92,50 +92,44 @@
   margin: 3rem 0;
 }
 
-
 /* MEDIA QUERIES*/
 @media (max-width: 600px) {
-  .card{
+  .card {
     max-width: 600px;
     flex-direction: column;
   }
 }
 @media (max-width: 768px) {
-  .card{
+  .card {
     max-width: 720px;
     flex-direction: column;
   }
 }
 @media (max-width: 992px) {
-  .card{
+  .card {
     max-width: 960px;
     flex-direction: column;
-
   }
 }
 @media (max-width: 1200px) {
   .card {
     max-width: 1140px;
   }
-  .text{
+  .text {
     flex: 0 0 65%;
   }
-  .image{
+  .image {
     flex: 0 0 35%;
   }
 }
 @media (min-width: 1200px) {
-  .card{
+  .card {
     min-width: 1140px;
   }
-  .text{
+  .text {
     flex: 0 0 65%;
   }
-  .image{
-      flex: 0 0 35%;
+  .image {
+    flex: 0 0 35%;
   }
-
 }
-
-
-