Calendar frontend (#56)

* set up backend framework for calendar displaying

* basic skeleton done

* frontend almost complete, no backend though

Author: ryanshi42

database/setup.sql

@@ -13,6 +13,7 @@ CREATE TABLE Questions (
     cid FOREIGN KEY references Competitions(cid),
     numParts INTEGER NOT NULL,
     name TEXT NOT NULL,
+    pixelArtLine TEXT NOT NULL,
     dayNum INTEGER UNIQUE NOT NULL
 );
 

frontend/src/App.module.css

@@ -78,6 +78,11 @@ body {
   padding: 20px;
 }
 
+/* --------------------------------------------------------- CALENDAR PAGE STYLES ---------------------------------------------------------*/
+
+.puzzleBox {
+  padding: 20px;
+
 /* --------------------------------------------------------- LEADERBOARD PAGE STYLES ---------------------------------------------------*/
 
 .leaderboardPage {

frontend/src/components/PuzzleBox.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { useNavigate } from 'react-router-dom';
+import styles from '../nav.module.css';
+
+import {puzzle, part} from '../pages/Calendar';
+
+function PuzzleBox (puzzleInfo : puzzle) {
+  const navigate = useNavigate();
+  
+  let numStars : number = 0;
+  for (let p of puzzleInfo.partsInfo) {
+    numStars += p.solved ? 1 : 0;
+  }
+
+  return (
+    <>
+      <div className={styles.puzzleBox}>
+        <span>
+          {puzzleInfo.pixelArtLine}
+        </span>
+        <span>
+          {puzzleInfo.dayNum}
+        </span>
+        <span>
+          {numStars} {' Stars'}
+        </span>
+        
+
+      </div>
+    </>
+  );
+}
+
+PuzzleBox.propTypes = {
+  session: PropTypes.number,
+}
+
+export default PuzzleBox;

frontend/src/pages/Calendar.tsx

@@ -2,10 +2,62 @@ import React, { useEffect, useState } from "react";
 import { Button, Container } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
+import styles from "../App.module.css";
+
+import PuzzleBox from "../components/PuzzleBox";
+
 import { BACKEND_URI } from "src/config";
 
+export interface puzzle {
+  name : string;
+  dayNum : number;
+  pixelArtLine : string;
+  partsInfo : part[];
+}
+
+export interface part {
+  partNum: number,
+  description: string,
+  solved: boolean,
+  answer: string
+}
+
+// puzzle: {
+//   n_parts: integer,
+//   name: string,
+//   dayNum: integer,
+//   pixelArtLine: string
+// }
+
 const Calendar: React.FC<{}> = () => {
+  const defaultProblems : puzzle[] = [
+    {
+      name: 'Manav is a very cool ice cube',
+      dayNum : 1,
+      pixelArtLine : '...____..._____..._______...',
+      partsInfo : [],
+    },
+    {
+      name: 'Jason is a very cool ice cube',
+      dayNum : 2,
+      pixelArtLine : '...____..._____..._______...',
+      partsInfo : [],
+    },
+    {
+      name: 'Hanh is a very cool ice cube',
+      dayNum : 3,
+      pixelArtLine : '...____..._____..._______...',
+      partsInfo : [],
+    },
+    {
+      name: 'Hanyuan is a very cool ice cube',
+      dayNum : 4,
+      pixelArtLine : '...____..._____..._______...',
+      partsInfo : [],
+    }
+  ];
   const [times, setTimes] = useState(0);
+  const [showPuzzles, setShowPuzzles] = useState(defaultProblems);
 
   useEffect(() => {
     const verifyToken = async () => {
@@ -15,12 +67,47 @@ const Calendar: React.FC<{}> = () => {
     verifyToken();
   }, []);
 
+  useEffect(() => {
+    const getProblems = async () => {
+      const init = {
+        method: 'GET',
+        headers: {
+          'Content-type': 'application/json',
+          Authorization: 'insertTokenhere',
+        },
+        body: undefined
+      }
+      try {
+        // Note, probably need to get all questions and then delete this one manually
+        // i.e. get all questions via get and then do another post request to update
+        const response = await fetch(`${BACKEND_URI}/puzzle/all`, init);
+        const body = await response.json();
+        if (body.error) {
+          alert(body.error);
+        } else {
+          const puzzleList = body.puzzles;
+          setShowPuzzles(puzzleList);
+          // fetchDelete(quizId, questionsList, body, setAlteredQuestion);
+        }
+      } catch (e) {
+        alert(e);
+      }
+    }
+
+    getProblems();
+    
+  }, []);
+
   return (
     <>
-      <Container className="justify-content-center text-center">
-        <p>You have clicked this button {times} times.</p>
-        <Button onClick={() => setTimes(times + 1)}>Calendar Page</Button>
-      </Container>
+      <div className={styles.quizRightPanel}>
+        {showPuzzles.map((puzzle, i) =>
+        <div key={'puzzle_' + i} className={styles.puzzleBox}>
+          <h2>{'Question ' + (i + 1)}</h2>
+          <PuzzleBox name={puzzle.name} dayNum={puzzle.dayNum} pixelArtLine={puzzle.pixelArtLine} partsInfo={puzzle.partsInfo}/>
+          <br />
+        </div>)}
+      </div>
     </>
   )
 };