New Version

Food-Busters · Feb 12, 2022 · 80ee835 · 80ee835
1 parent 7d96053
commit 80ee835
Show file tree

Hide file tree

Showing 13 changed files with 1,310 additions and 1,126 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,35 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "indent": ["warn", 2],
+    "linebreak-style": ["warn", "unix"],
+    "quotes": ["warn", "double"],
+    "semi": ["warn", "always"],
+    "eol-last": "warn",
+    "react/react-in-jsx-scope": "off",
+    "react/no-unescaped-entities": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
+  }
+}
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/api/addquote.ts b/api/addquote.ts
@@ -3,13 +3,21 @@ import { VercelRequest, VercelResponse } from "@vercel/node";
 import { db } from "../lib/Firestore";
 import { collection, addDoc } from "firebase/firestore";
 import auth from "../lib/AdminAuth";
+import { AvailableImagesValue } from "../src/models/Quote";
 
 export default async (req: VercelRequest, res: VercelResponse) => {
-  const { quote, lang, count, password } = req.body;
+  const { quote, lang, image, count, password } = req.body;
 
   if (!auth(password as string, res)) return;
 
-  if (!(quote.length && count && (lang == "en" || lang == "th"))) {
+  if (
+    !(
+      quote.length &&
+      count &&
+      ["en", "th"].includes(lang) &&
+      AvailableImagesValue.includes(image)
+    )
+  ) {
     res.status(400).send("Bad Request");
     return;
   }
@@ -18,6 +26,7 @@ export default async (req: VercelRequest, res: VercelResponse) => {
     await addDoc(collection(db, "quotes"), {
       quote,
       lang,
+      image,
       count,
       created_at: Date().toString(),
     });

diff --git a/lib/getQuote.ts b/lib/getQuote.ts
@@ -14,6 +14,7 @@ export async function getQuote(
   return {
     quote: quote.quote.replace("__PARAM__", count.toString()),
     lang: quote.lang,
+    image: quote.image,
   };
 }
 
@@ -28,6 +29,7 @@ export async function getAllQuotes(): Promise<Quote[]> {
       lang: data.lang,
       quote: data.quote,
       count: data.count,
+      image: data.image,
       created_at: data.created_at,
     });
   });

