Refactor

.eslintrc.json

@@ -23,8 +23,7 @@
     // "ecmaFeatures": {
     //   "jsx": true
     // },
-    "ecmaVersion": 2021,
-    // "presets": ["@babel/preset-react"],
+    "ecmaVersion": "latest",
     "requireConfigFile": false,
     "sourceType": "module"
   },
@@ -40,14 +39,17 @@
     "comma-dangle": "off",
     "indent": "off",
     "max-len": [
-      "error",
+      "warn",
       {
+        "code": 100,
         "ignoreComments": true,
         "ignoreUrls": true,
         "ignoreStrings": true,
-        "ignoreTemplateLiterals": true
+        "ignoreTemplateLiterals": true,
+        "tabWidth": 2
       }
     ],
+    "no-undef": "error",
     "radix": ["error", "as-needed"],
     "react/no-unescaped-entities": "off",
     "react/prop-types": "off",

.prettierrc

@@ -5,7 +5,7 @@
   "endOfLine": "lf",
   "htmlWhitespaceSensitivity": "css",
   "jsxSingleQuote": false,
-  "printWidth": 80,
+  "printWidth": 100,
   "proseWrap": "preserve",
   "quoteProps": "as-needed",
   "rangeStart": 0,

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="title" content="Cube Level Mdinight" />
-    <meta name="og:title" content="Cube Level Midnight" />
+    <meta property="og:title" content="Cube Level Midnight" />
     <meta
       name="description"
       content="Create, manage and draft Magic the Gathering cubes with your buds."

public/service-worker.js

@@ -17,9 +17,7 @@ self.addEventListener('notificationclick', function (event) {
   async function pullUpApp() {
     const allClients = await clients.matchAll();
     const hiddenApp = allClients.find(
-      (client) =>
-        client.url === notification.data.url &&
-        client.visibilityState === 'hidden'
+      (client) => client.url === notification.data.url && client.visibilityState === 'hidden'
     );
 
     if (hiddenApp) {
@@ -64,7 +62,7 @@ self.addEventListener('push', async function (event) {
         data: {
           url: data.url
         },
-        icon: '/images/icon.png'
+        icon: data.icon ?? '/images/icon.png'
       });
     }
   }

src/components/Account Page/BudAccordion.jsx

@@ -15,6 +15,9 @@ import MUITypography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
 
 import customSort from '../../functions/custom-sort';
+import initiateBudRequest from '../../graphql/mutations/account/initiate-bud-request';
+import respondToBudRequest from '../../graphql/mutations/account/respond-to-bud-request';
+import revokeBudship from '../../graphql/mutations/account/revoke-budship';
 import Avatar from '../miscellaneous/Avatar';
 import ConfirmationDialog from '../miscellaneous/ConfirmationDialog';
 import { AccountContext } from '../../contexts/account-context';
@@ -48,20 +51,10 @@ export default function BudAccordion() {
   const { accountID } = useParams();
   const classes = useStyles();
   const {
-    accountState: {
-      buds,
-      nearby_users,
-      received_bud_requests,
-      sent_bud_requests
-    },
-    editAccount
+    accountState: { buds, nearby_users, received_bud_requests, sent_bud_requests }
   } = useContext(AccountContext);
   const { geolocationEnabled, userID } = useContext(AuthenticationContext);
-  const [budToDelete, setBudToDelete] = useState({
-    _id: null,
-    avatar: null,
-    name: null
-  });
+  const [budToDelete, setBudToDelete] = useState();
   const [recommendedBuds, setRecommendedBuds] = useState([]);
 
   useEffect(() => {
@@ -101,25 +94,19 @@ export default function BudAccordion() {
     <React.Fragment>
       <ConfirmationDialog
         confirmHandler={() => {
-          editAccount(`action: "remove",\nother_user_id: "${budToDelete._id}"`);
-          setBudToDelete({ _id: null, avatar: null, name: null });
+          revokeBudship({
+            variables: { other_user_id: budToDelete ? budToDelete._id : '' }
+          });
+          setBudToDelete(null);
         }}
-        open={!!budToDelete._id}
-        title={`Are you sure you want to un-bud ${budToDelete.name}?`}
-        toggleOpen={() =>
-          setBudToDelete({ _id: null, avatar: null, name: null })
-        }
+        open={!!budToDelete}
+        title={`Are you sure you want to un-bud ${budToDelete ? budToDelete.name : ''}?`}
+        toggleOpen={() => setBudToDelete(null)}
       >
         <div style={{ display: 'flex' }}>
-          <Avatar
-            alt={budToDelete.name}
-            size="medium"
-            src={budToDelete.avatar}
-            style={{ marginRight: 16 }}
-          />
+          <Avatar profile={budToDelete} size="medium" style={{ marginRight: 16 }} />
           <MUITypography variant="body1">
-            Think of all the good times you've had. And how lonely they'll be
-            without you.
+            Think of all the good times you've had. And how lonely they'll be without you.
           </MUITypography>
         </div>
       </ConfirmationDialog>
@@ -149,9 +136,7 @@ export default function BudAccordion() {
                               horizontal: 'right',
                               vertical: 'top'
                             }}
-                            badgeContent={
-                              <MUIPersonAddIcon className={classes.badgeIcon} />
-                            }
+                            badgeContent={<MUIPersonAddIcon className={classes.badgeIcon} />}
                             className={classes.badge}
                             color="primary"
                             onClick={(event) => {
@@ -160,28 +145,22 @@ export default function BudAccordion() {
                                   .closest('span')
                                   .classList.contains('MuiBadge-colorPrimary')
                               ) {
-                                editAccount(
-                                  `action: "send",\nother_user_id: "${nearby_user._id}"`
-                                );
+                                initiateBudRequest({
+                                  variables: { other_user_id: nearby_user._id }
+                                });
                               }
                             }}
                             overlap="circular"
                           >
                             <Link to={`/account/${nearby_user._id}`}>
-                              <Avatar
-                                alt={nearby_user.name}
-                                size="medium"
-                                src={nearby_user.avatar}
-                              />
+                              <Avatar profile={nearby_user} size="medium" />
                             </Link>
                           </MUIBadge>
                         </MUIListItem>
                       ))}
                     </MUIList>
                   ) : (
-                    <MUITypography variant="body1">
-                      Determining Location...
-                    </MUITypography>
+                    <MUITypography variant="body1">Determining Location...</MUITypography>
                   )}
                 </React.Fragment>
               )}
