From 9ffa540da4a47b573cdc6e6613849bc603524fd0 Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Tue, 9 Aug 2022 20:29:10 +0000
Subject: [PATCH 01/10] design: chapterspage layout

---
 .../modules/chapters/pages/chaptersPage.tsx   | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/client/src/modules/chapters/pages/chaptersPage.tsx b/client/src/modules/chapters/pages/chaptersPage.tsx
index 67eab1c37a..04d665e052 100644
--- a/client/src/modules/chapters/pages/chaptersPage.tsx
+++ b/client/src/modules/chapters/pages/chaptersPage.tsx
@@ -1,4 +1,4 @@
-import { Heading, VStack, Stack } from '@chakra-ui/layout';
+import { Heading, VStack, Stack, Flex, Text } from '@chakra-ui/layout';
 import { NextPage } from 'next';
 import React from 'react';
 
@@ -23,13 +23,23 @@ export const ChaptersPage: NextPage = () => {
 
   return (
     <VStack>
-      <Stack w={['90%', '90%', '60%']} maxW="600px" spacing={3} mt={10} mb={5}>
-        <Heading>Chapters: </Heading>
-        {data.chapters.map((chapter) => (
-          <Heading size="md" key={chapter.id}>
-            <ChapterCard key={chapter.id} chapter={chapter} />
-          </Heading>
-        ))}
+      <Stack spacing={3} mt={10} mb={5}>
+        <Flex justify="start">
+          <Heading>Chapters: </Heading>
+        </Flex>
+        <Flex direction="column">
+          <Text fontSize="2xl">
+            {' '}
+            Chapters allow you to organize events based on your preferences.
+          </Text>
+          <Flex wrap="wrap" justify="space-evenly">
+            {data.chapters.map((chapter) => (
+              <Heading size="md" key={chapter.id} mt={10} mr={10}>
+                <ChapterCard key={chapter.id} chapter={chapter} />
+              </Heading>
+            ))}
+          </Flex>
+        </Flex>
       </Stack>
     </VStack>
   );

From 14a5ecc8a3a090a66d56f7d99ea0dc5fdbe67c68 Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Tue, 16 Aug 2022 20:37:50 +0000
Subject: [PATCH 02/10] fix: chapter layout 1244

---
 .../modules/chapters/pages/chaptersPage.tsx   | 62 ++++++++++++++++---
 1 file changed, 53 insertions(+), 9 deletions(-)

diff --git a/client/src/modules/chapters/pages/chaptersPage.tsx b/client/src/modules/chapters/pages/chaptersPage.tsx
index 04d665e052..60984e196d 100644
--- a/client/src/modules/chapters/pages/chaptersPage.tsx
+++ b/client/src/modules/chapters/pages/chaptersPage.tsx
@@ -1,8 +1,16 @@
 import { Heading, VStack, Stack, Flex, Text } from '@chakra-ui/layout';
 import { NextPage } from 'next';
 import React from 'react';
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+} from '@chakra-ui/react';
 
-import { ChapterCard } from 'components/ChapterCard';
 import { useChaptersQuery } from 'generated/graphql';
 
 export const ChaptersPage: NextPage = () => {
@@ -20,10 +28,9 @@ export const ChaptersPage: NextPage = () => {
       </div>
     );
   }
