working on db

Author: nauvalazhar

.editorconfig

@@ -0,0 +1,10 @@
+# Top-most EditorConfig file
+root = true
+
+# Set default charset to UTF-8
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+
+# End of EditorConfig file

.prettier.config.js

@@ -17,6 +17,6 @@ module.exports = {
   importOrderSortSpecifiers: true,
   plugins: [
     require('prettier-plugin-tailwindcss'),
-    require('@ianvs/prettier-plugin-sort-imports')
-  ]
+    require('@ianvs/prettier-plugin-sort-imports'),
+  ],
 };

app/auth/[...nextAuth]/route.ts

@@ -0,0 +1,7 @@
+import auth from 'auth';
+
+export const GET = () => {
+  return Response.json({
+    message: 'Hello, World!',
+  });
+};

app/auth/callback/route.ts

@@ -0,0 +1,68 @@
+import { encryptData, getSession } from 'lib/session';
+import { redirect } from 'next/navigation';
+import { createUser, findOrCreateUser, findUserByEmail } from 'services/user';
+
+export async function GET(request: Request) {
+  const session = await getSession();
+
+  const query = new URL(request.url).searchParams;
+  const code = query.get('code');
+
+  const accessToken = await fetch(
+    'https://github.com/login/oauth/access_token',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify({
+        client_id: process.env.GITHUB_ID,
+        client_secret: process.env.GITHUB_SECRET,
+        code,
+      }),
+    }
+  );
+
+  const result = await accessToken.json();
+
+  if (result.error) {
+    return new Response(result.error, { status: 400 });
+  }
+
+  const resultUser = await fetch('https://api.github.com/user', {
+    headers: {
+      Authorization: `Bearer ${result.access_token}`,
+    },
+  });
+  const userInfo = await resultUser.json();
+
+  const resultEmails = await fetch('https://api.github.com/user/emails', {
+    headers: {
+      Authorization: `Bearer ${result.access_token}`,
+    },
+  });
+  const emails = await resultEmails.json();
+
+  const [user] = await findOrCreateUser(userInfo.id, {
+    username: userInfo.login,
+    email: emails.find((email: any) => email.primary)?.email,
+    name: userInfo.name || userInfo.login,
+    bio: userInfo.bio,
+    avatar: userInfo.avatar_url,
+    githubId: userInfo.id,
+    hireable: userInfo.hireable,
+    refreshToken: await encryptData({
+      token: result.refresh_token,
+      expires: result.refresh_token_expires_in,
+    }),
+  });
+
+  session.token = result.access_token;
+  session.expires = result.expires_in;
+  session.userId = user.id;
+
+  await session.save();
+
+  redirect('/');
+}

app/auth/login/page.tsx

@@ -0,0 +1,10 @@
+export default function Page() {
+  return (
+    <div>
+      <a
+        href={`https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_ID}`}>
+        Login with github
+      </a>
+    </div>
+  );
+}

app/challenge/[slug]/page.tsx

@@ -1,34 +1,21 @@
 import clsx from 'clsx';
+import FigmaPreview from 'components/FigmaPreview';
+import Meta from 'components/Meta';
+import challenges from 'data/challenges';
 import { Interfaces } from 'doodle-icons';
 import { ExternalLink } from 'lucide-react';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
-
-import challenges from 'data/challenges';
-
-import FigmaPreview from 'components/FigmaPreview';
-import Meta from 'components/Meta';
+import { getChallengeBySlug } from 'services/challenge-service';
 
 type Params = {
   params: {
     slug: string;
   };
 };
 
-export async function generateStaticParams() {
-  return challenges.map(challenge => ({
-    slug: challenge.slug
-  }));
-}
-
-async function getChallenge(slug: string) {
-  const challenge = challenges.find(c => c.slug === slug);
-
-  return challenge;
-}
-
 async function Page({ params: { slug } }: Params) {
-  const challenge = await getChallenge(slug);
+  const [challenge] = await getChallengeBySlug({ slug });
 
   if (!challenge) {
     notFound();
@@ -37,9 +24,8 @@ async function Page({ params: { slug } }: Params) {
   return (
     <div
       style={{
-        '--accent': challenge.accent
-      }}
-    >
+        '--accent': challenge.accent,
+      }}>
       <FigmaPreview src={challenge.figma} />
 
       <div className="flex flex-wrap gap-10 lg:flex-nowrap">
@@ -49,8 +35,7 @@ async function Page({ params: { slug } }: Params) {
               'relative p-10 lg:p-20',
               'border-4 border-black bg-[var(--accent)]',
               'shadow-solid'
-            )}
-          >
+            )}>
             <h1 className="font-display text-2xl lg:text-4xl">
               {challenge.name}
             </h1>
@@ -90,14 +75,12 @@ async function Page({ params: { slug } }: Params) {
               'relative px-10 py-10',
               'border-4 border-black bg-brand',
               'shadow-solid'
-            )}
-          >
+            )}>
             <a
               href={challenge.figma}
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center justify-center gap-4 border-2 border-black bg-[#2AE876] py-4 text-2xl"
-            >
+              className="flex items-center justify-center gap-4 border-2 border-black bg-[#2AE876] py-4 text-2xl">
               <Interfaces.Download
                 width={24}
                 height={24}
@@ -110,8 +93,7 @@ async function Page({ params: { slug } }: Params) {
               <a
                 href="https://creativecommons.org/licenses/by/4.0/"
                 target="_blank"
-                rel="noreferrer"
-              >
+                rel="noreferrer">
                 Read The License
               </a>
             </p>
@@ -122,8 +104,7 @@ async function Page({ params: { slug } }: Params) {
               'border-4 border-black bg-[#00FABE]',
               'space-y-8',
               'shadow-solid'
-            )}
-          >
+            )}>
             <Meta
               icon={Interfaces.Dashboard2}
               name="Difficulty"
