Merge pull request #13 from HereEast/refactor/refactor

refactor: Refactor

src/api-client/answers.ts

@@ -1,20 +1,14 @@
 import axios from "axios";
 
 import { IAnswer } from "~/models/Answer";
-import { IPerson } from "~/models/Person";
 
 export interface IFormDataProps {
   questionId: string;
   question: string;
   answer: string;
 }
 
-export interface IAnswerResult {
-  answers: IAnswer[];
-  person: IPerson;
-}
-
-// SUBMIT
+// SUBMIT ANSWERS
 export async function submitAnswers(formData: IFormDataProps[]) {
   if (!formData.length) {
     throw new Error("Input data length is 0.");
@@ -43,12 +37,10 @@ export async function submitAnswers(formData: IFormDataProps[]) {
   }
 }
 
-// GET BY SLUG
-export async function getAnswersBySlug(
-  slug: string,
-): Promise<IAnswerResult | null> {
+// GET ANSWERS BY SLUG
+export async function getAnswersBySlug(slug: string) {
   try {
-    const response = await axios.get<IAnswerResult>(`/api/answers/${slug}`);
+    const response = await axios.get<IAnswer[]>(`/api/answers/${slug}`);
 
     const data = response.data;
 
@@ -62,16 +54,14 @@ export async function getAnswersBySlug(
   }
 }
 
-// GET BY SLUG ARRAY
-export async function getAnswersBySlugArray(
-  slugs: string[],
-): Promise<IAnswerResult[]> {
+// GET ANSWERS BY SLUG ARRAY
+export async function getAnswersBySlugArray(slugs: string[]) {
   if (!slugs.length) {
     return [];
   }
 
   try {
-    const response = await axios.get<IAnswerResult[]>(`/api/answers`, {
+    const response = await axios.get<IAnswer[]>(`/api/answers`, {
       params: {
         slugs: slugs.toString(),
       },

src/api-client/names.ts

@@ -7,7 +7,7 @@ interface INameProps {
   link: string;
 }
 
-// CREATE NAME
+// CREATE NAME (SHARE FORM)
 export async function createName({ name, link }: INameProps) {
   if (!name || !link) {
     throw new Error("Name and link are required.");

src/api-client/people.ts

@@ -1,13 +1,11 @@
-import axios, { AxiosResponse } from "axios";
+import axios from "axios";
 
 import { IPerson } from "~/models/Person";
 
-// GET BY SLUG
-export async function getPerson(slug: string): Promise<IPerson | null> {
+// GET PERSON BY SLUG
+export async function getPerson(slug: string) {
   try {
-    const response: AxiosResponse<IPerson> = await axios.get(
-      `/api/people/${slug}`,
-    );
+    const response = await axios.get<IPerson>(`/api/people/${slug}`);
 
     const data = response.data;
 
@@ -21,10 +19,10 @@ export async function getPerson(slug: string): Promise<IPerson | null> {
   }
 }
 
-// GET ALL
+// GET ALL PEOPLE
 export async function getPeople() {
   try {
-    const response: AxiosResponse<IPerson[]> = await axios.get(`/api/people`);
+    const response = await axios.get<IPerson[]>(`/api/people`);
 
     const data = response.data;
 

src/api-client/questions.ts

@@ -1,12 +1,11 @@
-import axios, { AxiosResponse } from "axios";
+import axios from "axios";
 
 import { IQuestion } from "~/models/Question";
 
-// GET ALL
+// GET ALL QUESTIONS
 export async function getQuestions() {
   try {
-    const response: AxiosResponse<IQuestion[] | undefined> =
-      await axios.get(`/api/questions`);
+    const response = await axios.get<IQuestion[]>(`/api/questions`);
 
     const data = response.data;
 

src/api-client/subscriptions.ts

@@ -2,9 +2,11 @@ import axios from "axios";
 
 import { ISubscription } from "~/models/Subscription";
 
-export type SubscriptionProps = Pick<ISubscription, "email">;
+interface SubscriptionProps {
+  email: string;
+}
 
-// CREATE SUBSCRIPTION
+// CREATE SUBSCRIPTION (ADD EMAIL)
 export async function createSubscription({ email }: SubscriptionProps) {
   if (!email) {
     throw new Error("Email is required.");

src/app/api/answers/[slug]/route.ts

@@ -1,15 +1,15 @@
 import { NextResponse } from "next/server";
 
 import { connectDB } from "~/app/lib/connectDB";
+import { IQuestion, Question } from "~/models/Question";
 import { Answer, IAnswer } from "~/models/Answer";
 import { IPerson, Person } from "~/models/Person";
-import { IQuestion } from "~/models/Question";
 
 interface ReqParams {
   params: { slug: string };
 }
 
-// Get answers by slug
+// GET ANSWERS BY SLUG
 export async function GET(req: Request, { params }: ReqParams) {
   const { slug } = params;
 
@@ -24,6 +24,9 @@ export async function GET(req: Request, { params }: ReqParams) {
       });
     }
 
+    // Remove later (make sure Questions are available before populate)
+    const questions: IQuestion[] = await Question.find({}).exec();
+
     const answers: IAnswer[] = await Answer.find({ personId: person._id })
       .populate("questionId")
       .exec();
@@ -33,17 +36,12 @@ export async function GET(req: Request, { params }: ReqParams) {
       return question.active === true;
     });
 
-    const sortedAnswers = activeAnswers.sort((a, b) => {
+    const result = activeAnswers.sort((a, b) => {
       const questionA = a.questionId as IQuestion;
       const questionB = b.questionId as IQuestion;
       return questionA.order - questionB.order;
     });
 
-    const result = {
-      answers: sortedAnswers,
-      person,
-    };
-
     return NextResponse.json(result, { status: 200 });
   } catch (err) {
     console.log(err);

src/app/api/names/route.ts

@@ -17,8 +17,6 @@ export async function POST(req: Request) {
   try {
     await connectDB();
 
-    // Check if exists and add counts.
-
     const newName: IName = new Name({ name, link });
     await newName.save();
 

src/app/api/people/[slug]/route.ts

@@ -2,7 +2,6 @@ import { NextResponse } from "next/server";
 
 import { connectDB } from "~/app/lib/connectDB";
 import { Person, IPerson } from "~/models/Person";
-// import { IPerson } from "~/utils/types";
 
 interface ReqParams {
   params: { slug: string };

src/app/api/people/route.ts

@@ -2,9 +2,8 @@ import { NextResponse } from "next/server";
 
 import { connectDB } from "~/app/lib/connectDB";
 import { Person, IPerson } from "~/models/Person";
-// import { IPerson } from "~/utils/types";
 
-// GET ALL
+// GET ALL PEOPLE
 export async function GET() {
   try {
     await connectDB();

src/app/api/questions/route.ts

@@ -3,7 +3,7 @@ import { NextResponse } from "next/server";
 import { connectDB } from "~/app/lib/connectDB";
 import { IQuestion, Question } from "~/models/Question";
 
-// Get all questions
+// GET ALL QUESTIONS
 export async function GET() {
   try {
     await connectDB();

src/app/api/subscriptions/route.ts

@@ -3,7 +3,7 @@ import { NextResponse } from "next/server";
 import { connectDB } from "~/app/lib/connectDB";
 import { ISubscription, Subscription } from "~/models/Subscription";
 
-// Create new Subscription
+// CREATE NEW SUBSCRIPTION (ADD EMAIL)
 export async function POST(req: Request) {
   const { email } = await req.json();
 

src/app/layout.tsx

@@ -9,6 +9,8 @@ import { ClientProvider } from "~/providers/ClientProvider";
 import { Header } from "~/components/layouts/Header";
 import { Footer } from "~/components/layouts/Footer";
 
+import { OG_DESCRIPTION, OG_TITLE } from "~/utils/constants";
+
 const InnovatorGrotesk = localFont({
   src: [
     {
@@ -45,20 +47,18 @@ const InnovatorGrotesk = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "People-work.net — Job titles decoded. In a simle Q&A format.",
-  description:
-    "People-work.net is a web project for anyone curious about the different paths people take in their careers. And how it turned out for them.",
+  title: OG_TITLE,
+  description: OG_DESCRIPTION,
+  metadataBase: new URL("https://people-work.net"),
   openGraph: {
-    images: [
-      {
-        url: `${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`,
-        alt: "People-work Open Graph Image",
-      },
-      {
-        url: `${process.env.NEXT_PUBLIC_SITE_URL}/twitter-image.jpg`,
-        alt: "People-work Open Graph Image",
-      },
-    ],
+    images: ["opengraph-image.jpg"],
+  },
+  twitter: {
+    title: OG_TITLE,
+    description: OG_DESCRIPTION,
+    site: "people-work.net",
+    card: "summary_large_image",
+    images: ["opengraph-image.jpg"],
   },
 };
 

src/app/questions/page.tsx

@@ -2,7 +2,7 @@
 
 import { FormEvent, useState } from "react";
 
-import { PageContainer } from "~/components/layouts/PageContainer";
+import { PageLayout } from "~/components/layouts/PageLayout";
 
 import { IFormDataProps, submitAnswers } from "~/api-client/answers";
 import { useQuestions } from "~/hooks";
@@ -44,7 +44,7 @@ export default function QuestionsPage() {
   }
 
   return (
-    <PageContainer className="bg-stone-200 px-20">
+    <PageLayout className="bg-stone-200 px-20">
       {isLoading && <div>Loading...</div>}
 
       {error && (
@@ -78,6 +78,6 @@ export default function QuestionsPage() {
           </button>
         </form>
       )}
-    </PageContainer>
+    </PageLayout>
   );
 }

src/components/About.tsx

@@ -0,0 +1,56 @@
+import { SmileIconSolid } from "./icons";
+
+import { cn } from "~/utils/handlers";
+
+export function About() {
+  const array = new Array(6).fill(0);
+
+  return (
+    <div className="w-full space-y-16">
+      <div className="space-y-6">
+        <p
+          className="text-center text-3xl font-medium sm:text-4xl"
+          style={{
+            lineHeight: "110%",
+          }}
+        >
+          This project is for anyone curious about the different paths people
+          take in their careers. It demystifies job titles, shares daily
+          routines, highlights and aspirations in a{" "}
+          <span className="text-gradient bg-[length:200%]">
+            simple Q&A format.
+          </span>
+        </p>
+      </div>
+
+      {/* Icons */}
+      <div className="space-y-6">
+        <div className="flex flex-wrap justify-center gap-3">
+          {array.map((_, index) => (
+            <div className={cn(index > 3 && "hidden sm:block")} key={index}>
+              <IconTile />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-center">
+          <p className="text-gradient w-fit text-center font-medium leading-tight">
+            More awesome people are coming!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Icon Tile
+function IconTile() {
+  return (
+    <div className="group/icon relative flex size-20 shrink-0 items-center justify-center rounded-xl bg-stone-950 bg-[length:200%] transition hover:-translate-y-1 hover:animate-anime-sm hover:bg-gradient-base-diagonal">
+      <span className="absolute -top-10 flex h-8 w-6 items-center justify-center rounded-full bg-stone-200 text-base font-semibold text-stone-950 opacity-0 group-hover/icon:opacity-100">
+        ?
+      </span>
+      <SmileIconSolid className="w-8 fill-stone-50" />
+    </div>
+  );
+}