@@ -198,9 +177,7 @@ export default function BudAccordion() {
                           horizontal: 'right',
                           vertical: 'bottom'
                         }}
-                        badgeContent={
-                          <MUINotInterestedIcon className={classes.badgeIcon} />
-                        }
+                        badgeContent={<MUINotInterestedIcon className={classes.badgeIcon} />}
                         className={classes.badge}
                         color="secondary"
                         onClick={(event) => {
@@ -209,9 +186,9 @@ export default function BudAccordion() {
                               .closest('span')
                               .classList.contains('MuiBadge-colorSecondary')
                           ) {
-                            editAccount(
-                              `action: "reject",\nother_user_id: "${request._id}"`
-                            );
+                            respondToBudRequest({
+                              variables: { other_user_id: request._id, response: 'reject' }
+                            });
                           }
                         }}
                         overlap="circular"
@@ -221,9 +198,7 @@ export default function BudAccordion() {
                             horizontal: 'right',
                             vertical: 'top'
                           }}
-                          badgeContent={
-                            <MUIPersonAddIcon className={classes.badgeIcon} />
-                          }
+                          badgeContent={<MUIPersonAddIcon className={classes.badgeIcon} />}
                           className={classes.badge}
                           color="primary"
                           onClick={(event) => {
@@ -232,19 +207,15 @@ export default function BudAccordion() {
                                 .closest('span')
                                 .classList.contains('MuiBadge-colorPrimary')
                             ) {
-                              editAccount(
-                                `action: "accept",\nother_user_id: "${request._id}"`
-                              );
+                              respondToBudRequest({
+                                variables: { other_user_id: request._id, response: 'accept' }
+                              });
                             }
                           }}
                           overlap="circular"
                         >
                           <Link to={`/account/${request._id}`}>
-                            <Avatar
-                              alt={request.name}
-                              size="medium"
-                              src={request.avatar}
-                            />
+                            <Avatar profile={request} size="medium" />
                           </Link>
                         </MUIBadge>
                       </MUIBadge>
