npm: upgrade to latest versions

.eslintrc.json

@@ -1,7 +1,12 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "extends": ["next/core-web-vitals", "eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
+  ],
   "plugins": ["@typescript-eslint", "testing-library", "formatjs"],
   "overrides": [
     // Only uses Testing Library lint rules in test files

.github/workflows/cron.yml

@@ -10,4 +10,4 @@ jobs:
         run: |
           curl --request POST \
           --url 'https://${{ secrets.BASE_URL }}/api/social/update-feeds' \
-          --header 'Authorization: Bearer ${{ secrets.CRON_JOB_SECRET }}'
+          --header 'Authorization: Bearer ${{ secrets.CRON_JOB_SECRET }}'

.storybook/main.js

@@ -1,4 +1,13 @@
 module.exports = {
   stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };

__tests__/__snapshots__/snapshot.tsx.snap

@@ -13,7 +13,7 @@ exports[`renders homepage unchanged 1`] = `
       🙃
     </span>
     <h1
-      class="MuiTypography-root MuiTypography-h1 css-1vq31ir-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h1 css-1n3khfy-MuiTypography-root"
     >
       <span
         class="notranslate"
@@ -39,7 +39,7 @@ exports[`renders homepage unchanged 1`] = `
       >
         try going back to the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1h36a4r-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-2y06fq-MuiTypography-root-MuiLink-root"
           href="/"
         >
           beginning

app/authServerSideProps.ts

@@ -1,12 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { getSession } from '@auth0/nextjs-auth0';
+import auth0 from 'vendor/auth0';
 import prisma from 'data/prisma';
 
 const authServerSideProps =
   (props: any = {}) =>
   async ({ req, res }: { req: NextApiRequest; res: NextApiResponse }) => {
-    const session = getSession(req, res);
+    const session = await auth0.getSession(req, res);
 
     if (!session) {
       return {

app/authentication.ts

@@ -1,13 +1,13 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { User } from '@prisma/client';
-import { getSession } from '@auth0/nextjs-auth0';
+import auth0 from 'vendor/auth0';
 import prisma from 'data/prisma';
 
 const authenticate =
   (handler: (req: NextApiRequest, res: NextApiResponse, currentUser: User) => void) =>
   async (req: NextApiRequest, res: NextApiResponse) => {
-    const session = getSession(req, res);
+    const session = await auth0.getSession(req, res);
 
     if (!session) {
       return res.status(401).send({ msg: 'Not logged in.' });

components/Editor.tsx

@@ -14,8 +14,10 @@ const EditorStyling = styled('div', { label: 'EditorStyling' })`
     width: 100%;
     min-height: 33vh;
     border: 1px solid ${(props) => props.theme.palette.primary.light};
-    box-shadow: 1px 1px ${(props) => props.theme.palette.primary.light},
-      2px 2px ${(props) => props.theme.palette.primary.light}, 3px 3px ${(props) => props.theme.palette.primary.light};
+    box-shadow:
+      1px 1px ${(props) => props.theme.palette.primary.light},
+      2px 2px ${(props) => props.theme.palette.primary.light},
+      3px 3px ${(props) => props.theme.palette.primary.light};
     padding: ${(props) => props.theme.spacing(2, 2, 2, 3.5)};
     margin-bottom: ${(props) => props.theme.spacing(3.5)};
     background-color: ${(props) => props.theme.palette.background.default};

components/FeedWrapper.tsx

@@ -3,8 +3,10 @@ import { styled } from '@mui/material/styles';
 const FeedWrapper = styled('div', { label: 'FeedWrapper' })`
   width: calc(33% - ${(props) => props.theme.spacing(2)});
   border: 1px solid ${(props) => props.theme.palette.primary.light};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.primary.light},
-    2px 2px ${(props) => props.theme.palette.primary.light}, 3px 3px ${(props) => props.theme.palette.primary.light};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.primary.light},
+    2px 2px ${(props) => props.theme.palette.primary.light},
+    3px 3px ${(props) => props.theme.palette.primary.light};
   transition: box-shadow 100ms;
   margin-bottom: ${(props) => props.theme.spacing(4)};
   clear: both;

components/Login.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@mui/material';
 import { F } from 'i18n';
 import { useRouter } from 'next/router';
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser } from '@auth0/nextjs-auth0/client';
 
 export default function LoginLogoutButton() {
   const router = useRouter();

components/content/Footer.tsx

@@ -25,8 +25,10 @@ const StyledFooter = styled('footer')`
 
   color: ${(props) => props.theme.palette.grey[500]};
   border: 1px solid ${(props) => props.theme.palette.primary.light};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.primary.light},
-    2px 2px ${(props) => props.theme.palette.primary.light}, 3px 3px ${(props) => props.theme.palette.primary.light};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.primary.light},
+    2px 2px ${(props) => props.theme.palette.primary.light},
+    3px 3px ${(props) => props.theme.palette.primary.light};
   padding: ${(props) => props.theme.spacing(0.5, 1)};
 `;
 

components/content/Header.tsx

@@ -14,8 +14,10 @@ const StyledHeader = styled('header')`
   background: ${(props) => props.theme.palette.background.default};
   padding: ${(props) => props.theme.spacing(1, 1.5)};
   border: 1px solid ${(props) => props.theme.palette.primary.light};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.primary.light},
-    2px 2px ${(props) => props.theme.palette.primary.light}, 3px 3px ${(props) => props.theme.palette.primary.light};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.primary.light},
+    2px 2px ${(props) => props.theme.palette.primary.light},
+    3px 3px ${(props) => props.theme.palette.primary.light};
   z-index: 1;
 
   & .p-name {

components/content/SiteMap.tsx

@@ -28,8 +28,10 @@ const Nav = styled('nav', transientOptions)<{ $isMenuOpen: boolean }>`
   padding: ${(props) => props.theme.spacing(0.5)};
 
   border: 1px solid ${(props) => props.theme.palette.primary.light};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.primary.light},
-    2px 2px ${(props) => props.theme.palette.primary.light}, 3px 3px ${(props) => props.theme.palette.primary.light};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.primary.light},
+    2px 2px ${(props) => props.theme.palette.primary.light},
+    3px 3px ${(props) => props.theme.palette.primary.light};
 
   ${(props) => props.theme.breakpoints.down('md')} {
     ${(props) => !props.$isMenuOpen && 'display: none;'}

components/content/templates/Album.tsx

@@ -52,7 +52,7 @@ const LinkWrapper = styled('span')`
 // });
 
 const FETCH_COLLECTION = gql`
-  query ($username: String!, $section: String!, $album: String!, $name: String!) {
+  query FetchAlbumCollection($username: String!, $section: String!, $album: String!, $name: String!) {
     fetchCollection(username: $username, section: $section, album: $album, name: $name) {
       album
       externalLink

components/content/templates/Archive.tsx

@@ -14,7 +14,7 @@ const LoadingEmptyBox = styled('div')`
 `;
 
 const FETCH_COLLECTION = gql`
-  query ($username: String!, $section: String!, $album: String!, $name: String!) {
+  query FetchArchiveCollection($username: String!, $section: String!, $album: String!, $name: String!) {
     fetchCollection(username: $username, section: $section, album: $album, name: $name) {
       album
       forceRefresh

components/content/templates/Latest.tsx

@@ -8,7 +8,7 @@ import { contentUrl } from 'util/url-factory';
 import { useRouter } from 'next/router';
 
 const FETCH_COLLECTION_LINKS = gql`
-  query ($username: String!, $section: String!, $name: String!) {
+  query FetchCollectionLatest($username: String!, $section: String!, $name: String!) {
     fetchCollectionLatest(username: $username, section: $section, name: $name) {
       album
       name

components/dashboard/Feed.tsx

@@ -12,8 +12,10 @@ const Header = styled(Typography)`
   z-index: ${baseTheme.zindex.abovePage};
   background: ${(props) => props.theme.palette.background.default};
   border: 1px solid ${(props) => props.theme.palette.primary.light};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.primary.light},
-    2px 2px ${(props) => props.theme.palette.primary.light}, 3px 3px ${(props) => props.theme.palette.primary.light};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.primary.light},
+    2px 2px ${(props) => props.theme.palette.primary.light},
+    3px 3px ${(props) => props.theme.palette.primary.light};
   width: 100%;
   margin-bottom: ${(props) => props.theme.spacing(3)};
   padding: ${(props) => props.theme.spacing(0.5, 1)};

components/dashboard/Followers.tsx

@@ -22,8 +22,10 @@ const Container = styled('div')`
   margin: 0 ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(2)} 0;
   padding: ${(props) => props.theme.spacing(1)};
   border: 1px solid ${(props) => props.theme.palette.success.main};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.success.main},
-    2px 2px ${(props) => props.theme.palette.success.main}, 3px 3px ${(props) => props.theme.palette.success.main};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.success.main},
+    2px 2px ${(props) => props.theme.palette.success.main},
+    3px 3px ${(props) => props.theme.palette.success.main};
 
   h2 {
     margin: 0;

components/dashboard/Following.tsx

@@ -19,8 +19,10 @@ const Container = styled('div')`
   margin: 0 ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(3.5)} 0;
   padding: ${(props) => props.theme.spacing(1)};
   border: 1px solid ${(props) => props.theme.palette.success.main};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.success.main},
-    2px 2px ${(props) => props.theme.palette.success.main}, 3px 3px ${(props) => props.theme.palette.success.main};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.success.main},
+    2px 2px ${(props) => props.theme.palette.success.main},
+    3px 3px ${(props) => props.theme.palette.success.main};
 
   h2 {
     margin: 0;

components/dashboard/FollowingSpecialFeedCountsQuery.tsx

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export default gql`
-  {
+  query FetchSpecialFeedCounts {
     fetchUserTotalCounts {
       commentsCount
       favoritesCount

components/dashboard/Tools.tsx

@@ -9,8 +9,10 @@ const StyledList = styled(List)`
   margin: 0 ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(3.5)} 0;
   padding: ${(props) => props.theme.spacing(1)};
   border: 1px solid ${(props) => props.theme.palette.secondary.main};
-  box-shadow: 1px 1px ${(props) => props.theme.palette.secondary.main},
-    2px 2px ${(props) => props.theme.palette.secondary.main}, 3px 3px ${(props) => props.theme.palette.secondary.main};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.secondary.main},
+    2px 2px ${(props) => props.theme.palette.secondary.main},
+    3px 3px ${(props) => props.theme.palette.secondary.main};
 
   a {
     font-size: ${(props) => props.theme.typography.body2};

data/context.ts

@@ -1,4 +1,5 @@
-import { Claims, getSession } from '@auth0/nextjs-auth0';
+import { Claims } from '@auth0/nextjs-auth0';
+import auth0 from 'vendor/auth0';
 import { NextApiRequest, NextApiResponse } from 'next';
 import { PrismaClient, User } from '@prisma/client';
 
@@ -20,7 +21,7 @@ export type Context = {
 };
 
 export async function createContext({ req, res }: { req: NextApiRequest; res: NextApiResponse }): Promise<Context> {
-  const session = getSession(req, res);
+  const session = await auth0.getSession(req, res);
 
   let currentUsername = '';
   let currentUser = null;