Refactor job data handling and improve component structure

next.config.js

@@ -2,7 +2,6 @@
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  
 }
 
 module.exports = nextConfig

src/app/components/AboutMe.tsx

@@ -1,4 +1,4 @@
-import {Card} from "../../components/Skills";
+import {Card} from "../../components/Card";
 
 export const AboutMe = () => {
 	const age = Math.floor(

src/app/components/Jobs.tsx

@@ -1,24 +1,18 @@
 import {MapPinIcon, MoveRightIcon} from "lucide-react";
 import {notNil} from "../../utils";
+import {Job} from "../type";
+import {FC} from "react";
 
-type Job = {
+type JobsProps = {
-	name: string,
+	jobs: Job[] | undefined
-	started: string,
-	ended: string,
-	description: string,
-	tags: string[],
-	link?: string
 }
 
-export const Jobs = async () => {
+export const Jobs: FC<JobsProps> = ({jobs}) => {
-	const res = await fetch("http://localhost:3000/jobs.json")
-	const data: Job[] | undefined = await res?.json();
-
 	return (
 		<>
 			<section className="px-4">
 				<ol className="relative border-s border-gray-200 dark:border-gray-700">
-					{data?.filter(notNil).map(({name, started, ended, description, tags, link}, index) => (
+					{jobs?.filter(notNil).map(({name, started, ended, description, tags, link}, index) => (
 						<li key={index} className="mb-10 ms-6">
 							<span
 								className="absolute flex items-center justify-center w-6 h-6 bg-white rounded-full -start-3 ring-8 ring-white dark:ring-slate-800 dark:bg-slate-800">
@@ -39,7 +33,7 @@ export const Jobs = async () => {
 										 target="_blank"
 										 className="inline-flex gap-2 mb-4 items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
 										Visit website
-										<MoveRightIcon />
+										<MoveRightIcon/>
 									</a>
 								</p>
 							}

src/app/components/Skills.tsx

@@ -1,15 +1,15 @@
 import {notNil} from "../../utils";
 import {StarIcon} from "lucide-react";
+import {FC} from "react";
+import {Job} from "../type";
 
-type Job = {
+type SkillsProps = {
-	tags: string[]
+	jobs: Job[] | undefined
 }
 
-export const Skills = async () => {
+export const Skills: FC<SkillsProps> = ({jobs}) => {
-	const res = await fetch("http://localhost:3000/jobs.json")
-	const data: Job[] | undefined = await res?.json();
 
-	const skills = new Set(data?.filter(notNil).flatMap(({tags}) => tags).sort());
+	const skills = new Set(jobs?.filter(notNil).flatMap(({tags}) => tags).sort());
 
 	return (
 		<>

src/app/page.tsx

@@ -4,16 +4,21 @@ import {Contact} from "./components/Contact";
 import {Footer} from "./components/Footer";
 import {Jobs} from "./components/Jobs";
 import {Skills} from "./components/Skills";
+import {Job} from "./type";
+
+export default async function Page() {
+
+	const res = await fetch("http://localhost:3000/jobs.json", {cache: "no-store"})
+	const data: Job[] | undefined = await res?.json();
 
-export default function Page() {
 	return (
 		<>
 			<div className="flex flex-col gap-y-16 md:w-3/4 lg:w-2/3 mx-auto p-4 mb-20">
 				<Title />
 				<AboutMe />
 				<Contact />
-				<Skills />
+				<Skills jobs={data} />
-				<Jobs />
+				<Jobs jobs={data} />
 				<Footer />
 			</div>
 		</>

src/app/type.ts

@@ -0,0 +1,8 @@
+export type Job = {
+	name: string;
+	started: string;
+	ended: string;
+	description: string;
+	tags: string[];
+	link?: string;
+}