From 48c74074df9c111c016fab16eae9a346fce4a6d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Jaro=C5=A1?= <hello@romanjaros.dev>
Date: Sat, 11 Jan 2025 19:50:59 +0000
Subject: [PATCH] Refactor job data handling and improve component structure

---
 next.config.js                          |  1 -
 src/app/components/AboutMe.tsx          |  2 +-
 src/app/components/Jobs.tsx             | 20 +++++++-------------
 src/app/components/Skills.tsx           | 12 ++++++------
 src/app/page.tsx                        | 11 ++++++++---
 src/app/type.ts                         |  8 ++++++++
 src/components/{Skills.tsx => Card.tsx} |  0
 7 files changed, 30 insertions(+), 24 deletions(-)
 create mode 100644 src/app/type.ts
 rename src/components/{Skills.tsx => Card.tsx} (100%)

diff --git a/next.config.js b/next.config.js
index 0560eb3..b24e274 100755
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,6 @@
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  
 }
 
 module.exports = nextConfig
\ No newline at end of file
diff --git a/src/app/components/AboutMe.tsx b/src/app/components/AboutMe.tsx
index df93913..bc94642 100644
--- a/src/app/components/AboutMe.tsx
+++ b/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(
diff --git a/src/app/components/Jobs.tsx b/src/app/components/Jobs.tsx
index ca05ab0..3888e4b 100644
--- a/src/app/components/Jobs.tsx
+++ b/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 = {
-	name: string,
-	started: string,
-	ended: string,
-	description: string,
-	tags: string[],
-	link?: string
+type JobsProps = {
+	jobs: Job[] | undefined
 }
 
-export const Jobs = async () => {
-	const res = await fetch("http://localhost:3000/jobs.json")
-	const data: Job[] | undefined = await res?.json();
-
+export const Jobs: FC<JobsProps> = ({jobs}) => {
 	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>
 							}
diff --git a/src/app/components/Skills.tsx b/src/app/components/Skills.tsx
index d7b2466..e4b8771 100644
--- a/src/app/components/Skills.tsx
+++ b/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 = {
-	tags: string[]
+type SkillsProps = {
+	jobs: Job[] | undefined
 }
 
-export const Skills = async () => {
-	const res = await fetch("http://localhost:3000/jobs.json")
-	const data: Job[] | undefined = await res?.json();
+export const Skills: FC<SkillsProps> = ({jobs}) => {
 
-	const skills = new Set(data?.filter(notNil).flatMap(({tags}) => tags).sort());
+	const skills = new Set(jobs?.filter(notNil).flatMap(({tags}) => tags).sort());
 
 	return (
 		<>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 397303b..bf49cfb 100644
--- a/src/app/page.tsx
+++ b/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 />
-				<Jobs />
+				<Skills jobs={data} />
+				<Jobs jobs={data} />
 				<Footer />
 			</div>
 		</>
diff --git a/src/app/type.ts b/src/app/type.ts
new file mode 100644
index 0000000..a4c092c
--- /dev/null
+++ b/src/app/type.ts
@@ -0,0 +1,8 @@
+export type Job = {
+	name: string;
+	started: string;
+	ended: string;
+	description: string;
+	tags: string[];
+	link?: string;
+}
\ No newline at end of file
diff --git a/src/components/Skills.tsx b/src/components/Card.tsx
similarity index 100%
rename from src/components/Skills.tsx
rename to src/components/Card.tsx