Fix

Author: timmo001

next.config.js

@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(graphql|gql)$/,
+      exclude: /node_modules/,
+      loader: "graphql-tag/loader",
+    });
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -21,6 +21,7 @@
     "@mui/x-data-grid": "5.17.24",
     "@next/font": "13.1.6",
     "axios": "1.3.3",
+    "graphql": "16.6.0",
     "moment": "2.29.4",
     "next": "13.1.6",
     "react": "18.2.0",
@@ -34,7 +35,8 @@
     "@types/react-dom": "18.0.11",
     "eslint": "8.34.0",
     "eslint-config-next": "13.1.6",
+    "graphql-tag": "2.12.6",
     "prettier": "2.8.4",
     "typescript": "4.9.5"
   }
-}
+}

src/components/Context/Auth.tsx

@@ -5,7 +5,7 @@ import React, {
   useState,
 } from "react";
 
-import { OAuth2 as AuthEntity } from "lib/types/general";
+import { OAuth2 as AuthEntity } from "@/types/general";
 
 const AuthContext = createContext<AuthEntity | undefined>(undefined);
 const SetAuthContext = createContext<null | React.Dispatch<

src/components/Context/Repository.tsx

@@ -5,7 +5,7 @@ import React, {
   useState,
 } from "react";
 
-import { Repository as RepositoryEntity } from "lib/types/github";
+import { Repository as RepositoryEntity } from "@/types/github";
 
 const RepositoryContext = createContext<RepositoryEntity | undefined>(
   undefined

src/components/Context/User.tsx

@@ -5,7 +5,7 @@ import React, {
   useState,
 } from "react";
 
-import { User as UserEntity } from "lib/types/github";
+import { User as UserEntity } from "@/types/github";
 
 const UserContext = createContext<UserEntity | undefined>(undefined);
 const SetUserContext = createContext<null | React.Dispatch<

src/components/Context/Viewer.tsx

@@ -5,7 +5,7 @@ import React, {
   useState,
 } from "react";
 
-import { Viewer as ViewerEntity } from "lib/types/github";
+import { Viewer as ViewerEntity } from "@/types/github";
 
 const ViewerContext = createContext<ViewerEntity | undefined>(undefined);
 const SetViewerContext = createContext<null | React.Dispatch<

src/components/Header.tsx

@@ -14,7 +14,7 @@ import { Icon } from "@mdi/react";
 import clsx from "clsx";
 
 import { useRepository } from "./Context/Repository";
-import useStyles from "assets/jss/components/header";
+import useStyles from "@/styles/jss/components/header";
 
 type ColorExpanded = PropTypes.Color | "transparent";
 
@@ -83,8 +83,7 @@ function Header(props: HeaderProps): ReactElement {
         [classes.absolute]: absolute,
         [classes.fixed]: fixed,
       })}
-      color={color}
-    >
+      color={color}>
       <Toolbar className={classes.container}>
         <Typography className={classes.title} component="div" variant="h4">
           {brand}
@@ -96,23 +95,20 @@ function Header(props: HeaderProps): ReactElement {
                 position: "absolute",
                 top: "calc(50% - 0.98rem)",
                 marginLeft: theme.spacing(4),
-              }}
-            >
+              }}>
               <a
                 href={repositoryData.owner.url}
                 rel="noreferrer"
                 target="_blank"
-                style={{ color: theme.palette.text.primary }}
-              >
+                style={{ color: theme.palette.text.primary }}>
                 {repositoryData?.owner?.login}
               </a>
               /
               <a
                 href={repositoryData.url}
                 rel="noreferrer"
                 target="_blank"
-                style={{ color: theme.palette.text.primary }}
-              >
+                style={{ color: theme.palette.text.primary }}>
                 {repositoryData?.name}
               </a>
             </Typography>