-
   return (
     <VStack>
-      <Stack spacing={3} mt={10} mb={5}>
+      <Stack w="40%" mt={10} mb={5}>
         <Flex justify="start">
           <Heading>Chapters: </Heading>
         </Flex>
@@ -32,12 +39,49 @@ export const ChaptersPage: NextPage = () => {
             {' '}
             Chapters allow you to organize events based on your preferences.
           </Text>
-          <Flex wrap="wrap" justify="space-evenly">
-            {data.chapters.map((chapter) => (
-              <Heading size="md" key={chapter.id} mt={10} mr={10}>
-                <ChapterCard key={chapter.id} chapter={chapter} />
-              </Heading>
-            ))}
+          <Flex justify="space-between" mt="5%">
+            <Flex direction="column" align="start">
+              <TableContainer>
+                <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
+                  <Thead>
+                    <Tr bg="blue.200">
+                      <Th borderWidth={2}>Chapter</Th>
+                      <Th borderWidth={2}>Description</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {data.chapters.map((chapter) => (
+                      <Tr key={chapter.id}>
+                        <Td borderWidth={2}>{chapter.name}</Td>
+                        <Td borderWidth={2}>{chapter.description}</Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              </TableContainer>
+            </Flex>
+
+            <Flex direction="column" align="start">
+              <TableContainer>
+                <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
+                  <Thead>
+                    <Tr bg="blue.200">
+                      <Th borderWidth={2}>Chapter</Th>
+                      <Th borderWidth={2}>Description</Th>
+                    </Tr>
+                  </Thead>
+
+                  <Tbody>
+                    {data.chapters.map((chapter) => (
+                      <Tr key={chapter.id}>
+                        <Td borderWidth={2}>{chapter.name}</Td>
+                        <Td borderWidth={2}>{chapter.description}</Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              </TableContainer>
+            </Flex>
           </Flex>
         </Flex>
       </Stack>

From be85afca3c244ad1734c58bf93c36248919f9258 Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Wed, 17 Aug 2022 18:31:28 +0000
Subject: [PATCH 03/10] fix: chapter layout(change from flex to grid

---
 client/.env.development.local                     |  1 +
 client/.env.local                                 |  8 ++++++++
 .../src/modules/chapters/pages/chaptersPage.tsx   | 15 ++++++++-------
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 client/.env.development.local
 create mode 100644 client/.env.local

diff --git a/client/.env.development.local b/client/.env.development.local
new file mode 100644
index 0000000000..d367b438c5
--- /dev/null
+++ b/client/.env.development.local
@@ -0,0 +1 @@
+NEXT_PUBLIC_SERVER_URL=https://5000-hisnameispum-chapter-r4fb8q8psgg.ws-us61.gitpod.io
diff --git a/client/.env.local b/client/.env.local
new file mode 100644
index 0000000000..fa993ecb88
--- /dev/null
+++ b/client/.env.local
@@ -0,0 +1,8 @@
+# CODESEE=true
+NEXT_PUBLIC_USE_AUTH0=false
+NEXT_PUBLIC_AUTH0_DOMAIN=YOUR-AUTH0-DOMAIN
+NEXT_PUBLIC_AUTH0_CLIENT_ID=YOUR-AUTH0-APP-CLIENT-ID
+NEXT_PUBLIC_AUTH0_AUDIENCE=YOUR-AUTH0-APP-AUDIENCE
+NEXT_PUBLIC_SERVER_URL=http://localhost:5000
+NEXT_PUBLIC_CLIENT_URL=http://localhost:3000
+NEXT_PUBLIC_ENVIRONMENT=development
\ No newline at end of file
diff --git a/client/src/modules/chapters/pages/chaptersPage.tsx b/client/src/modules/chapters/pages/chaptersPage.tsx
index 60984e196d..9aaa5d6e81 100644
--- a/client/src/modules/chapters/pages/chaptersPage.tsx
+++ b/client/src/modules/chapters/pages/chaptersPage.tsx
@@ -9,6 +9,8 @@ import {
   Th,
   Td,
   TableContainer,
+  Grid,
+  GridItem,
 } from '@chakra-ui/react';
 
 import { useChaptersQuery } from 'generated/graphql';
@@ -39,8 +41,8 @@ export const ChaptersPage: NextPage = () => {
             {' '}
             Chapters allow you to organize events based on your preferences.
           </Text>
-          <Flex justify="space-between" mt="5%">
-            <Flex direction="column" align="start">
+          <Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
+            <GridItem>
               <TableContainer>
                 <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
                   <Thead>
@@ -59,9 +61,9 @@ export const ChaptersPage: NextPage = () => {
                   </Tbody>
                 </Table>
               </TableContainer>
-            </Flex>
+            </GridItem>
 
-            <Flex direction="column" align="start">
+            <GridItem>
               <TableContainer>
                 <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
                   <Thead>
@@ -70,7 +72,6 @@ export const ChaptersPage: NextPage = () => {
                       <Th borderWidth={2}>Description</Th>
                     </Tr>
                   </Thead>
-
                   <Tbody>
                     {data.chapters.map((chapter) => (
                       <Tr key={chapter.id}>
@@ -81,8 +82,8 @@ export const ChaptersPage: NextPage = () => {
                   </Tbody>
                 </Table>
               </TableContainer>
-            </Flex>
-          </Flex>
+            </GridItem>
+          </Grid>
         </Flex>
       </Stack>
     </VStack>

From 663227e4016aed4812c8203c8f742153077c65ec Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Fri, 19 Aug 2022 10:28:44 -0700
Subject: [PATCH 04/10] Delete .env.development.local

---
 client/.env.development.local | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 client/.env.development.local

diff --git a/client/.env.development.local b/client/.env.development.local
deleted file mode 100644
index d367b438c5..0000000000
--- a/client/.env.development.local
+++ /dev/null
@@ -1 +0,0 @@
-NEXT_PUBLIC_SERVER_URL=https://5000-hisnameispum-chapter-r4fb8q8psgg.ws-us61.gitpod.io

From 52a2c188fe5fc1cc566e1097b3039fb4ab755b01 Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Fri, 19 Aug 2022 10:28:53 -0700
Subject: [PATCH 05/10] Delete .env.local

---
 client/.env.local | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 client/.env.local

diff --git a/client/.env.local b/client/.env.local
deleted file mode 100644
index fa993ecb88..0000000000
--- a/client/.env.local
+++ /dev/null
@@ -1,8 +0,0 @@
-# CODESEE=true
-NEXT_PUBLIC_USE_AUTH0=false
-NEXT_PUBLIC_AUTH0_DOMAIN=YOUR-AUTH0-DOMAIN
-NEXT_PUBLIC_AUTH0_CLIENT_ID=YOUR-AUTH0-APP-CLIENT-ID
-NEXT_PUBLIC_AUTH0_AUDIENCE=YOUR-AUTH0-APP-AUDIENCE
-NEXT_PUBLIC_SERVER_URL=http://localhost:5000
-NEXT_PUBLIC_CLIENT_URL=http://localhost:3000
-NEXT_PUBLIC_ENVIRONMENT=development
\ No newline at end of file

From 7369599d6bc2a01b069be295d19c3f8dbe534e4c Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Fri, 19 Aug 2022 10:29:00 -0700
Subject: [PATCH 06/10] Update
 client/src/modules/chapters/pages/chaptersPage.tsx

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
---
 client/src/modules/chapters/pages/chaptersPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/modules/chapters/pages/chaptersPage.tsx b/client/src/modules/chapters/pages/chaptersPage.tsx
index 9aaa5d6e81..b59fb2d166 100644
--- a/client/src/modules/chapters/pages/chaptersPage.tsx
+++ b/client/src/modules/chapters/pages/chaptersPage.tsx
@@ -1,4 +1,4 @@
-import { Heading, VStack, Stack, Flex, Text } from '@chakra-ui/layout';
+import { Heading, VStack, Stack } from '@chakra-ui/layout';
 import { NextPage } from 'next';
 import React from 'react';
 import {

From 8ef84b2a315f4e3e4fbe8744c90d340021bfd524 Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Fri, 19 Aug 2022 10:29:23 -0700
Subject: [PATCH 07/10] Update
 client/src/modules/chapters/pages/chaptersPage.tsx

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
---
 .../modules/chapters/pages/chaptersPage.tsx   | 55 +++----------------
 1 file changed, 7 insertions(+), 48 deletions(-)

diff --git a/client/src/modules/chapters/pages/chaptersPage.tsx b/client/src/modules/chapters/pages/chaptersPage.tsx
index b59fb2d166..1cb9346758 100644
--- a/client/src/modules/chapters/pages/chaptersPage.tsx
+++ b/client/src/modules/chapters/pages/chaptersPage.tsx
@@ -32,59 +32,18 @@ export const ChaptersPage: NextPage = () => {
   }
   return (
     <VStack>
-      <Stack w="40%" mt={10} mb={5}>
-        <Flex justify="start">
+      <Stack w={['90%', '90%', '60%']} maxW="600px" spacing={3} mt={10} mb={5}>
           <Heading>Chapters: </Heading>
-        </Flex>
-        <Flex direction="column">
-          <Text fontSize="2xl">
-            {' '}
-            Chapters allow you to organize events based on your preferences.
-          </Text>
           <Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
+          {data.chapters.map((chapter) => (
             <GridItem>
-              <TableContainer>
-                <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
-                  <Thead>
-                    <Tr bg="blue.200">
-                      <Th borderWidth={2}>Chapter</Th>
-                      <Th borderWidth={2}>Description</Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {data.chapters.map((chapter) => (
-                      <Tr key={chapter.id}>
-                        <Td borderWidth={2}>{chapter.name}</Td>
-                        <Td borderWidth={2}>{chapter.description}</Td>
-                      </Tr>
-                    ))}
-                  </Tbody>
-                </Table>
-              </TableContainer>
-            </GridItem>
-
-            <GridItem>
-              <TableContainer>
-                <Table colorScheme="facebook" borderRadius="md" borderWidth={2}>
-                  <Thead>
-                    <Tr bg="blue.200">
-                      <Th borderWidth={2}>Chapter</Th>
-                      <Th borderWidth={2}>Description</Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {data.chapters.map((chapter) => (
-                      <Tr key={chapter.id}>
-                        <Td borderWidth={2}>{chapter.name}</Td>
-                        <Td borderWidth={2}>{chapter.description}</Td>
-                      </Tr>
-                    ))}
-                  </Tbody>
-                </Table>
-              </TableContainer>
+            <Heading size="md" key={chapter.id}>
+              <ChapterCard key={chapter.id} chapter={chapter} />
+            </Heading>
             </GridItem>
+          ))}   
           </Grid>
-        </Flex>
+      </Stack>
       </Stack>
     </VStack>
   );

From da2ec8094a3508f76b0861f534a9f38935dc4f0b Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Fri, 19 Aug 2022 10:29:33 -0700
Subject: [PATCH 08/10] Update
 client/src/modules/chapters/pages/chaptersPage.tsx

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
---
 client/src/modules/chapters/pages/chaptersPage.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/client/src/modules/chapters/pages/chaptersPage.tsx b/client/src/modules/chapters/pages/chaptersPage.tsx
index 1cb9346758..2467cdcbc1 100644
--- a/client/src/modules/chapters/pages/chaptersPage.tsx
+++ b/client/src/modules/chapters/pages/chaptersPage.tsx
@@ -1,17 +1,7 @@
 import { Heading, VStack, Stack } from '@chakra-ui/layout';
 import { NextPage } from 'next';
 import React from 'react';
-import {
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  TableContainer,
-  Grid,
-  GridItem,
-} from '@chakra-ui/react';
+import { Grid, GridItem } from '@chakra-ui/react';
 
 import { useChaptersQuery } from 'generated/graphql';
 

From 823bc234001f274ed2926d515d32ff28e77f0782 Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Sat, 20 Aug 2022 16:18:02 -0700
Subject: [PATCH 09/10] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 00d4d9b693..f2e36810f8 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ We are using the following tools:
   - [Chakra UI](https://chakra-ui.com/) - simple, modular & accessible UI components for React
   - Functional Components with [Hooks](https://reactjs.org/docs/hooks-intro.html)
 - [Jest](https://jestjs.io/) - for writing unit tests.
-- [Cypress](https://www.cypress.io/) - to check if specific actions are possible to preform in certain scenarios.
+- [Cypress](https://www.cypress.io/) - to check if specific actions are possible to perform in certain scenarios.
 
 For more information and a guide to working on features, go to the [contributing docs](/CONTRIBUTING.md#adding-a-new-feature).
 

From b8eeeb1f6cfc3aecb591af4c97595154693a5ca1 Mon Sep 17 00:00:00 2001
From: Sirasit Thitirattanakorn <sirasit@siruxsolutions.com>
Date: Mon, 22 Aug 2022 19:43:12 +0000
Subject: [PATCH 10/10] fix: chapter layout eslint issue

---
 .../modules/chapters/pages/chaptersPage.tsx   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/src/modules/chapters/pages/chaptersPage.tsx b/client/src/modules/chapters/pages/chaptersPage.tsx
index 2467cdcbc1..18b4cd3351 100644
--- a/client/src/modules/chapters/pages/chaptersPage.tsx
+++ b/client/src/modules/chapters/pages/chaptersPage.tsx
@@ -2,7 +2,7 @@ import { Heading, VStack, Stack } from '@chakra-ui/layout';
 import { NextPage } from 'next';
 import React from 'react';
 import { Grid, GridItem } from '@chakra-ui/react';
-
+import { ChapterCard } from 'components/ChapterCard';
 import { useChaptersQuery } from 'generated/graphql';
 
 export const ChaptersPage: NextPage = () => {
@@ -23,17 +23,16 @@ export const ChaptersPage: NextPage = () => {
   return (
     <VStack>
       <Stack w={['90%', '90%', '60%']} maxW="600px" spacing={3} mt={10} mb={5}>
-          <Heading>Chapters: </Heading>
-          <Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
+        <Heading>Chapters: </Heading>
+        <Grid mt="5%" templateColumns="repeat(2, 1fr)" columnGap="5%">
           {data.chapters.map((chapter) => (
-            <GridItem>
-            <Heading size="md" key={chapter.id}>
-              <ChapterCard key={chapter.id} chapter={chapter} />
-            </Heading>
+            <GridItem key={chapter.id}>
+              <Heading size="md">
+                <ChapterCard chapter={chapter} />
+              </Heading>
             </GridItem>
-          ))}   
-          </Grid>
-      </Stack>
+          ))}
+        </Grid>
       </Stack>
     </VStack>
   );