Project Maintenance and Updates

.env.template

@@ -6,4 +6,5 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="postgresql://postgres:[email protected]:5432/postgres"
+DATABASE_URL="postgresql://postgres:[email protected]:5432/postgres"
+NEXTAUTH_SECRET= # run `openssl rand -base64 32` to generate your secret

.eslintrc.js

@@ -5,45 +5,30 @@ module.exports = {
     es6: true,
   },
   parserOptions: { ecmaVersion: 8 }, // to enable features such as async/await
-  ignorePatterns: ['node_modules/*', '.next/*', '.out/*', '!.prettierrc.js'], // We don't want to lint generated files nor node_modules, but we want to lint .prettierrc.js (ignored by default by eslint)
-  extends: ['eslint:recommended'],
+  ignorePatterns: ['node_modules/*', '.next/*', '.out/*', '!.prettierrc.js'],
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
   overrides: [
     // This configuration will apply only to TypeScript files
     {
       files: ['**/*.ts', '**/*.tsx'],
-      parser: '@typescript-eslint/parser',
       settings: { react: { version: 'detect' } },
       env: {
         browser: true,
         node: true,
         es6: true,
       },
-      extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended', // TypeScript rules
-        'plugin:react/recommended', // React rules
-        'plugin:react-hooks/recommended', // React hooks rules
-        'plugin:jsx-a11y/recommended', // Accessibility rules
-        'plugin:prettier/recommended', // Prettier plugin
-      ],
       rules: {
         // We will use TypeScript's types for component props instead
         'react/prop-types': 'off',
-
-        // No need to import React when using Next.js
-        'react/react-in-jsx-scope': 'off',
-
-        // This rule is not compatible with Next.js's <Link /> components
-        'jsx-a11y/anchor-is-valid': 'off',
-
-        // Why would you want unused vars?
-        '@typescript-eslint/no-unused-vars': ['error'],
-
-        // I suggest this setting for requiring return types on functions only where useful
+        '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/no-explicit-any': 'error',
         '@typescript-eslint/explicit-function-return-type': 'off',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
-
-        'prettier/prettier': ['error', { endOfLine: 'auto' }, { usePrettierrc: true }], // Includes .prettierrc.js rules
       },
     },
   ],

.gitignore

@@ -41,3 +41,6 @@ prisma/dev.db
 # sitemap - these get built automatically
 public/sitemap.xml
 public/robots.txt
+
+# Sentry
+.sentryclirc

.nvmrc

@@ -0,0 +1 @@
+v14.18.2

.prettierrc.js

@@ -2,9 +2,7 @@ module.exports = {
   // Change your rules accordingly to your coding style preferences.
   // https://prettier.io/docs/en/options.html
   semi: false,
-  trailingComma: 'es5',
   singleQuote: true,
-  printWidth: 100,
   tabWidth: 2,
   useTabs: false,
 }

components/admin/AdminNav.tsx

@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react'
 import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
 