@@ -128,8 +124,7 @@ function Header(props: HeaderProps): ReactElement {
             color="inherit"
             aria-label="open drawer"
             size="large"
-            onClick={handleDrawerToggle}
-          >
+            onClick={handleDrawerToggle}>
             <Icon path={mdiMenu} size={1} />
           </IconButton>
         </Hidden>
@@ -142,8 +137,7 @@ function Header(props: HeaderProps): ReactElement {
           classes={{
             paper: classes.drawerPaper,
           }}
-          onClose={handleDrawerToggle}
-        >
+          onClose={handleDrawerToggle}>
           <div className={classes.appResponsive}>{rightLinks}</div>
         </Drawer>
       </Hidden>

src/components/HeaderLinks.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 
 import { useViewer } from "./Context/Viewer";
 import SetRepository from "./SetRepository";
-import useStyles from "assets/jss/components/headerLinks";
+import useStyles from "@/styles/jss/components/headerLinks";
 
 function HeaderLinks(): ReactElement {
   const [setRepository, setSetRepository] = useState<boolean>(false);
@@ -39,8 +39,7 @@ function HeaderLinks(): ReactElement {
               }}
               onMouseLeave={() => {
                 setHoveringLoginButton(false);
-              }}
-            >
+              }}>
               <span className={classes.listItemText}>
                 {hoveringLoginButton
                   ? "Log out of GitHub"
@@ -57,8 +56,7 @@ function HeaderLinks(): ReactElement {
             <Button
               variant="outlined"
               className={classes.navLink}
-              onClick={handleSetRepository}
-            >
+              onClick={handleSetRepository}>
               <span className={classes.listItemText}>Set Repository</span>
             </Button>
           </ListItem>
@@ -71,8 +69,7 @@ function HeaderLinks(): ReactElement {
             href={{
               pathname: "/",
               query: router.query,
-            }}
-          >
+            }}>
             <Button variant="text" className={classes.navLink}>
               <span className={classes.listItemText}>Dashboard</span>
             </Button>

src/components/Image.tsx

@@ -10,7 +10,7 @@ import {
 } from "@mui/material";
 
 import { MediaType } from "./Types";
-import useStyles from "assets/jss/components/layout";
+import useStyles from "@/styles/jss/components/layout";
 
 interface SliderProps {
   hideCaption?: boolean;
@@ -38,8 +38,7 @@ function Image({
     <Fragment>
       <ButtonBase
         className={!showAsImage ? classes.galleryItem : ""}
-        onClick={openMediaDialog}
-      >
+        onClick={openMediaDialog}>
         <Card className={classes.galleryItemCard} elevation={hidePaper ? 0 : 1}>
           {showAsImage ? (
             <img src={media.url} alt={media.alternativeText} />
@@ -64,8 +63,7 @@ function Image({
         scroll="body"
         open={showDialog}
         onClick={closeMediaDialog}
-        onClose={closeMediaDialog}
-      >
+        onClose={closeMediaDialog}>
         {showDialog ? (
           <Fragment>
             {!hideTitle && media.alternativeText ? (

src/components/MoveIteration.tsx

@@ -12,7 +12,7 @@ import {
   useTheme,
 } from "@mui/material";
 
-import { Picker } from "lib/types/general";
+import { Picker } from "@/types/general";
 
 interface MoveIterationProps {
   iterationsPicker: Array<Picker>;
@@ -39,8 +39,7 @@ function MoveIteration({
       maxWidth="sm"
       scroll="body"
       open={newIteration ? true : false}
-      onClose={handleCloseMoveIteration}
-    >
+      onClose={handleCloseMoveIteration}>
       <DialogTitle>Move iteration</DialogTitle>
       <DialogContent>
         <DialogContentText>
@@ -69,8 +68,7 @@ function MoveIteration({
         <Button
           onClick={() => {
             handleMoveIterationConfirm(newIteration);
-          }}
-        >
+          }}>
           Move
         </Button>
       </DialogActions>