diff --git a/package.json b/package.json
@@ -1,27 +1,25 @@
 {
   "name": "food-waste-quotes",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "private": true,
   "scripts": {
-    "dev": "yarn inc && yarn config-pkg && vite --port $PORT",
-    "build": "yarn config-pkg && vite build",
+    "dev": "yarn lm-config && vite --port $PORT",
+    "build": "yarn lm-config && vite build",
     "serve": "vite preview",
-    "inc": "node node_modules/leomotors-automation/incrementVersion.js",
-    "config-pkg": "node node_modules/leomotors-automation/configPackage.js"
+    "lint": "prettier --check \"src/**/*.{ts,tsx}\" && eslint src",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.6.2",
-    "axios": "^0.22.0",
-    "bootstrap": "^5.1.1",
-    "bootstrap-icons": "^1.5.0",
-    "firebase": "^9.1.1",
-    "leomotors-automation": "^1.0.1",
+    "@reduxjs/toolkit": "^1.7.2",
+    "axios": "^0.25.0",
+    "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.8.1",
+    "firebase": "^9.6.6",
+    "leomotors-automation": "^3.0.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.0.0-rc.0",
+    "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
-    "react-redux": "^7.2.5",
-    "react-router-dom": "^5.3.0",
-    "redux": "^4.1.1"
+    "react-router-dom": "^6.2.1"
   },
   "repository": {
     "type": "git",
@@ -33,17 +31,19 @@
   },
   "homepage": "https://github.com/Food-Busters/food-waste-quotes",
   "devDependencies": {
-    "@types/node": "^16.10.2",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router-dom": "^5.3.0",
-    "@types/uuid": "^8.3.1",
+    "@types/node": "^17.0.17",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
     "@vercel/node": "^1.12.1",
-    "@vitejs/plugin-react": "^1.0.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.26.1",
-    "sass": "^1.42.1",
-    "typescript": "^4.4.3",
-    "vite": "^2.6.3"
+    "@vitejs/plugin-react": "^1.2.0",
+    "eslint": "^8.9.0",
+    "eslint-plugin-react": "^7.28.0",
+    "sass": "^1.49.7",
+    "typescript": "^4.5.5",
+    "vite": "^2.8.1"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import "./App.scss";
 
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 
 import Home from "./views/Home";
 import Admin from "./views/Admin";
@@ -12,12 +12,22 @@ export default function App() {
     <Router>
       <div className="App">
         <div className="navbar bg-primary px-4">
-          <div className="brand" title={`Built at ${BuildTime}`}>
+          <div className="brand">
             <Link to="/" className="navbar-brand fs-2">
               Food Waste Quotes
             </Link>
-            <span className="text-white fs-5">{Version}</span>
+            <span className="text-white fs-5" title={`Built at ${BuildTime}`}>
+              {Version}
+            </span>
             <span className="preview fs-5">PREVIEW</span>
+            <a
+              className="gh text-white fs-4 text-decoration-none"
+              href="https://github.com/Food-Busters/food-waste-quotes"
+              target="_blank"
+              rel="noopener"
+            >
+              GitHub
+            </a>
           </div>
 
           <Link to="/admin" className="navbar-option fs-3">
@@ -26,10 +36,10 @@ export default function App() {
         </div>
 
         <div className="router-view col-12 col-lg-9 col-xl-6 mx-auto">
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route path="/admin" component={Admin} />
-          </Switch>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/admin" element={<Admin />} />
+          </Routes>
         </div>
       </div>
     </Router>

diff --git a/src/components/AdminModal.tsx b/src/components/AdminModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Modal } from "react-bootstrap";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router";
 
 import "./AdminModal.scss";
 
@@ -13,12 +13,12 @@ export default function AdminModal({
   submitPassword: (password: string) => () => void;
   errorMsg?: string;
 }) {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [password, setPassword] = useState("");
 
   function goHome() {
-    history.replace("/");
+    navigate("/");
   }
 
   return (

diff --git a/src/components/DeleteModal.tsx b/src/components/DeleteModal.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Modal } from "react-bootstrap";
 
 export default function DeleteModal({

diff --git a/src/components/FormModal.scss b/src/components/FormModal.scss
@@ -3,3 +3,7 @@
   padding: 0.3em 0.6em;
   border-radius: 0.3em;
 }
+
+label {
+  margin-top: 0.75em;
+}
diff --git a/src/components/FormModal.tsx b/src/components/FormModal.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Modal } from "react-bootstrap";
+import { AvailableImages, AvailableImagesValue } from "../models/Quote";
 
 import "./FormModal.scss";
 
@@ -10,10 +11,16 @@ export default function FormModal({
 }: {
   show: boolean;
   onHide: () => void;
-  onSubmit: (quote: string, lang: string, count: number) => Promise<void>;
+  onSubmit: (
+    quote: string,
+    lang: string,
+    image: AvailableImages,
+    count: number
+  ) => Promise<void>;
 }) {
   const [quote, setQuote] = useState("");
   const [lang, setLang] = useState("en");
+  const [image, setImage] = useState<AvailableImages>(AvailableImagesValue[0]);
   const [count, setCount] = useState(0);
 
   return (
@@ -31,7 +38,7 @@ export default function FormModal({
           __PARAM__ will be replaced by 'count' proportional to amount of food
           left
         </p>
-        <hr />
+        <hr className="mb-0" />
         <label className="form-label fw-bold">Quote</label>
         <textarea
           className="form-control"
@@ -45,6 +52,15 @@ export default function FormModal({
           <option value="en">English</option>
           <option value="th">Thai</option>
         </select>
+        <label className="form-label fw-bold">Image</label>
+        <select
+          className="form-select"
+          onChange={(e) => setImage(e.target.value as AvailableImages)}
+        >
+          {AvailableImagesValue.map((img) => (
+            <option value={img}>{img}</option>
+          ))}
+        </select>
         <label className="form-label fw-bold">Count</label>
         <input
           type="number"
@@ -59,7 +75,7 @@ export default function FormModal({
           className="btn btn-success"
           onClick={() => {
             onHide();
-            onSubmit(quote, lang, count);
+            onSubmit(quote.trim(), lang, image, count);
           }}
           disabled={!(quote.length && quote.includes("__PARAM__") && count)}
         >

diff --git a/src/models/Quote.ts b/src/models/Quote.ts
@@ -1,6 +1,11 @@
+export const AvailableImagesValue = ["somwua.png", "motorcycle.png"] as const;
+
+export type AvailableImages = typeof AvailableImagesValue[number];
+
 export interface miniQuote {
   quote: string;
   lang: string;
+  image: AvailableImages;
 }
 
 export interface Quote extends miniQuote {

diff --git a/src/views/Admin.tsx b/src/views/Admin.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import axios from "axios";
 
 import { getAllQuote } from "../utils/Quote";
-import { Quote } from "../models/Quote";
+import { AvailableImages, Quote } from "../models/Quote";
 
 import AdminModal from "../components/AdminModal";
 import FormModal from "../components/FormModal";
@@ -60,11 +60,17 @@ export default function Admin() {
     setAlertContent("");
   }
 
-  async function handleNewQuote(quote: string, lang: string, count: number) {
+  async function handleNewQuote(
+    quote: string,
+    lang: string,
+    image: AvailableImages,
+    count: number
+  ) {
     try {
       await axios.post("/api/addquote", {
         quote,
         lang,
+        image,
         count,
         password: localStorage.getItem("password"),
       });
@@ -119,6 +125,7 @@ export default function Admin() {
           <tr className="table-secondary">
             <th>Language</th>
             <th>Quotes</th>
+            <th>Image</th>
             <th>Count</th>
             <th>Actions</th>
           </tr>
@@ -128,6 +135,7 @@ export default function Admin() {
             <tr key={index}>
               <td>{quote.lang}</td>
               <td>{quote.quote}</td>
+              <td>{quote.image}</td>
               <td>{quote.count}</td>
               <td className="d-flex flex-row justify-content-around">
                 <button