Skip to content

Commit

Permalink
Merge pull request #75 from masterHAWK99/refactor/update-next-and-router
Browse files Browse the repository at this point in the history
Update dependencies and use app router
  • Loading branch information
eduardconstantin authored Dec 7, 2023
2 parents 9973ea2 + 1e3c6f6 commit 4ffc862
Show file tree
Hide file tree
Showing 27 changed files with 3,544 additions and 4,081 deletions.
12 changes: 7 additions & 5 deletions pages/api/graphql.tsx → app/api/graphql/route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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: {
Expand All @@ -33,3 +33,5 @@ export default startServerAndCreateNextHandler(server, {
};
},
});

export { handler as GET, handler as POST };
14 changes: 6 additions & 8 deletions pages/api/og.tsx → app/api/og/route.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
13 changes: 13 additions & 0 deletions app/exam/layout.tsx
Original file line number Diff line number Diff line change
@@ -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}</>;
}
11 changes: 2 additions & 9 deletions pages/exam/index.tsx → app/exam/page.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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">
Expand Down
File renamed without changes.
53 changes: 53 additions & 0 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 3 additions & 6 deletions pages/index.tsx → app/page.tsx
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
13 changes: 13 additions & 0 deletions app/practice/layout.tsx
Original file line number Diff line number Diff line change
@@ -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}</>;
}
11 changes: 2 additions & 9 deletions pages/practice/index.tsx → app/practice/page.tsx
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -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);
Expand All @@ -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}
Expand Down
File renamed without changes.
File renamed without changes.
15 changes: 15 additions & 0 deletions components/ApolloProvider.tsx
Original file line number Diff line number Diff line change
@@ -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;
7 changes: 5 additions & 2 deletions components/TopNav.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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("/");
Expand Down
25 changes: 0 additions & 25 deletions components/layout.tsx

This file was deleted.

File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down
File renamed without changes.
27 changes: 27 additions & 0 deletions lib/graphql/resolvers.tsx
Original file line number Diff line number Diff line change
@@ -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;
File renamed without changes.
File renamed without changes
Loading

0 comments on commit 4ffc862

Please sign in to comment.