Update: Next.js migration (#21)

* Next.js migration * Update staging deployment workflow * Updated package.json scripts and letter casing in charSet * Update staging-cd.yml * Update staging-cd.yml * Update staging-cd.yml * Update staging-cd.yml
villanovachile · Apr 5, 2023 · 70aeb91 · 70aeb91
1 parent e482a04
commit 70aeb91
Show file tree

Hide file tree

Showing 46 changed files with 2,936 additions and 29,326 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,24 +1,11 @@
 {
-  "parserOptions": {
-    "ecmaVersion": 2021,
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "sourceType": "module"
-  },
-
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
+  "extends": "next/core-web-vitals",
 
   "plugins": ["react", "react-hooks"],
 
   "rules": {
     "react/no-did-update-set-state": "error",
     "react/no-unknown-property": "error",
-    "react/react-in-jsx-scope": "error",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "off"
   }

diff --git a/.gitignore b/.gitignore
@@ -8,20 +8,26 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.env
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
 
-# Local Netlify folder
-.netlify
+# vercel
+.vercel
diff --git a/src/components/Header.js → components/Header.js b/src/components/Header.js → components/Header.js
diff --git a/src/components/TruthTally/AddItemForm.js → components/TruthTally/AddItemForm.js b/src/components/TruthTally/AddItemForm.js → components/TruthTally/AddItemForm.js
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { Store } from 'react-notifications-component';
+import styles from '@/styles/TruthTally.module.css';
 
 const AddItemForm = (props) => {
   const { setInputIdEdited, setEditingTitle, handleAddItem, items } = props;
@@ -59,7 +60,7 @@ const AddItemForm = (props) => {
   };
 
   return (
-    <div className="add-item-form">
+    <div className={styles['add-item-form']}>
       <form onSubmit={(e) => handleSubmit(e)}>
         <input
           type="text"

diff --git a/src/components/TruthTally/Controls.js → components/TruthTally/Controls.js b/src/components/TruthTally/Controls.js → components/TruthTally/Controls.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useRouter } from 'next/router';
+import styles from '@/styles/TruthTally.module.css';
 
 const Controls = (props) => {
   const {
@@ -31,11 +32,12 @@ const Controls = (props) => {
     setListAuthor,
     updateDraggableListItems,
     draggableListItems,
-    setIsRankingSharedList
+    setIsRankingSharedList,
+    uri
   } = props;
 
-  let navigate = useNavigate();
-  let { uri } = useParams();
+  let router = useRouter();
+  // let { uri } = useParams();
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const [showContent, setShowContent] = useState(true);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -78,15 +80,15 @@ const Controls = (props) => {
 
   const genList = () => {
     setItems(items.map((item, index) => ({ ...item, id: index + 1, score: 0 })));
+    updateDraggableListItems(items.map((item, index) => ({ ...item, id: index + 1 })));
     const generatePairs = (arr) => {
       const result = [];
       for (let i = 0; i < arr.length; i++) {
         for (let j = i + 1; j < arr.length; j++) {
           result.push([arr[i], arr[j]]);
         }
       }
-      updateDraggableListItems(items);
-      updateDraggableListItems(draggableListItems.map((item, index) => ({ ...item, id: index + 1 })));
+
       setListState('display');
       setLoadingText('Generating pairs...');
       setRankingCompleted(false);
@@ -99,7 +101,7 @@ const Controls = (props) => {
       return result;
     };
     setListAuthor();
-    updatePairsList(generatePairs(items));
+    updatePairsList(generatePairs(items.map((item, index) => ({ ...item, id: index + 1 }))));
   };
 
   const clearList = () => {
@@ -132,6 +134,14 @@ const Controls = (props) => {
     currentIndex.current = 0;
   };
 
+  const newList = () => {
+    isSourceListNew && setListState('edit');
+    clearList();
+    nextItemId.current = 0;
+    currentIndex.current = 0;
+    router.push('/');
+  };
+
   const shareList = () => {
     setShowShareModal(true);
   };
@@ -186,12 +196,12 @@ const Controls = (props) => {
   };
 
   const viewSourceList = () => {
-    navigate('/list/' + sourceListURI);
+    router.push('/list/' + sourceListURI);
   };
 
   return (
-    <div className="controls">
-      <div className={`controls-buttons${isCollapsed ? ' collapsed' : ''}`} style={contentStyle}>
+    <div className={styles.controls}>
+      <div className={`${styles['controls-buttons']} ${isCollapsed ? styles.collapsed : ''}`} style={contentStyle}>
         {isListEditMode && uri !== undefined && (
           <>
             <button
@@ -253,19 +263,19 @@ const Controls = (props) => {
         ) : null}
 
         {(finishedGameState || uri !== undefined) && !isPreload && !showLoadingScreen && !inProgressGameState && (
-          <button onClick={() => navigate('/')}>Create New List</button>
+          <button onClick={() => newList()}>Create New List</button>
         )}
       </div>
 
       {!showLoadingScreen && (
-        <div className="collapse-div">
+        <div className={styles['collapse-div']}>
           {!isCollapsed ? (
             <svg
               viewBox="0 0 1000 1000"
               xmlns="http://www.w3.org/2000/svg"
               width="20px"
               height="20px"
-              className="collapse-button"
+              className={styles['collapse-button']}
               onClick={toggleCollapse}>
               <g fill="#FFFFFF" transform="matrix(-1, 0, 0, -1, 1000, 1000)">
                 <path
@@ -284,7 +294,7 @@ const Controls = (props) => {
               viewBox="0 0 1000 1000"
               width="20px"
               height="20px"
-              className="collapse-button"
+              className={styles['collapse-button']}
               onClick={toggleCollapse}>
               <g fill="#FFFFFF">
                 <path

diff --git a/src/components/TruthTally/EditList.js → components/TruthTally/EditList.js b/src/components/TruthTally/EditList.js → components/TruthTally/EditList.js
@@ -1,7 +1,11 @@
 import React, { useEffect } from 'react';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import dynamic from 'next/dynamic';
+import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 import Item from './Item';
 import AddItemForm from './AddItemForm';
+import styles from '@/styles/TruthTally.module.css';
+
+const Droppable = dynamic(() => import('react-beautiful-dnd').then((module) => module.Droppable), { ssr: false });
 
 const EditList = (props) => {
   const {
@@ -31,12 +35,12 @@ const EditList = (props) => {
   }, [draggableListItems]);
 
   return (
-    <div className="items-list">
+    <div className={styles['items-list']}>
       <AddItemForm {...props} />
       <DragDropContext onDragEnd={handleOnDragEnd}>
         <Droppable droppableId="edit-items">
           {(provided) => (
-            <div className="edit-items-list" {...provided.droppableProps} ref={provided.innerRef}>
+            <div className={styles['edit-items-list']} {...provided.droppableProps} ref={provided.innerRef}>
               {draggableListItems.map((item, index) => (
                 <Draggable key={item.id.toString()} draggableId={item.id.toString()} index={index}>
                   {(provided) => (

diff --git a/src/components/TruthTally/Item.js → components/TruthTally/Item.js b/src/components/TruthTally/Item.js → components/TruthTally/Item.js
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Store } from 'react-notifications-component';
+import styles from '@/styles/TruthTally.module.css';
 
 const Item = (props) => {
   const {
@@ -88,7 +89,7 @@ const Item = (props) => {
       }
     });
 
-    if (!dupe && input) {
+    if ((!dupe && input) || input === item.toLowerCase().replace(/\s+/g, '')) {
       items.forEach((item, i) => {
         if (item.id === id) {
           const newItem = {
@@ -125,11 +126,11 @@ const Item = (props) => {
 
   return (
     <div
-      className={listState === 'display' ? 'list-item' : 'edit-list-item'}
+      className={listState === 'display' ? styles['list-item'] : styles['edit-list-item']}
       {...provided.draggableProps}
       {...provided.dragHandleProps}
       ref={provided.innerRef}>
-      <div className="remove-item">
+      <div className={styles['remove-item']}>
         {listState === 'edit' && (
           <svg
             id="Layer_1"
@@ -139,7 +140,7 @@ const Item = (props) => {
             fill="red"
             width={10}
             height={10}
-            className="svg-button"
+            className={styles['svg-button']}
             onClick={() => handleRemoveItem(id)}>
             <title>Remove item</title>
             <path
@@ -151,7 +152,7 @@ const Item = (props) => {
           </svg>
         )}
       </div>
-      <div className="item-name">
+      <div className={styles['item-name']}>
         {listState === 'edit' && isEditingItem ? (
           <form
             onSubmit={(e) => {
@@ -163,7 +164,7 @@ const Item = (props) => {
                 toggleEditingItem();
               }}
               style={{ width: itemInput.length + 3 + 'ch', itemMaxWidth }}
-              className="edit-item-input"
+              className={styles['edit-item-input']}
               type="text"
               maxLength="100"
               value={itemInput}

diff --git a/src/components/TruthTally/ItemsList.js → components/TruthTally/ItemsList.js b/src/components/TruthTally/ItemsList.js → components/TruthTally/ItemsList.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import Item from './Item';
+import styles from '@/styles/TruthTally.module.css';
 
 const ItemsList = (props) => {
   const { listState, items, handleRemoveItem } = props;
 
   return (
-    <div className="items-list">
+    <div className={styles['items-list']}>
       {items.map((item) => (
         <Item
           listState={listState}

diff --git a/src/components/TruthTally/LoadingSpinner.js → components/TruthTally/LoadingSpinner.js b/src/components/TruthTally/LoadingSpinner.js → components/TruthTally/LoadingSpinner.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import styles from '@/styles/TruthTally.module.css';
 
 const LoadingSpinner = (props) => {
   const { gameState, setGameState, loadingText, rankingCompleted } = props;
@@ -22,9 +23,9 @@ const LoadingSpinner = (props) => {
 
   if (showLoadingScreen || preload) {
     return (
-      <div className="loading-container">
-        {showSpinner && <div className="spinner"></div>}
-        <div className="loading-text">{loadingText}</div>
+      <div className={styles['loading-container']}>
+        {showSpinner && <div className={styles.spinner}></div>}
+        <div className={styles['loading-text']}>{loadingText}</div>
       </div>
     );
   }

diff --git a/src/components/TruthTally/RankedItem.js → components/TruthTally/RankedItem.js b/src/components/TruthTally/RankedItem.js → components/TruthTally/RankedItem.js
@@ -1,8 +1,9 @@
 import React from 'react';
+import styles from '@/styles/TruthTally.module.css';
 
 const RankedItem = (props) => {
   const { item, id } = props;
   let rankedItem = `${id}. ${item}`;
-  return <div className="ranked-item">{rankedItem}</div>;
+  return <div className={styles['ranked-item']}>{rankedItem}</div>;
 };
 export default RankedItem;
diff --git a/src/components/TruthTally/RankedList.js → components/TruthTally/RankedList.js b/src/components/TruthTally/RankedList.js → components/TruthTally/RankedList.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import RankedItem from './RankedItem';
+import styles from '@/styles/TruthTally.module.css';
 
 const RankedList = (props) => {
   const { listAuthor, listTitle, gameState, items } = props;
   const gameFinished = gameState === 'finished';
   return (
     gameFinished && (
-      <div className="results-container">
-        <div className="ranked-list-title">
+      <div className={styles['results-container']}>
+        <div className={styles['ranked-list-title']}>
           <h2>{listTitle}</h2>
           <h3>{listAuthor ? 'Ranked by ' + listAuthor : 'Ranked'}</h3>
         </div>
-        <div className="ranked-items">
+        <div className={styles['ranked-items']}>
           {items
             .sort((a, b) => b.score - a.score)
             .map((item, index) => (