Almost finishing with implementation (#47)

Author: fforres

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "editor.formatOnSave": true,
-  "editor.formatOnPaste": true
-}
+  "editor.formatOnPaste": false
+}

package-lock.json

@@ -28,8 +28,7 @@
     "@tanstack/react-query-devtools": "^4.11.0",
     "csstype": "^3.0.11",
     "feather-icons": "^4.29.0",
-    "feather-icons-react": "^0.5.0",
-    "framer-motion": "^6.3.3",
+    "framer-motion": "^7.6.4",
     "google-map-react": "^2.2.0",
     "graphql": "^16.3.0",
     "jotai": "^1.8.5",
@@ -40,6 +39,7 @@
     "react": "^18.2.0",
     "react-div-100vh": "^0.7.0",
     "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
     "react-hook-form": "^7.32.0",
     "react-markdown": "^8.0.3",
     "react-portal": "^4.2.2",

package.json

@@ -2,9 +2,10 @@ import createCache from "@emotion/cache";
 import { CacheProvider, ThemeProvider } from "@emotion/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Provider as JotaiProvider } from "jotai";
+import { NextPage } from "next";
 import type { AppProps } from "next/app";
 import dynamic from "next/dynamic";
-import { lazy, Suspense } from "react";
+import { lazy, ReactElement, ReactNode, Suspense } from "react";
 import { Provider } from "urql";
 import { urlQlient } from "../src/graphql/urql";
 import { queryClient } from "../src/helpers/API";
@@ -24,8 +25,17 @@ const value = {
     fetch(resource, init).then((res) => res.json()),
 };
 
-function MyApp(appProps: AppProps) {
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+function MyApp(appProps: AppPropsWithLayout) {
   const { Component, pageProps } = appProps;
+  const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
     <JotaiProvider>
@@ -37,7 +47,7 @@ function MyApp(appProps: AppProps) {
               <Suspense fallback={null}>
                 <WebSchema />
               </Suspense>
-              <Component {...pageProps} />
+              {getLayout(<Component {...pageProps} />)}
               <Suspense fallback={null}>
                 <ExtendedFooter />
               </Suspense>

pages/_app.tsx

@@ -29,13 +29,15 @@ const StyledBlackWrapp = styled.section`
 const ActuallyRun = () => {
   const { query, replace } = useRouter();
   const [error, setError] = useState(false);
-  const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
+  const [, setAccessToken] = useAtom(accessTokenAtom);
   const mutation = useMutation(finishGithubLogin, {
     onSuccess: ({ token }) => {
-      console.log("token", { token });
       setAccessToken(token);
       replace("/tickets");
     },
+    onError: () => {
+      // TODO: Handle On Error.
+    },
   });
 
   useEffect(() => {