From d711c3f774bb8b271f4aece294ed18ae2b020db4 Mon Sep 17 00:00:00 2001
From: Kiet Phan <tuankietvn@outlook.com>
Date: Tue, 12 Apr 2022 18:40:57 +0700
Subject: [PATCH 1/2] Dockerization

---
 Dockerfile                      | 17 ++++++++++++++---
 docker-compose.yml              | 19 ++++++++++++++++---
 package.json                    |  5 ++++-
 src/pages/puzzles/map/index.tsx |  8 ++++----
 tsconfig.json                   |  2 +-
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index d1f6e11..c93a629 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,11 +1,22 @@
-FROM node:14
+FROM node:16
 
 WORKDIR .
 
-COPY package*.json .
-RUN npm i --production
+ARG DATABASE_URL
+ARG GOOGLE_CLIENT_ID
+ARG GOOGLE_CLIENT_SECRET
+ARG AUTH_SECRET
+ARG AUTH_URL
+ARG NEXT_PUBLIC_BASE_URL
+ARG NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN
+ARG SENDGRID_API_KEY
+ARG SENDGRID_SENDER
 
+COPY package*.json .
+RUN npm ci --production
+RUN npm i --save-dev typescript postcss ts-node
 COPY . .
+RUN npm run db:generate
 RUN npm run build
 EXPOSE 3000
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 8645ab1..0d28e35 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,8 +2,21 @@ version: "3.6"
 
 services:
   app:
-    build: .
-    env_file: .env
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        DATABASE_URL: ${DATABASE_URL}
+        GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
+        GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
+        AUTH_SECRET: ${AUTH_SECRET}
+        AUTH_URL: ${AUTH_URL}
+        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
+        NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN: ${NEXT_PUBLIC_MAPTILER_ACCESS_TOKEN}
+        SENDGRID_API_KEY: ${SENDGRID_API_KEY}
+        SENDGRID_SENDER: ${SENDGRID_SENDER}
+    env_file: .env.production
+    image: computational_puzzles
     ports:
       - "3000:3000"
     volumes:
@@ -17,7 +30,7 @@ services:
     image: postgres:9.6
     volumes:
       - db_data:/var/lib/postgresql/data
-    env_file: .env
+    env_file: .env.production
     environment:
       POSTGRES_USER: computational_puzzles
       POSTGRES_PASSWORD: computational_puzzles # This is used to create development database, please change when migrate to production
diff --git a/package.json b/package.json
index defb462..118f564 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,10 @@
     "lint": "next lint",
     "test": "jest --runInBand",
     "prettify": "npx prettier --write src/",
