Refactoring 2.0

api/controllers/userDataController.js

@@ -13,7 +13,7 @@ const getUser = async (req, res) => {
 //add a new user
 const addUser = async (req, res) => {
   const { name, guestList, favoriteRecipes } = req.body;
-  const existingUser = await User.find({ name: name });
+  const existingUser = await User.find({ name });
   if (existingUser.length > 0) {
     return res.status(400).json({ error: "This user already exists." });
   }
@@ -31,7 +31,7 @@ const deleteUser = async (req, res) => {
   const { username } = req.params;
   try {
     await User.deleteOne({ name: username });
-    res.status(200).json({ msg: username + " was deleted successfully." });
+    res.status(200).json({ msg: `${username} was deleted successfully.` });
   } catch (error) {
     res.status(400).json({ error: error.message });
   }

src/__tests__/CompareArrays.test.js

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import CompareArrays from "../util/CompareArrays";
 
-test("Function to compare two arrays works", async () => {
+test("Function to compare two arrays works", () => {
   const array1 = [
     { id: 1, name: 20342 },
     { id: 2, name: "dum" },
@@ -20,7 +20,7 @@ test("Function to compare two arrays works", async () => {
   ]);
 });
 
-test("Edge case 1 comparing two arrays", async () => {
+test("Edge case 1 comparing two arrays", () => {
   const array1 = [
     { id: 1, name: 20342 },
     { id: 2, name: "dum" },
@@ -38,7 +38,7 @@ test("Edge case 1 comparing two arrays", async () => {
   ]);
 });
 
-test("Edge case 2 comparing two arrays", async () => {
+test("Edge case 2 comparing two arrays", () => {
   const array1 = [
     { id: 1, name: 20342 },
     { id: 2, name: "dum" },

src/__tests__/GetSelectedGuestsIntolerances.test.js

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import GetSelectedGuestsIntolerances from "../util/GetSelectedGuestsIntolerances.js";
 
-test("return intolerances from all selected guests - no double intolerances", async () => {
+test("return intolerances from all selected guests - no double intolerances", () => {
   const testArray = [
     {
       id: 1,
@@ -33,7 +33,7 @@ test("return intolerances from all selected guests - no double intolerances", as
   expect(result).toEqual(["Dairy-Free", "Gluten-Free", "Kosher"]);
 });
 
-test("return intolerances from all selected guests - double intolerances", async () => {
+test("return intolerances from all selected guests - double intolerances", () => {
   const testArray = [
     {
       id: 1,

src/__tests__/GuestNameInput.test.js

@@ -29,7 +29,7 @@ describe("input field requires valid usernames", () => {
     expect(form).not.toBeValid();
   });
 
-  it("should require an input", async () => {
+  it("should require an input", () => {
     render(
       <form data-testid="form">
         <GuestNameInput />

src/components/BasicButton.js

@@ -1,7 +1,8 @@
+import React from "react";
 import backIcon from "../assets/icons/arrow-left-circle.svg";
 import checkIcon from "../assets/icons/ph_check-circle.svg";
 
-export default function BasicButton({ description, handleClick }) {
+function BasicButton({ description, handleClick }) {
   return (
     <button
       type={description === "submit" ? "submit" : "button"}
@@ -12,3 +13,5 @@ export default function BasicButton({ description, handleClick }) {
     </button>
   );
 }
+
+export default React.memo(BasicButton);

src/components/DisplaySelectedGuests.js

@@ -1,13 +1,12 @@
-import { useContext } from "react";
+import React, { useContext } from "react";
 import styled from "styled-components";
 import { UserContext } from "../context/UserContext";
 import getIntolerances from "../util/GetSelectedGuestsIntolerances";
 
-export default function DisplaySelectedGuests() {
+function DisplaySelectedGuests() {
   const { guestArray } = useContext(UserContext);
   const selectedGuests = guestArray.filter((guest) => guest.selected);
-  let intolerances = getIntolerances(guestArray);
-
+  const intolerances = getIntolerances(guestArray);
   return (
     <StyledSection>
       {intolerances.length > 0 ? (
@@ -46,3 +45,5 @@ const StyledSubSection = styled.section`
     margin-right: 10px;
   }
 `;
+
+export default React.memo(DisplaySelectedGuests);

src/components/GuestCard.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
-import { useContext, useState } from "react";
+import React, { useContext, useState } from "react";
 import { UserContext } from "../context/UserContext";
 import emptyCircle from "../assets/icons/circle_empty.svg";
 import checkedCircle from "../assets/icons/circle-check.svg";
@@ -12,31 +12,11 @@ export default function GuestCard({ personalData }) {
   const { name, intolerances, notes, _id, selected } = personalData;
   const [showGuestInfo, setShowGuestInfo] = useState(false);
   const navigate = useNavigate();
-
-  const { guestArray, setGuestArray, deleteGuest } = useContext(UserContext);
-
-  function handleDelete() {
-    deleteGuest(_id);
-    navigate("/");
-  }
-
-  function toggleSelected(guestId) {
-    setGuestArray(
-      guestArray.map((guest) =>
-        guest._id === guestId
-          ? {
-              ...guest,
-              selected: !guest.selected,
-            }
-          : guest
-      )
-    );
-  }
-
+  const { toggleSelectGuest, deleteGuest } = useContext(UserContext);
   return (
     <StyledArticle>
       <StyledBasicSection>
-        <StyledCheckButton type="button" onClick={() => toggleSelected(_id)}>
+        <StyledCheckButton type="button" onClick={() => toggleSelectGuest(_id)}>
           {selected ? (
             <img src={checkedCircle} alt="selected" />
           ) : (
@@ -63,7 +43,7 @@ export default function GuestCard({ personalData }) {
         <StyledInfoP>{notes.length > 0 && "Further Notes:"}</StyledInfoP>
         <StyledNotes>{notes}</StyledNotes>
         <StyledButtonContainer>
-          <StyledDeleteButton onClick={handleDelete}>
+          <StyledDeleteButton onClick={() => deleteGuest(_id)}>
             <img src={deleteIcon} alt="delete guest" />
             <p>delete</p>
           </StyledDeleteButton>

src/components/Header.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
+import React from "react";
 
-export default function Header({ title }) {
+function Header({ title }) {
   return (
     <StyledHeader>
       <h1>{title}</h1>
@@ -23,3 +24,5 @@ const StyledHeader = styled.header`
     font-weight: unset;
   }
 `;
+
+export default React.memo(Header);

src/components/InfoModal.js

@@ -1,17 +1,14 @@
 import styled from "styled-components";
-import { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import IntoleranceFilterInformation from "./IntoleranceFilterTable";
+import { UserContext } from "../context/UserContext";
 
-export default function InfoModal({ isInfoModalOpen, setIsInfoModalOpen }) {
-  function closeModal(event) {
-    setIsInfoModalOpen(false);
-    event.stopPropagation();
-  }
-
+function InfoModal() {
+  const { toggleModal } = useContext(UserContext);
   useEffect(() => {
     function keyListener(e) {
       if (e.keyCode === 27) {
-        setIsInfoModalOpen(false);
+        toggleModal("info");
       }
     }
     document.addEventListener("keydown", keyListener);
@@ -20,24 +17,20 @@ export default function InfoModal({ isInfoModalOpen, setIsInfoModalOpen }) {
 
   return (
     <>
-      {isInfoModalOpen && (
-        <Backdrop onClick={() => setIsInfoModalOpen(false)}></Backdrop>
-      )}
-      {isInfoModalOpen && (
-        <ModalContainer onClick={() => setIsInfoModalOpen(false)}>
-          <h2>Intolerance filters</h2>
-          <StyledIntro>
-            Find out what all the available filters for intolerances, diets,
-            etc. mean exactly:
-          </StyledIntro>
-          <IntoleranceFilterInformation />
-          {
-            <StyledCloseButton onClick={(event) => closeModal(event)}>
-              X
-            </StyledCloseButton>
-          }
-        </ModalContainer>
-      )}
+      <Backdrop onClick={(event) => toggleModal("info", event)}></Backdrop>
+      <ModalContainer onClick={(event) => toggleModal("info", event)}>
+        <h2>Intolerance filters</h2>
+        <StyledIntro>
+          Find out what all the available filters for intolerances, diets, etc.
+          mean exactly:
+        </StyledIntro>
+        <IntoleranceFilterInformation />
+        {
+          <StyledCloseButton onClick={(event) => toggleModal("info", event)}>
+            X
+          </StyledCloseButton>
+        }
+      </ModalContainer>
     </>
   );
 }
@@ -86,3 +79,5 @@ const StyledIntro = styled.p`
   margin: 10px 0;
   font-size: 1.1rem;
 `;
+
+export default React.memo(InfoModal);

src/components/Layout.js

@@ -1,12 +1,10 @@
 import styled from "styled-components";
-import WarningModal from "./WarningModal";
 import { Outlet } from "react-router-dom";
 
 export default function Layout() {
   return (
     <>
       <Container>
-        <WarningModal />
         <Outlet />
       </Container>
     </>

src/components/LoginSection.js

@@ -1,37 +1,30 @@
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { UserContext } from "../context/UserContext";
 import styled from "styled-components";
 
-export default function LoginSection() {
-  const { fetchUserData, username, setUsername, isLoggedIn, handleNewUser } =
+function LoginSection() {
+  const { fetchUserData, updateUsername, handleNewUser } =
     useContext(UserContext);
   return (
     <LoginContainer>
-      {isLoggedIn && <h2>Hello {username}!</h2>}
-      {!isLoggedIn && (
-        <StyledUsernameInput
-          name="username"
-          id="username"
-          type="text"
-          //this pattern prevents users from submiting empty whitespace-filled names (from stackoverflow)
-          pattern=".*[^\s]{1,}.*"
-          title="max. 15 letters, no empty usernames"
-          placeholder="your username"
-          minLength="1"
-          maxLength="15"
-          onChange={(event) => setUsername(event.target.value.trim())}
-        />
-      )}
-      {!isLoggedIn && (
-        <button type="button" onClick={fetchUserData}>
-          Login
-        </button>
-      )}
-      {!isLoggedIn && (
-        <button type="button" onClick={handleNewUser}>
-          Login as new user
-        </button>
-      )}
+      <StyledUsernameInput
+        name="username"
+        id="username"
+        type="text"
+        //this pattern prevents users from submiting empty whitespace-filled names (from stackoverflow)
+        pattern=".*[^\s]{1,}.*"
+        title="max. 15 letters, no empty usernames"
+        placeholder="your username"
+        minLength="1"
+        maxLength="15"
+        onChange={(event) => updateUsername(event)}
+      />
+      <button type="button" onClick={fetchUserData}>
+        Login
+      </button>
+      <button type="button" onClick={handleNewUser}>
+        Login as new user
+      </button>
     </LoginContainer>
   );
 }
@@ -74,3 +67,5 @@ const StyledUsernameInput = styled.input`
     border: 2px solid red;
   }
 `;
+
+export default React.memo(LoginSection);

src/components/MoreFilters.js

@@ -1,8 +1,8 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { filterData } from "../assets/data";
 
-export default function MoreFilters({
+function MoreFilters({
   selectedMealType,
   setSelectedMealType,
   selectedDishType,
@@ -13,7 +13,6 @@ export default function MoreFilters({
   const [isMealTypeOpen, setIsMealTypeOpen] = useState(false);
   const [isDishTypeOpen, setIsDishTypeOpen] = useState(false);
   const [isCuisineTypeOpen, setIsCuisineTypeOpen] = useState(false);
-
   function handleSelect(event, type) {
     if (type === "mealTypes") {
       if (!selectedMealType.includes(event.target.value)) {
@@ -127,7 +126,9 @@ export default function MoreFilters({
                     <label
                       key={type.label}
                       htmlFor={type.label}
+                      role="button"
                       onClick={(event) => event.stopPropagation()}
+                      onKeyDown={(event) => event.stopPropagation()}
                     >
                       <input
                         key={index}
@@ -149,7 +150,9 @@ export default function MoreFilters({
                     <label
                       key={type.label}
                       htmlFor={type.label}
+                      role="button"
                       onClick={(event) => event.stopPropagation()}
+                      onKeyDown={(event) => event.stopPropagation()}
                     >
                       <input
                         key={index}
@@ -171,7 +174,9 @@ export default function MoreFilters({
                     <label
                       key={type.label}
                       htmlFor={type.label}
+                      role="button"
                       onClick={(event) => event.stopPropagation()}
+                      onKeyDown={(event) => event.stopPropagation()}
                     >
                       <input
                         key={index}
@@ -269,3 +274,5 @@ const StyledSubSection = styled.section`
     gap: 10px;
   }
 `;
+
+export default React.memo(MoreFilters);