@@ -261,11 +232,7 @@ export default function BudAccordion() {
                   return (
                     <MUIListItem key={request._id}>
                       <Link to={`/account/${request._id}`}>
-                        <Avatar
-                          alt={request.name}
-                          size="medium"
-                          src={request.avatar}
-                        />
+                        <Avatar profile={request} size="medium" />
                       </Link>
                     </MUIListItem>
                   );
@@ -281,26 +248,22 @@ export default function BudAccordion() {
                     <MUIListItem key={pb._id}>
                       <MUIBadge
                         anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
-                        badgeContent={
-                          <MUIPersonAddIcon className={classes.badgeIcon} />
-                        }
+                        badgeContent={<MUIPersonAddIcon className={classes.badgeIcon} />}
                         className={classes.badge}
                         color="primary"
                         onClick={(event) => {
                           if (
-                            event.target
-                              .closest('span')
-                              .classList.contains('MuiBadge-colorPrimary')
+                            event.target.closest('span').classList.contains('MuiBadge-colorPrimary')
                           ) {
-                            editAccount(
-                              `action: "send",\nother_user_id: "${pb._id}"`
-                            );
+                            initiateBudRequest({
+                              variables: { other_user_id: pb._id }
+                            });
                           }
                         }}
                         overlap="circular"
                       >
                         <Link to={`/account/${pb._id}`}>
-                          <Avatar alt={pb.name} size="medium" src={pb.avatar} />
+                          <Avatar profile={pb} size="medium" />
                         </Link>
                       </MUIBadge>
                     </MUIListItem>
@@ -319,29 +282,25 @@ export default function BudAccordion() {
                 {accountID === userID ? (
                   <MUIBadge
                     anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-                    badgeContent={
-                      <MUIPersonRemoveIcon className={classes.badgeIcon} />
-                    }
+                    badgeContent={<MUIPersonRemoveIcon className={classes.badgeIcon} />}
                     className={classes.badge}
                     color="secondary"
                     onClick={(event) => {
                       if (
-                        event.target
-                          .closest('span')
-                          .classList.contains('MuiBadge-colorSecondary')
+                        event.target.closest('span').classList.contains('MuiBadge-colorSecondary')
                       ) {
                         setBudToDelete(bud);
                       }
                     }}
                     overlap="circular"
                   >
                     <Link to={`/account/${bud._id}`}>
-                      <Avatar alt={bud.name} size="medium" src={bud.avatar} />
+                      <Avatar profile={bud} size="medium" />
                     </Link>
                   </MUIBadge>
                 ) : (
                   <Link to={`/account/${bud._id}`}>
-                    <Avatar alt={bud.name} size="medium" src={bud.avatar} />
+                    <Avatar profile={bud} size="medium" />
                   </Link>
                 )}
               </MUIListItem>

src/components/Account Page/CubeAccordion.jsx

@@ -36,10 +36,7 @@ export default function CubeAccordion({ pageClasses }) {
 
   return (
     <React.Fragment>
-      <DeleteCubeForm
-        cubeToDelete={cubeToDelete}
-        setCubeToDelete={setCubeToDelete}
-      />
+      <DeleteCubeForm cubeToDelete={cubeToDelete} setCubeToDelete={setCubeToDelete} />
 
       <CreateCubeForm
         open={showCreateCubeForm}
@@ -77,9 +74,17 @@ export default function CubeAccordion({ pageClasses }) {
                       >
                         {cube.image && (
                           <img
-                            alt={cube.image.alt}
+                            alt={
+                              cube.image.image_uris
+                                ? cube.image.name
+                                : cube.image.card_faces[0].name
+                            }
                             height={50}
-                            src={cube.image.src}
+                            src={
+                              cube.image.image_uris
+                                ? cube.image.image_uris.art_crop
+                                : cube.image.card_faces[0].image_uris.art_crop
+                            }
                             style={{ borderRadius: 4 }}
                           />
                         )}
@@ -93,9 +98,7 @@ export default function CubeAccordion({ pageClasses }) {
                       <MUITableCell style={{ textAlign: 'right' }}>
                         <MUIIconButton
                           color="secondary"
-                          onClick={() =>
-                            setCubeToDelete({ _id: cube._id, name: cube.name })
-                          }
+                          onClick={() => setCubeToDelete({ _id: cube._id, name: cube.name })}
                           size="small"
                         >
                           <MUIDeleteForeverOutlinedIcon fontSize="large" />