-    "db:push": "prisma db push"
+    "db:push": "prisma db push",
+    "db:generate": "prisma generate",
+    "migrate:prod": "prisma migrate deploy",
+    "db:seed": "ts-node prisma/seed/index.ts"
   },
   "dependencies": {
     "@maptiler/geocoder": "^1.1.0",
diff --git a/src/pages/puzzles/map/index.tsx b/src/pages/puzzles/map/index.tsx
index 66e868b..30fb7f3 100644
--- a/src/pages/puzzles/map/index.tsx
+++ b/src/pages/puzzles/map/index.tsx
@@ -73,7 +73,7 @@ const PuzzleMap = ({ puzzleInstances }: PuzzleMapProps) => {
         <Filter setFilterFields={setDifficultySelected} />
       </div>
       <div className={puzzleMapStyles.content}>
-        <MapRenderer
+        {puzzleInstances && <MapRenderer
           markers={puzzleInstances
             .filter(
               instance =>
@@ -88,13 +88,13 @@ const PuzzleMap = ({ puzzleInstances }: PuzzleMapProps) => {
           userMarker={userMarker}
           mapCenter={mapCenter}
           setMapCenter={setMapCenter}
-        />
+        />}
         <div className={puzzleMapStyles.cardGridContainer}>
           <span className={puzzleMapStyles.title}>
             Nearest Puzzles From Map Center:
           </span>
           <div className={puzzleMapStyles.cardGrid}>
-            <CardGrid
+            {puzzleInstances && <CardGrid
               cardList={puzzleInstances
                 .filter(
                   instance =>
@@ -121,7 +121,7 @@ const PuzzleMap = ({ puzzleInstances }: PuzzleMapProps) => {
                     ]
                   };
                 })}
-            />
+            />}
           </div>
         </div>
       </div>
diff --git a/tsconfig.json b/tsconfig.json
index 718b7ef..a2050e9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,

From 305437f5d49daf9395796d4b8ed7cd98993371b8 Mon Sep 17 00:00:00 2001
From: Kiet Phan <tuankietvn@outlook.com>
Date: Mon, 18 Apr 2022 23:11:21 +0700
Subject: [PATCH 2/2] Integrate new header to profile and admin

---
 .../App/DisplayPuzzleInstances/index.tsx       | 18 +++++++++++++++++-
 src/pages/admin/index.tsx                      |  2 +-
 src/pages/auth/profile/index.tsx               |  3 ++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/App/DisplayPuzzleInstances/index.tsx b/src/components/App/DisplayPuzzleInstances/index.tsx
index bbae03d..d53c78e 100644
--- a/src/components/App/DisplayPuzzleInstances/index.tsx
+++ b/src/components/App/DisplayPuzzleInstances/index.tsx
@@ -8,6 +8,7 @@ import { Button } from '../../Global';
 import { QRGenerator } from '../../App';
 import toast from 'react-hot-toast';
 import { getLinkToPuzzleInstance } from '../../../utils/getLinkToPuzzleInstance';
+import Router from 'next/router';
 
 type DisplayPuzzleInstancesProps = {
   puzzlesList: PuzzleCustom[];
@@ -26,6 +27,11 @@ const DisplayPuzzleInstances = ({
     setAllPuzzleInstances(await getAllPuzzleInstances());
   };
 
+  const handleRedirectToPuzzlePage = (puzzleInstanceId) => {
+    const linkToPuzzlePage = getLinkToPuzzleInstance(puzzleInstanceId);
+    Router.push(linkToPuzzlePage);
+  }
+
   useEffect(() => {
     getPuzzleInstances();
   }, [puzzlesList]);
@@ -99,7 +105,7 @@ const DisplayPuzzleInstances = ({
                     />
                   </div>
                   <div className={styles.puzzleInstancesBodyContentActions}>
-                    <Button
+                    {/* <Button
                       style="secondary"
                       content="View on map"
                       size="sm"
@@ -109,6 +115,16 @@ const DisplayPuzzleInstances = ({
                         // TODO: View on map service
                         toast('Coming soon ✨');
                       }}
+                    /> */}
+                    <Button
+                      style="secondary"
+                      content="View Puzzle"
+                      size="sm"
+                      type="button"
+                      arrowDirection="right"
+                      onClick={() => {
+                        handleRedirectToPuzzlePage(puzzleInstance.id);
+                      }}
                     />
                     <Button
                       style="primary"
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 7a72b08..f2c1d26 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../components/App';
 import { getAllPuzzles, isAdmin } from '../../services';
 import { GetServerSideProps } from 'next';
-import { Header } from '../../components/Global';
+import { Header } from '../../components/Product';
 import type { PuzzleCustom } from '../../types/api/puzzles/puzzle';
 
 const Admin = ({ puzzlesList }: { puzzlesList: PuzzleCustom[] }) => {
diff --git a/src/pages/auth/profile/index.tsx b/src/pages/auth/profile/index.tsx
index 7929763..14ab63e 100644
--- a/src/pages/auth/profile/index.tsx
+++ b/src/pages/auth/profile/index.tsx
@@ -9,7 +9,8 @@ import {
   getUserByEmail,
   updateUsername
 } from '../../../services';
-import { Header, Input, Button } from '../../../components/Global';
+import { Input, Button } from '../../../components/Global';
+import { Header } from '../../../components/Product';
 import styles from '../../../styles/pages/profile.module.scss';
 
 const ProfilePage = () => {