Merge pull request #75 from masterHAWK99/refactor/update-next-and-router

Update dependencies and use app router
eduardconstantin · Dec 7, 2023 · 4ffc862 · 4ffc862
2 parents 9973ea2 + 1e3c6f6
commit 4ffc862
Show file tree

Hide file tree

Showing 27 changed files with 3,544 additions and 4,081 deletions.
diff --git a/pages/api/graphql.tsx → app/api/graphql/route.ts b/pages/api/graphql.tsx → app/api/graphql/route.ts
@@ -2,10 +2,10 @@
 // import { QuestionsDataSource, LocalQuestionsDataSource } from "@azure-fundamentals/src/graphql/questionsDataSource";
 import { ApolloServer, BaseContext } from "@apollo/server";
 import { startServerAndCreateNextHandler } from "@as-integrations/next";
-import typeDefs from "@azure-fundamentals/src/graphql/schemas";
-import resolvers from "@azure-fundamentals/src/graphql/resolvers";
-import { RepoQuestionsDataSource } from "@azure-fundamentals/src/graphql/questionsDataSource";
-import { FetchQuestions } from "@azure-fundamentals/src/graphql/repoQuestions";
+import typeDefs from "@azure-fundamentals/lib/graphql/schemas";
+import resolvers from "@azure-fundamentals/lib/graphql/resolvers";
+import { RepoQuestionsDataSource } from "@azure-fundamentals/lib/graphql/questionsDataSource";
+import { FetchQuestions } from "@azure-fundamentals/lib/graphql/repoQuestions";
 
 interface ContextValue {
   dataSources: {
@@ -21,7 +21,7 @@ const server = new ApolloServer<ContextValue>({
 
 const questions = await FetchQuestions();
 
-export default startServerAndCreateNextHandler(server, {
+const handler = startServerAndCreateNextHandler(server, {
   context: async () => {
     return {
       dataSources: {
@@ -33,3 +33,5 @@ export default startServerAndCreateNextHandler(server, {
     };
   },
 });
+
+export { handler as GET, handler as POST };
diff --git a/pages/api/og.tsx → app/api/og/route.tsx b/pages/api/og.tsx → app/api/og/route.tsx
@@ -1,19 +1,17 @@
-import { ImageResponse } from "@vercel/og";
+import { ImageResponse } from "next/og";
 import { NextRequest } from "next/server";
 
-export const config = {
-  runtime: "edge",
-};
+export const runtime = "edge";
 
-export default function handler(req: NextRequest) {
+export async function GET(req: NextRequest) {
   try {
-    const { searchParams } = new URL(req.url);
+    const { searchParams } = req.nextUrl;
     const question = searchParams.get("question") ?? "My default title";
-    const width = Number(searchParams.get("width")) ?? 0;
+    const width = parseInt(searchParams.get("width") ?? "0");
 
     return new ImageResponse(
       (
-        <div tw="flex text-center w-full h-full bg-slate-800 items-center justify-center ">
+        <div tw="flex text-center w-full h-full bg-slate-800 items-center justify-center">
           <p
             tw={`px-8 ${
               width < 640 ? "text-3xl" : "text-2xl"

diff --git a/app/exam/layout.tsx b/app/exam/layout.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Azure Fundamentals - Exam",
+  openGraph: {
+    title: "Azure Fundamentals - Exam",
+  },
+};
+
+export default function ExamLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/pages/exam/index.tsx → app/exam/page.tsx b/pages/exam/index.tsx → app/exam/page.tsx
@@ -1,7 +1,8 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import type { NextPage } from "next";
 import { gql, useQuery } from "@apollo/client";
-import Head from "next/head";
 import useTimer from "@azure-fundamentals/hooks/useTimer";
 import { Button } from "@azure-fundamentals/components/Button";
 import QuizExamForm from "@azure-fundamentals/components/QuizExamForm";
@@ -85,14 +86,6 @@ const Exam: NextPage = () => {
 
   return (
     <div className="py-10 px-5 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
-      <Head>
-        <title>Azure Fundamentals - Exam</title>
-        <meta
-          property="og:title"
-          content="Azure Fundamentals - Exam"
-          key="title"
-        />
-      </Head>
       <div>
         <div className="px-2 sm:px-10 w-full flex flex-row justify-between items-center">
           <p className="text-white font-bold text-sm sm:text-2xl">

diff --git a/public/favicon.ico → app/favicon.ico b/public/favicon.ico → app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,53 @@
+import TopNav from "@azure-fundamentals/components/TopNav";
+import Footer from "../components/Footer";
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import "styles/globals.css";
+import Script from "next/script";
+import ApolloProvider from "@azure-fundamentals/components/ApolloProvider";
+
+export const metadata: Metadata = {
+  metadataBase: new URL("http://localhost:3000"),
+  title: "Azure Fundamentals",
+  openGraph: {
+    title: "Azure Fundamentals",
+  },
+};
+
+type RootLayoutProps = {
+  children: ReactNode;
+};
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+
+  return (
+    <html lang="en">
+      <body className="bg-slate-900">
+        <ApolloProvider>
+          <TopNav />
+          <main className="flex flex-col justify-between h-[calc(100vh-2.5rem-64px)]">
+            {children}
+            <Footer />
+          </main>
+          <Script
+            src={
+              "https://www.googletagmanager.com/gtag/js?id=" + GA_TRACKING_ID
+            }
+          />
+          <Script id="google-analytics">
+            {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+ 
+          gtag('config', '${GA_TRACKING_ID}', {
+            page_path: window.location.pathname,
+          });
+        `}
+          </Script>
+        </ApolloProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/pages/index.tsx → app/page.tsx b/pages/index.tsx → app/page.tsx
@@ -1,15 +1,12 @@
 import type { NextPage } from "next";
-import Head from "next/head";
 import ExamLink from "@azure-fundamentals/components/ExamLink";
 
 const Home: NextPage = () => {
   return (
     <div className="mx-auto w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
-      <Head>
-        <title>Azure Fundamentals</title>
-        <meta property="og:title" content="Azure Fundamentals" key="title" />
-      </Head>
-      <h2 className="text-white text-5xl text-leading font-bold uppercase mt-14">Welcome!</h2>
+      <h2 className="text-white text-5xl text-leading font-bold uppercase mt-14">
+        Welcome!
+      </h2>
       <p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
         Test your knowledge under pressure with our timed exam mode, or explore
         and master over 480 questions at your own pace with our practice mode.

diff --git a/app/practice/layout.tsx b/app/practice/layout.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Azure Fundamentals - Practice",
+  openGraph: {
+    title: "Azure Fundamentals - Practice",
+  },
+};
+
+export default function ExamLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/pages/practice/index.tsx → app/practice/page.tsx b/pages/practice/index.tsx → app/practice/page.tsx
@@ -1,7 +1,8 @@
+"use client";
+
 import React, { useState, useEffect } from "react";
 import { gql, useQuery } from "@apollo/client";
 import type { NextPage } from "next";
-import Head from "next/head";
 import QuizForm from "@azure-fundamentals/components/QuizForm";
 
 const questionQuery = gql`
@@ -42,10 +43,6 @@ const Practice: NextPage = () => {
     error: questionsError,
   } = useQuery(questionsQuery);
 
-  useEffect(() => {
-    console.log(questionsData);
-  }, [questionsData]);
-
   const handleNextQuestion = (questionNo: number) => {
     if (questionNo > 0 && questionNo - 1 < questionsData?.questions?.count) {
       setCurrentQuestionIndex(questionNo);
@@ -57,10 +54,6 @@ const Practice: NextPage = () => {
 
   return (
     <div className="py-10 px-5 sm:p-10 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
-      <Head>
-        <title>Azure Fundamentals - Practice</title>
-        <meta property="og:title" content="Azure Fundamentals - Practice" key="title" />
-      </Head>
       <QuizForm
         windowWidth={windowWidth}
         isLoading={loading || questionsLoading}

diff --git a/public/robots.txt → app/robots.txt b/public/robots.txt → app/robots.txt
diff --git a/public/sitemap.xml → app/sitemap.xml b/public/sitemap.xml → app/sitemap.xml
diff --git a/components/ApolloProvider.tsx b/components/ApolloProvider.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import client from "@azure-fundamentals/lib/graphql/apollo-client";
+import { ReactNode } from "react";
+import { ApolloProvider as NextApolloProvider } from "@apollo/client";
+
+type RootLayoutProps = {
+  children: ReactNode;
+};
+
+const ApolloProvider = ({ children }: RootLayoutProps) => {
+  return <NextApolloProvider client={client}>{children}</NextApolloProvider>;
+};
+
+export default ApolloProvider;
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
@@ -1,10 +1,13 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import GitHubButton from "react-github-btn";
 import HomeButton from "./HomeButton";
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 
 const TopNav = () => {
   const router = useRouter();
+  const pathname = usePathname();
   const [windowWidth, setWindowWidth] = useState<number>(0);
   useEffect(() => {
     setWindowWidth(window.innerWidth);
@@ -13,7 +16,7 @@ const TopNav = () => {
   return (
     <div className="h-16 mb-10 w-full px-3 border-b-[1px] border-slate-700 text-white flex justify-between items-center">
       <div className="flex items-center flex-col w-1/2">
-        {router.pathname !== "/" && (
+        {pathname !== "/" && (
           <HomeButton
             handleReturnToMainPage={() => {
               router.push("/");

diff --git a/components/layout.tsx b/components/layout.tsx
diff --git a/src/graphql/apollo-client.tsx → lib/graphql/apollo-client.tsx b/src/graphql/apollo-client.tsx → lib/graphql/apollo-client.tsx
diff --git a/src/graphql/cosmos-client.tsx → lib/graphql/cosmos-client.tsx b/src/graphql/cosmos-client.tsx → lib/graphql/cosmos-client.tsx
diff --git a/src/graphql/questionsDataSource.tsx → lib/graphql/questionsDataSource.tsx b/src/graphql/questionsDataSource.tsx → lib/graphql/questionsDataSource.tsx
@@ -14,7 +14,9 @@ export const QuestionsDataSource = (container: Container) => {
       };
 
       try {
-        const { resources: items } = await container.items.query(querySpec).fetchAll();
+        const { resources: items } = await container.items
+          .query(querySpec)
+          .fetchAll();
         return items[0];
       } catch (err) {
         throw new Error("Error: " + err);
@@ -26,7 +28,9 @@ export const QuestionsDataSource = (container: Container) => {
       };
 
       try {
-        const { resources: items } = await container.items.query(querySpec).fetchAll();
+        const { resources: items } = await container.items
+          .query(querySpec)
+          .fetchAll();
         return { count: items[0] };
       } catch (err) {
         throw new Error("Error: " + err);

diff --git a/src/graphql/repoQuestions.tsx → lib/graphql/repoQuestions.tsx b/src/graphql/repoQuestions.tsx → lib/graphql/repoQuestions.tsx
diff --git a/lib/graphql/resolvers.tsx b/lib/graphql/resolvers.tsx
@@ -0,0 +1,27 @@
+const resolvers = {
+  Query: {
+    questions: async (
+      _: unknown,
+      __: unknown,
+      { dataSources }: { dataSources: any },
+    ) => {
+      return await dataSources.questionsDB.getQuestions();
+    },
+    questionById: async (
+      _: unknown,
+      { id }: { id: string },
+      { dataSources }: { dataSources: any },
+    ) => {
+      return await dataSources.questionsDB.getQuestion(id);
+    },
+    randomQuestions: async (
+      _: unknown,
+      { range }: { range: number },
+      { dataSources }: { dataSources: any },
+    ) => {
+      return await dataSources.questionsDB.getRandomQuestions(range);
+    },
+  },
+};
+
+export default resolvers;
diff --git a/src/graphql/schemas.tsx → lib/graphql/schemas.tsx b/src/graphql/schemas.tsx → lib/graphql/schemas.tsx
diff --git a/src/images/POINTS.png → lib/images/POINTS.png b/src/images/POINTS.png → lib/images/POINTS.png