View puzzle when click on button on admin

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
 

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

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",

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"

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[] }) => {

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 = () => {

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>

tsconfig.json

@@ -15,7 +15,7 @@
     "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,