Guilds, API's

.prettierrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   singleQuote: true,
-  trailingComma: "all",
+  trailingComma: 'all',
+  endOfLine: 'auto',
 };

components/Dashboard/GuildsInsideContainer.js

@@ -1,10 +1,14 @@
-import "twin.macro";
+import 'twin.macro';
+
+const React = require('react');
 
 export default function GuildsInsideContainer(props) {
+  const { guilds } = props;
+
   return (
     <div tw="flex flex-col items-center p-12 justify-between bg-Light h-64 w-80 m-4 rounded shadow-xl text-center ease-in-out transform hover:scale-110 transition duration-300">
       <h1 tw="text-2xl font-bold m-2">Guild inside</h1>
-      <h1 tw="text-2xl font-bold m-2">{props.guilds.length}</h1>
+      <h1 tw="text-2xl font-bold m-2">{guilds.length}</h1>
     </div>
   );
 }

components/Dashboard/GuildsOwnedContainer.js

@@ -1,10 +1,13 @@
-import "twin.macro";
+import 'twin.macro';
+
+const React = require('react');
 
 export default function GuildsOwnedContainer(props) {
+  const { matches } = props;
   return (
     <div tw="flex flex-col items-center p-12 justify-between bg-Light h-64 w-80 m-4 rounded shadow-xl text-center ease-in-out transform hover:scale-110 transition duration-300">
       <h1 tw="text-2xl font-bold m-2">Guilds owned</h1>
-      <h1 tw="text-2xl font-bold m-2">{props.matches.length}</h1>
+      <h1 tw="text-2xl font-bold m-2">{matches.length}</h1>
     </div>
   );
 }

components/Dropdown.js

@@ -1,18 +1,10 @@
 import React from 'react';
-import Popper from 'popper.js';
-import { useRouter } from 'next/router';
-import { signIn, signOut, useSession, getSession } from 'next-auth/client';
+import { signOut } from 'next-auth/client';
 import 'twin.macro';
 
