chore: 🚀 add eslint config and cleanups

Author: RossoMaguire

.eslintignore

@@ -0,0 +1,19 @@
+{
+  "extends": ["next/core-web-vitals", "eslint:recommended"],
+  "plugins": ["unused-imports"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "@next/next/no-img-element": "off",
+    "no-unused-vars": 1,
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  }
+}

.eslintrc.json

@@ -6,7 +6,8 @@
     "dev": "faust dev",
     "build": "faust build",
     "generate": "faust generatePossibleTypes",
-    "start": "faust start"
+    "start": "faust start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@apollo/client": "^3.6.6",
@@ -20,5 +21,10 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "sass": "^1.54.9"
+  },
+  "devDependencies": {
+    "eslint": "8.26.0",
+    "eslint-config-next": "13.0.1",
+    "eslint-plugin-unused-imports": "^2.0.0"
   }
 }

package.json

@@ -18,7 +18,8 @@ export default function Page(props) {
   });
   const title = props.title;
 
-  const { title: siteTitle, description: siteDescription } = data?.generalSettings;
+  const { title: siteTitle, description: siteDescription } =
+    data?.generalSettings ?? {};
   const primaryMenu = data?.headerMenuItems?.nodes ?? [];
   const footerMenu = data?.footerMenuItems?.nodes ?? [];
 
@@ -33,7 +34,7 @@ export default function Page(props) {
       <Main>
         <Container>
           <Hero title={title} />
-          <div className="text-center">
+          <div className='text-center'>
             <p>This page is utilizing the Next.js File based routes.</p>
             <code>pages/example.js</code>
           </div>
@@ -70,10 +71,13 @@ Page.query = gql`
 Page.variables = () => {
   return {
     headerLocation: MENUS.PRIMARY_LOCATION,
-    footerLocation: MENUS.FOOTER_LOCATION
+    footerLocation: MENUS.FOOTER_LOCATION,
   };
 };
 
 export function getStaticProps(ctx) {
-  return getNextStaticProps(ctx, {Page, props: {title: 'File Page Example'}});
+  return getNextStaticProps(ctx, {
+    Page,
+    props: { title: 'File Page Example' },
+  });
 }

pages/example.js

@@ -1,20 +1,13 @@
 export default function flatListToHierarchical(
   data = [],
-  {
-    idKey = 'id',
-    parentKey = 'parentId',
-    childrenKey = 'children'
-  } = {}
+  { idKey = 'id', parentKey = 'parentId', childrenKey = 'children' } = {}
 ) {
   const tree = [];
   const childrenOf = {};
 
   data.forEach((item) => {
-    const newItem = {...item};
-    const {
-      [idKey]: id,
-      [parentKey]: parentId = 0
-    } = newItem;
+    const newItem = { ...item };
+    const { [idKey]: id, [parentKey]: parentId = 0 } = newItem;
 
     childrenOf[id] = childrenOf[id] || [];
     newItem[childrenKey] = childrenOf[id];
@@ -25,4 +18,4 @@ export default function flatListToHierarchical(
   });
 
   return tree;
-};
+}

utilities/flatListToHierarchical.js

@@ -15,7 +15,7 @@ import {
 
 export default function Component(props) {
   const { title: siteTitle, description: siteDescription } =
-    props?.data?.generalSettings;
+    props?.data?.generalSettings ?? {};
   const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
   const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
   const { name, posts } = props.data.nodeByUri;
@@ -34,6 +34,7 @@ export default function Component(props) {
           <Container>
             {posts.edges.map((post) => (
               <Post
+                key={post.node.id}
                 title={post.node.title}
                 content={post.node.content}
                 date={post.node.date}

wp-templates/category.js

@@ -5,9 +5,7 @@ import {
   Header,
   Footer,
   Main,
-  Container,
   ContentWrapper,
-  EntryHeader,
   NavigationMenu,
   FeaturedImage,
   SEO,
@@ -20,10 +18,10 @@ export default function Component(props) {
   }
 
   const { title: siteTitle, description: siteDescription } =
-    props?.data?.generalSettings;
+    props?.data?.generalSettings ?? {};
   const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
   const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
-  const { title, content, featuredImage } = props?.data?.page ?? { title: '' };
+  const { content, featuredImage } = props?.data?.page ?? { title: '' };
 
   return (
     <>

wp-templates/page.js

@@ -20,7 +20,7 @@ export default function Component(props) {
   }
 
   const { title: siteTitle, description: siteDescription } =
-    props?.data?.generalSettings;
+    props?.data?.generalSettings ?? {};
   const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
   const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
   const { title, content, featuredImage, date, author } = props.data.post;

wp-templates/single.js

@@ -15,7 +15,7 @@ import {
 
 export default function Component(props) {
   const { title: siteTitle, description: siteDescription } =
-    props?.data?.generalSettings;
+    props?.data?.generalSettings ?? {};
   const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
   const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
   const { name, posts } = props.data.nodeByUri;
@@ -34,6 +34,7 @@ export default function Component(props) {
           <Container>
             {posts.edges.map((post) => (
               <Post
+                key={post.node.id}
                 title={post.node.title}
                 content={post.node.content}
                 date={post.node.date}