-import { signIn, signOut, useSession } from 'next-auth/client'
+import { signIn, signOut, useSession } from 'next-auth/react'
 import { RESPONSIVE_PADDING } from '../common/ContentBox'
 
 const Links = [
@@ -52,7 +52,8 @@ interface NavLinkProps extends LinkDisplayProps {
 }
 
 const NavLink = ({ alwaysDisplay = false, ...props }: NavLinkProps) => {
-  const [session, loading] = useSession()
+  const { data: session, status } = useSession()
+  const loading = status === 'loading'
 
   if (alwaysDisplay) {
     return <LinkDisplay {...props} />
@@ -72,7 +73,7 @@ const NavLink = ({ alwaysDisplay = false, ...props }: NavLinkProps) => {
 
 export default function AdminNav() {
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const [session] = useSession()
+  const { data: session } = useSession()
 
   return (
     <>
@@ -87,14 +88,24 @@ export default function AdminNav() {
         <Flex alignItems={'center'} justifyContent={'space-between'}>
           <IconButton
             size={'md'}
-            icon={isOpen ? <CloseIcon color={'white'} /> : <HamburgerIcon color={'white'} />}
+            icon={
+              isOpen ? (
+                <CloseIcon color={'white'} />
+              ) : (
+                <HamburgerIcon color={'white'} />
+              )
+            }
             aria-label={'Open Menu'}
             display={{ lg: 'none' }}
             onClick={isOpen ? onClose : onOpen}
           />
 
           <HStack spacing={8} alignItems={'center'}>
-            <HStack as={'nav'} spacing={4} display={{ base: 'none', lg: 'flex' }}>
+            <HStack
+              as={'nav'}
+              spacing={4}
+              display={{ base: 'none', lg: 'flex' }}
+            >
               {Links.map((link) => (
                 <NavLink key={link.text} href={link.href} text={link.text} />
               ))}
@@ -105,7 +116,11 @@ export default function AdminNav() {
             alignItems={{ base: 'flex-end', sm: 'center' }}
             direction={{ base: 'column', sm: 'row' }}
           >
-            <Text mb={{ base: 1, sm: 0 }} mr={{ sm: 4 }} fontSize={{ base: '0.75rem', sm: 'md' }}>
+            <Text
+              mb={{ base: 1, sm: 0 }}
+              mr={{ sm: 4 }}
+              fontSize={{ base: '0.75rem', sm: 'md' }}
+            >
               {session?.user.email ?? ''}
             </Text>
             <NavLink

components/admin/StoryCard.tsx

@@ -22,7 +22,12 @@ interface UpdateStoryProps {
   contentWarning: boolean
 }
 
-const updateStory = async ({ id, approved, deleted, contentWarning }: UpdateStoryProps) => {
+const updateStory = async ({
+  id,
+  approved,
+  deleted,
+  contentWarning,
+}: UpdateStoryProps) => {
   const res = await fetch('/api/admin/update', {
     method: 'PATCH',
     headers: {
@@ -67,11 +72,19 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
   const riding = ridings?.[0]?.riding
 
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const [{ deleted, approved, contentWarning }, setCardStatus] = useState({ ...rest })
+  const [{ deleted, approved, contentWarning }, setCardStatus] = useState({
+    ...rest,
+  })
   const [interacted, setInteracted] = useState(false)
 
   const handleDeleteInteraction = async (props) => {
-    if (window.confirm(`Are you sure you want to ${props.deleted ? 'undelete' : 'delete'} this?`)) {
+    if (
+      window.confirm(
+        `Are you sure you want to ${
+          props.deleted ? 'undelete' : 'delete'
+        } this?`
+      )
+    ) {
       const { approved, deleted, ...rest } = await updateStory(props)
       setCardStatus({ approved, deleted, ...rest })
       setInteracted(approved || deleted)
@@ -92,7 +105,11 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
           <Text mt={4} noOfLines={!filteredView || isOpen ? null : 4}>
             {content}
           </Text>
-          <Flex justifyContent={'flex-end'} pt={2} display={filteredView ? 'flex' : 'none'}>
+          <Flex
+            justifyContent={'flex-end'}
+            pt={2}
+            display={filteredView ? 'flex' : 'none'}
+          >
             <Button
               textAlign={'right'}
               size={'sm'}
@@ -103,7 +120,12 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
             </Button>
           </Flex>
         </Box>
-        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} p={5} bg={'gray.100'}>
+        <SimpleGrid
+          columns={{ base: 1, md: 2 }}
+          spacing={4}
+          p={5}
+          bg={'gray.100'}
+        >
           <Box>
             <Label>Display Name and Postal Code</Label>
             <Text>
@@ -133,14 +155,17 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
           </Box>
           <Box>
             <Label>MPP and Riding</Label>
-            <Text>{riding ? `${riding.mppName}, ${riding.name}` : 'Unknown'}</Text>
+            <Text>
+              {riding ? `${riding.mppName}, ${riding.name}` : 'Unknown'}
+            </Text>
           </Box>
           <Box>
             <Label>Submission Date</Label>
             <Text>
-              {new Intl.DateTimeFormat('en-CA', { dateStyle: 'long', timeStyle: 'short' }).format(
-                createdAt
-              )}
+              {new Intl.DateTimeFormat('en-CA', {
+                dateStyle: 'long',
+                timeStyle: 'short',
+              }).format(createdAt)}
             </Text>
           </Box>
           <Box>
@@ -150,7 +175,11 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
           <Box>
             <Label>ID and Link</Label>
             <Text>
-              <SimpleLink href={`/story/${id}`} textDecoration={'underline'} target="_blank">
+              <SimpleLink
+                href={`/story/${id}`}
+                textDecoration={'underline'}
+                target="_blank"
+              >
                 {id}
               </SimpleLink>
             </Text>
@@ -173,7 +202,12 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
             type="button"
             bg={'white'}
             onClick={() =>
-              handleDeleteInteraction({ id, approved: false, deleted: !deleted, contentWarning })
+              handleDeleteInteraction({
+                id,
+                approved: false,
+                deleted: !deleted,
+                contentWarning,
+              })
             }
           >
             {deleted ? 'Undelete' : 'Delete'}
@@ -182,7 +216,12 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
             colorScheme="blue"
             type="button"
             onClick={() =>
-              handleInteraction({ id, approved: !approved, deleted: false, contentWarning })
+              handleInteraction({
+                id,
+                approved: !approved,
+                deleted: false,
+                contentWarning,
+              })
             }
           >
             {approved ? 'Unapprove' : 'Approve'}
@@ -193,7 +232,12 @@ export default function StoryCard({ story, filteredView }: StoryCardProps) {
             type="button"
             bg={'white'}
             onClick={() =>
-              handleInteraction({ id, approved, deleted, contentWarning: !contentWarning })
+              handleInteraction({
+                id,
+                approved,
+                deleted,
+                contentWarning: !contentWarning,
+              })
             }
           >
             {contentWarning ? 'Remove Content Warning' : 'Add Content Warning'}

components/common/ContentBox.tsx

@@ -2,11 +2,21 @@ import { Box, BoxProps, useTheme } from '@chakra-ui/react'
 
 export const RESPONSIVE_PADDING = [4, null, 8]
 
-export default function ContentBox({ children, py = RESPONSIVE_PADDING, ...props }: BoxProps) {
+export default function ContentBox({
+  children,
+  py = RESPONSIVE_PADDING,
+  ...props
+}: BoxProps) {
   const { breakpoints } = useTheme()
 
   return (
-    <Box maxW={breakpoints.lg} m="auto" px={RESPONSIVE_PADDING} py={py} {...props}>
+    <Box
+      maxW={breakpoints.lg}
+      m="auto"
+      px={RESPONSIVE_PADDING}
+      py={py}
+      {...props}
+    >
       {children}
     </Box>
   )

components/common/CustomShareContainer.tsx

@@ -19,7 +19,11 @@ export default function CustomShareContainer({
   onClick,
 }: CustomShareContainerProps) {
   return (
-    <button style={{ ...defaultStyling, ...style }} onClick={onClick} aria-label="share">
+    <button
+      style={{ ...defaultStyling, ...style }}
+      onClick={onClick}
+      aria-label="share"
+    >
       {children}
     </button>
   )

components/common/FloatingRibbon.tsx

@@ -1,4 +1,9 @@
-import { Button as BaseButton, ButtonProps, Center, CenterProps } from '@chakra-ui/react'
+import {
+  Button as BaseButton,
+  ButtonProps,
+  Center,
+  CenterProps,
+} from '@chakra-ui/react'
 import { RESPONSIVE_PADDING } from './ContentBox'
 
 export default function FloatingRibbon({ children }: CenterProps) {

components/common/Footer.tsx

@@ -13,7 +13,11 @@ export default function Footer() {
       textAlign="left"
     >
       <Container centerContent maxW="container.sm">
-        <SimpleGrid columns={[2, 3]} width="100%" textAlign={['left', 'center']}>
+        <SimpleGrid
+          columns={[2, 3]}
+          width="100%"
+          textAlign={['left', 'center']}
+        >
           <SimpleLink href="/" padding={1} marginBottom={1}>
             Home
           </SimpleLink>
@@ -47,7 +51,11 @@ export default function Footer() {
           >
             Analytics
           </SimpleLink>
-          <SimpleLink href="mailto:[email protected]" padding={1} marginBottom={1}>
+          <SimpleLink
+            href="mailto:[email protected]"
+            padding={1}
+            marginBottom={1}
+          >
             Email Us
           </SimpleLink>
           <SimpleLink
@@ -60,7 +68,11 @@ export default function Footer() {
         </SimpleGrid>
         <Text as="strong" paddingTop={4} mb={4}>
           Made with love by Canadians{' '}
-          <span role="img" aria-label="heart" style={{ filter: 'brightness(0) invert(1)' }}>
+          <span
+            role="img"
+            aria-label="heart"
+            style={{ filter: 'brightness(0) invert(1)' }}
+          >
             ❤️
           </span>
         </Text>