-const Dropdown = ({ color }) => {
-  const router = useRouter();
+const Dropdown = () => {
   // dropdown props
   const popoverDropdownRef = React.createRef();
-  // bg colors
-  let bgColor;
-  color === 'white'
-    ? (bgColor = 'bg-gray-800')
-    : (bgColor = 'bg-' + color + '-500');
 
   return (
     <>
@@ -46,13 +38,13 @@ const Dropdown = ({ color }) => {
                 Something else here
               </a>
               <div tw="h-0 my-2 border border-solid border-t-0 border-gray-900 opacity-25" />
-              <a
-                href="#"
-                tw="text-sm py-2 px-4 font-normal block w-full  bg-transparent hover:bg-Darkest"
+              <button
+                tw="text-sm py-2 px-4 font-normal block w-full bg-transparent hover:bg-Darkest"
                 onClick={signOut}
+                type="button"
               >
                 Logout
-              </a>
+              </button>
             </div>
           </div>
         </div>

components/Guilds/Guild.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import 'twin.macro';
+
+export default function Guild(props) {
+  const { guild } = props;
+  return (
+    <div tw="bg-Dark ease-in-out transform w-full transition duration-300 rounded shadow-xl flex flex-col justify-center p-12 m-6 items-center">
+      <img
+        src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}`}
+        tw="w-20 h-20 rounded-full"
+        onError={(e) => {
+          e.target.onerror = null;
+          e.target.src = 'https://i.imgur.com/2O78wUO.jpg';
+        }}
+        alt="userIMG"
+      />
+      <div tw="text-center">
+        <h1 tw="text-2xl font-bold m-2 ">{guild.name}</h1>
+        <h1 tw="text-lg m-2 ">{guild.id}</h1>
+      </div>
+    </div>
+  );
+}

components/Guilds/Table.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import 'twin.macro';
+import Guild from './Guild';
+
+export default function UserContainer(props) {
+  const { guilds } = props;
+
+  const guildItem = guilds.map((guild) => (
+    <Guild key={guild.id} guild={guild} />
+  ));
+
+  return (
+    <div tw="flex flex-col items-center p-12 justify-between bg-Darkest h-96 w-10/12 m-4 rounded shadow-xl text-center overflow-y-scroll">
+      {guildItem}
+    </div>
+  );
+}

components/Navbar.js

@@ -1,52 +1,68 @@
-import Dropdown from './Dropdown';
 import React from 'react';
 import { useRouter } from 'next/router';
 import 'twin.macro';
 import { useSession } from 'next-auth/client';
+import Dropdown from './Dropdown';
 
 export default function Navbar(props) {
   const router = useRouter();
-  const [session, loading] = useSession();
+  const [session] = useSession();
+
+  const { page, setShowResults, showResults } = props;
+
   return (
     <>
       {session && (
         <>
           <div tw="flex max-w-full justify-between h-24 py-4 px-6 bg-Light">
             <nav tw="flex justify-evenly items-center">
-              <h1 tw="text-xl mx-2 font-bold">{props.page}</h1>
+              <h1 tw="text-xl mx-2 font-bold">{page}</h1>
               <a
                 tw="mx-2 px-4 py-2 bg-Dark hover:bg-Darkest font-bold rounded cursor-pointer md:block hidden"
                 href="/"
               >
                 Home
               </a>
-              <a tw="mx-2 px-4 py-2 bg-Dark hover:bg-Darkest font-bold rounded cursor-pointer md:block hidden">
+              <a
+                tw="mx-2 px-4 py-2 bg-Dark hover:bg-Darkest font-bold rounded cursor-pointer md:block hidden"
+                href="/dashboard"
+              >
+                Dashboard
+              </a>
+              <a
+                tw="mx-2 px-4 py-2 bg-Dark hover:bg-Darkest font-bold rounded cursor-pointer md:block hidden"
+                href="/dashboard/guilds"
+              >
                 Guilds
               </a>
             </nav>
             <div
-              tw="flex justify-end items-center py-3 px-4 hover:bg-Darkest cursor-pointer rounded"
-              onClick={props.setShowResults}
+              tw="flex justify-end items-center py-3 px-4 outline-none hover:bg-Darkest cursor-pointer rounded"
+              onClick={setShowResults}
+              onKeyPress={setShowResults}
+              role="button"
+              tabIndex={0}
             >
               <img
-                src={props.session.user.image}
+                src={session.user.image}
                 tw="w-8 h-8 rounded-full mx-2"
                 onError={(e) => {
                   e.target.onerror = null;
                   e.target.src = 'https://i.imgur.com/2O78wUO.jpg';
                 }}
+                alt="userIMG"
               />
-              <h1 tw="h-8 text-xl font-bold">{props.session.user.name}</h1>
+              <h1 tw="h-8 text-xl font-bold">{session.user.name}</h1>
             </div>
-            {props.showResults ? <Dropdown /> : null}
+            {showResults ? <Dropdown /> : null}
           </div>
         </>
       )}
       {!session && (
         <>
           <div tw="flex max-w-full  justify-between h-24 py-4 px-6 bg-Light">
             <nav tw="flex justify-evenly items-center">
-              <h1 tw="text-xl mx-2 font-bold">{props.page}</h1>
+              <h1 tw="text-xl mx-2 font-bold">{page}</h1>
               <a
                 tw="mx-2 px-4 py-2 bg-Dark hover:bg-Darkest font-bold rounded cursor-pointer md:block hidden"
                 href="/"
@@ -57,6 +73,9 @@ export default function Navbar(props) {
             <div
               tw="flex justify-end items-center py-3 px-6 bg-Dark hover:bg-Darkest cursor-pointer rounded"
               onClick={() => router.push('/auth/signin')}
+              onKeyPress={router.push('/auth/signin')}
+              role="button"
+              tabIndex={0}
             >
               <h1 tw="h-8 text-xl font-bold">Login</h1>
             </div>

components/UserContainer.js

@@ -1,20 +1,24 @@
-import React from "react";
-import "twin.macro";
+import React from 'react';
+import 'twin.macro';
 
 export default function UserContainer(props) {
+  const { session } = props;
+  const { user } = session;
+
   return (
     <div tw="flex flex-col items-center p-12 justify-between bg-Light h-64 w-80 m-4 rounded shadow-xl text-center ease-in-out transform hover:scale-110 transition duration-300">
       <img
-        src={props.session.user.image}
+        src={user.image}
         tw="w-20 h-20 rounded-full mx-2"
         onError={(e) => {
           e.target.onerror = null;
-          e.target.src = "https://i.imgur.com/2O78wUO.jpg";
+          e.target.src = 'https://i.imgur.com/2O78wUO.jpg';
         }}
+        alt="userIMG"
       />
       <h1 tw="text-2xl font-bold m-2">
-        {props.session.user.name}
-        <span tw="text-sm">#{props.session.user.discriminator}</span>
+        {user.name}
+        <span tw="text-sm">#{user.discriminator}</span>
       </h1>
     </div>
   );

middlewares/session.js

@@ -1,5 +1,5 @@
-import session from "express-session";
-import connectMongo from "connect-mongo";
+import session from 'express-session';
+import connectMongo from 'connect-mongo';
 
 const MongoStore = connectMongo(session);
 

next.config.js

@@ -1,9 +1,11 @@
-const withCSS = require("@zeit/next-css");
+const withCSS = require('@zeit/next-css');
+
 module.exports = withCSS({
   webpack: (config, { isServer }) => {
     // Fixes npm packages that depend on `fs` module
     if (!isServer) {
-      config.node = { fs: "empty" };
+      // eslint-disable-next-line no-param-reassign
+      config.node = { fs: 'empty' };
     }
 
     return config;

package.json

@@ -17,13 +17,14 @@
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-react": "^7.21.5",
+    "express-session": "^1.17.1",
     "mongodb": "^3.6.3",
     "next": "10.0.3",
     "next-auth": "^3.1.0",
     "next-connect": "^0.9.1",
-    "popper.js": "^1.16.1",
     "prettier": "^2.2.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",

pages/_app.js

@@ -1,5 +1,7 @@
-import { GlobalStyles } from "twin.macro";
-import { Provider } from "next-auth/client";
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { GlobalStyles } from 'twin.macro';
+import { Provider } from 'next-auth/client';
 
 function App({ Component, pageProps }) {
   return (

pages/_document.js

@@ -1,5 +1,7 @@
-import Document from "next/document";
-import { ServerStyleSheet } from "styled-components";
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import Document from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {

pages/api/auth/[...nextauth].js

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import NextAuth from 'next-auth';
 import Providers from 'next-auth/providers';
 
@@ -17,13 +18,13 @@ const options = {
   },
   pages: {
     signIn: '/auth/signin',
+    error: '/auth/error',
   },
   secret: 'hfsrhgksgnsgnsghlwsngkljshgsh',
   callbacks: {
-    jwt: async (token, user, account, profile, isNewUser) => {
-      const isSignIn = user ? true : false;
+    jwt: async (token, user, account, profile) => {
       // Add auth_time to token on signin in
-      if (isSignIn) {
+      if (user) {
         token.accessToken = account.accessToken;
         token.id = profile.id;
         token.discriminator = profile.discriminator;
@@ -37,7 +38,7 @@ const options = {
 
       return session;
     },
-    redirect: async (url, _) => {
+    redirect: async (url) => {
       if (url === '/api/auth/signin') {
         return Promise.resolve('/dashboard');
       }