Grading PR

src/components/Buttons/MinusButton.jsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { loadCSS } from 'fg-loadcss';
 import { red } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 import IconButton from '@mui/material/IconButton';
 
 export default function MinusButton() {
-  React.useEffect(() => {
+  useEffect(() => {
     const node = loadCSS(
       'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
       document.querySelector('#font-awesome-css') || document.head.firstChild

src/components/Buttons/PlusButton.jsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { loadCSS } from 'fg-loadcss';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 import IconButton from '@mui/material/IconButton';
 
 export default function PlusButton() {
-  React.useEffect(() => {
+  useEffect(() => {
     const node = loadCSS(
       'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
       // Inject before JSS

src/components/Buttons/PlusButtonSmall.jsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { loadCSS } from 'fg-loadcss';
 import { green } from '@mui/material/colors';
 import IconButton from '@mui/material/IconButton';
 import Icon from '@mui/material/Icon';
 import PropTypes from 'prop-types';
 
 export default function PlusButtonSmall({ onClick }) {
-  React.useEffect(() => {
+  useEffect(() => {
     const node = loadCSS(
       'https://use.fontawesome.com/releases/v5.14.0/css/all.css',
       // Inject before JSS

src/components/app/About.jsx

@@ -1,6 +1,7 @@
 import { Avatar } from '@mui/material';
 import React from 'react';
 
+// Each .bio-item here could be extracted into a presentational component
 export default function About() {
   return (
     <div>

src/components/app/Dashboard.jsx

@@ -1,22 +1,12 @@
 /* eslint-disable max-len */
 import React, { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
-// import { Link } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { DataGrid } from '@mui/x-data-grid';
 import { useUser } from '../../hooks/LoginProvider';
 
 const apiUrl = 'https://bienventory.herokuapp.com/api/v1/inventory/';
 
-// const rowsArray = dataArray.map((item) => {
-//   return {
-//     id: item.id,
-//     col1: item.item_name,
-//     col2: item.total_on_hand,
-//     col3: item.unit_type,
-//   };
-// });
-
 export default function Dashboard() {
   const user = useUser();
   const [userData, setUserData] = useState([]);

src/components/app/Dashboard.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
@@ -31,7 +31,7 @@ describe('Dashboard Component', () => {
 
     const inventoryGrid = await screen.findAllByRole('row');
 
-    expect(inventoryGrid).not.toBeEmptyDOMElement;
+    expect(inventoryGrid).not.toBeEmptyDOMElement();
     expect(container).toMatchSnapshot();
   });
 });

src/components/app/Inventory/InventoryDetail.jsx

@@ -1,7 +1,5 @@
 import { Modal, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import PlusButton from '../../Buttons/PlusButton';
-import MinusButton from '../../Buttons/MinusButton';
 import { Box } from '@mui/system';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -92,10 +90,6 @@ export default function InventoryDetail() {
       <Typography variant="h2" align="center">
         {total_on_hand} {unit_type}
       </Typography>
-      {/* <Box sx={{ display: 'flex', justifyContent: 'space-around' }}>
-        <MinusButton />
-        <PlusButton />
-      </Box> */}
     </div>
   );
 }

src/components/app/Inventory/InventoryDetail.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';

src/components/app/Inventory/InventoryForm.jsx

@@ -7,7 +7,6 @@ import {
 } from '../../../services/fetchUtils';
 import { useHistory } from 'react-router-dom';
 import { useUser } from '../../../hooks/LoginProvider';
-// const handleChange = () => {};
 
 //pass in click handler for either get OR put route depending on parent
 export default function InventoryForm(props) {

src/components/app/Inventory/InventoryForm.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';

src/components/app/Login.jsx

@@ -4,6 +4,7 @@ import { uselogInUser } from '../../hooks/LoginProvider';
 
 const responseGoogle = (response) => {
   console.log(response);
+  // Display something to the user that login failed?
 };
 
 export default function Login() {

src/components/app/Menu/MenuItemForm.jsx

@@ -34,8 +34,6 @@ export default function MenuItemForm() {
     setMenuItemName(target.value);
   };
 
-  useEffect(() => {}, [ingredientsArray]);
-
   const handleIngredientArrayChange = (ingredientObj) => {
     const updatedArray = [...ingredientsArray, ingredientObj];
     setIngredientsArray(updatedArray);

src/hooks/LoginProvider.js

@@ -32,6 +32,7 @@ const LoginProvider = ({ children }) => {
   );
 };
 
+// These three hooks below could be combined into a `useSession` (or some other name) hook
 export const uselogInUser = () => {
   const { logInUser } = useContext(Context);
   return logInUser;
@@ -52,6 +53,7 @@ export const useUser = () => {
   return user;
 };
 
+// This hook could be combined with `useUser`
 export const usesetUser = () => {
   const { setUser } = useContext(Context);
   return setUser;

src/services/fetchUtils.js

@@ -1,3 +1,4 @@
+// Consider moving "https://bienventory.herokuapp.com/api/v1/" into .env
 export const createUser = async (userData, phoneNumber) => {
   let response = await fetch('https://bienventory.herokuapp.com/api/v1/users', {
     method: 'POST',