@@ -139,13 +120,12 @@ async function Page({ params: { slug } }: Params) {
             className={clsx(
               'px-10 py-10 border-4 border-black',
               'bg-[#FF508F] shadow-solid'
-            )}
-          >
+            )}>
             <h2 className="text-2xl font-semibold">
-              UI {challenge.designer.length > 1 ? 'designers' : 'designer'}
+              UI {challenge.designers.length > 1 ? 'designers' : 'designer'}
             </h2>
             <div className="mt-4">
-              {challenge.designer.map(designer => (
+              {challenge.designers.map((designer) => (
                 <div key={designer.name} className="flex items-center mt-4">
                   <Image
                     src={designer.avatar}
@@ -159,11 +139,10 @@ async function Page({ params: { slug } }: Params) {
                       {designer.name}
                     </h3>
                     <a
-                      href={designer.url}
+                      href={designer.links[0].link}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center hover:underline"
-                    >
+                      className="inline-flex items-center hover:underline">
                       Visit Profile <ExternalLink width={18} className="ml-2" />
                     </a>
                   </div>

app/challenges/page.tsx

@@ -0,0 +1,56 @@
+import CategoriesSelector from 'components/CategoriesSelector';
+import Challenges from 'components/Challenges';
+import DifficultiesSelector from 'components/DifficultiesSelector';
+import LoadMore from 'components/LoadMore';
+import {
+  type GetChallengesParams,
+  getChallenges,
+} from 'services/challenge-service';
+
+async function loadMore(offset, params) {
+  'use server';
+
+  const { challenges } = await getChallenges({
+    ...params,
+    offset,
+  });
+
+  return <Challenges challenges={challenges} />;
+}
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const dataParams: GetChallengesParams = {
+    where: {
+      difficultyId: Number(searchParams.difficulty) || undefined,
+      categoryId: Number(searchParams.category) || undefined,
+    },
+  };
+
+  const { challenges, limit, total } = await getChallenges(dataParams);
+
+  return (
+    <section className="flex flex-col">
+      <div className="flex flex-wrap items-center gap-3 lg:gap-5 mb-10">
+        <div>
+          <DifficultiesSelector />
+        </div>
+        <div>
+          <CategoriesSelector />
+        </div>
+      </div>
+
+      <LoadMore
+        loadMoreAction={loadMore}
+        loadMoreParams={dataParams}
+        limit={limit}
+        total={total}
+        className="space-y-10">
+        <Challenges challenges={challenges} />
+      </LoadMore>
+    </section>
+  );
+}

app/layout.tsx

@@ -1,23 +1,21 @@
 import 'tailwindcss/tailwind.css';
-
-import { Fredoka_One, Patrick_Hand } from '@next/font/google';
 import clsx from 'clsx';
-import { PropsWithChildren } from 'react';
-
 import { AnalyticsWrapper } from 'components/Analytics';
 import Header from 'components/Header';
 import ScrollToTop from 'components/ScrollToTop';
+import { Fredoka, Patrick_Hand } from 'next/font/google';
+import { PropsWithChildren } from 'react';
 
-const fontDisplay = Fredoka_One({
+const fontDisplay = Fredoka({
   variable: '--font-display',
   weight: '400',
-  subsets: ['latin']
+  subsets: ['latin'],
 });
 
 const fontSans = Patrick_Hand({
   variable: '--font-sans',
   weight: '400',
-  subsets: ['latin']
+  subsets: ['latin'],
 });
 
 export default function RootLayout({ children }: PropsWithChildren) {
@@ -26,9 +24,8 @@ export default function RootLayout({ children }: PropsWithChildren) {
       lang="en"
       className={clsx(fontDisplay.variable, fontSans.variable)}
       style={{
-        '--primary-blue': '#1F4290'
-      }}
-    >
+        '--primary-blue': '#1F4290',
+      }}>
       <head />
       <body className="bg-[var(--primary-blue)]">
         <main className="mx-auto px-6 pt-10 pb-40 lg:py-20 xl:px-0 xl:w-[1140px]">
@@ -40,8 +37,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
               href="https://twitter.com/mhdnauvalazhar"
               target="_blank"
               className="border-brand border-b-2"
-              rel="noreferrer"
-            >
+              rel="noreferrer">
               Nauval
             </a>
             <p>Powered by Vercel</p>

app/manual/page.tsx

@@ -1,14 +1,16 @@
 import clsx from 'clsx';
+import { getSession } from 'lib/session';
 
-export default function Page() {
+export default async function Page() {
+  const session = await getSession();
+  console.log(session);
   return (
     <div
       className={clsx(
         'relative p-10 lg:p-20',
         'border-4 border-black bg-brand',
         'shadow-solid'
-      )}
-    >
+      )}>
       <h1 className="font-display text-2xl lg:text-4xl">Manual</h1>
       <div className="mt-4 space-y-6 text-xl lg:text-2xl">
         <h2 className="font-display text-xl lg:text-2xl">Motivation</h2>