From f16f36ec92260bfff48434abe08c9c99610d6c29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roman=20Jaro=C5=A1?= Date: Wed, 15 Jan 2025 16:14:26 +0000 Subject: [PATCH] Refactor and enhance job-related components and context. --- public/jobs.json | 2 +- src/app/components/AboutMe.tsx | 16 ++++--- src/app/components/Jobs.tsx | 77 ++++++++++++++++--------------- src/app/components/Skills.tsx | 51 ++++++++++++-------- src/app/components/Title.tsx | 12 +++-- src/app/context/JobsContext.tsx | 25 ++++++++++ src/app/context/useJobs.ts | 25 ++++++++++ src/app/fetch.ts | 6 +++ src/app/layout.tsx | 21 +++++---- src/app/page.tsx | 15 +++--- src/components/Card.tsx | 17 ------- src/components/Kbd.tsx | 14 ++++++ src/{utils.ts => utils/notNil.ts} | 0 13 files changed, 180 insertions(+), 101 deletions(-) create mode 100644 src/app/context/JobsContext.tsx create mode 100644 src/app/context/useJobs.ts create mode 100644 src/app/fetch.ts delete mode 100644 src/components/Card.tsx create mode 100644 src/components/Kbd.tsx rename src/{utils.ts => utils/notNil.ts} (100%) diff --git a/public/jobs.json b/public/jobs.json index 9ceac57..c212480 100644 --- a/public/jobs.json +++ b/public/jobs.json @@ -63,7 +63,7 @@ "tags": [ "Typescript", "React", - "Graphql", + "GraphQL", "REST", "Mui", "Azure DevOps" diff --git a/src/app/components/AboutMe.tsx b/src/app/components/AboutMe.tsx index bc94642..d994fa3 100644 --- a/src/app/components/AboutMe.tsx +++ b/src/app/components/AboutMe.tsx @@ -1,4 +1,4 @@ -import {Card} from "../../components/Card"; +import {Kbd} from "../../components/Kbd"; export const AboutMe = () => { const age = Math.floor( @@ -13,9 +13,10 @@ export const AboutMe = () => { <>

- 👋, my name is Roman Jaroš. I am {age}. {work} years working as software engineer. + Hello, my name is Roman Jaroš. I am {age}. + {work} years working as software engineer. I have been programming since I was 15 years old and still love to learn new technologies. - Outside of the programming world, I maintain servers with about 120 docker containers. + Outside of the programming world, I maintain servers with around 80 docker containers. Outside of the IT world, I enjoy reading self improvement books, meditating, alternative medicine and model painting or playing video games.

@@ -24,9 +25,12 @@ export const AboutMe = () => { I am contractor and currently only for full remote jobs.


-
- - +
+ UI design + Web development + Automation testing + DevOps + Monitoring
diff --git a/src/app/components/Jobs.tsx b/src/app/components/Jobs.tsx index 3888e4b..7e6ad23 100644 --- a/src/app/components/Jobs.tsx +++ b/src/app/components/Jobs.tsx @@ -1,54 +1,55 @@ +"use client" + import {MapPinIcon, MoveRightIcon} from "lucide-react"; -import {notNil} from "../../utils"; -import {Job} from "../type"; -import {FC} from "react"; +import {notNil} from "../../utils/notNil"; +import {useJobs} from "../context/useJobs"; -type JobsProps = { - jobs: Job[] | undefined -} - -export const Jobs: FC = ({jobs}) => { +export const Jobs = () => { + const {jobs, filter} = useJobs() return ( <>
    - {jobs?.filter(notNil).map(({name, started, ended, description, tags, link}, index) => ( -
  1. + {jobs + ?.filter(notNil) + .filter(({tags}) => filter != undefined ? tags.includes(filter) : true) + .map(({name, started, ended, description, tags, link}, index) => ( +
  2. -

    - {name} -

    - -

    - {description} -

    - {link != undefined && -

    - - Visit website - - +

    + {name} +

    + +

    + {description}

    - } -

    - {tags.sort().map((name) => ( - + {link != undefined && +

    + + Visit website + + +

    + } +

    + {tags.sort().map((name) => ( + {name} - ))} -

    -
    3. - ))} + ))} +

    + + ))}
diff --git a/src/app/components/Skills.tsx b/src/app/components/Skills.tsx index e4b8771..b2d4bc9 100644 --- a/src/app/components/Skills.tsx +++ b/src/app/components/Skills.tsx @@ -1,40 +1,53 @@ -import {notNil} from "../../utils"; +"use client" + +import {notNil} from "../../utils/notNil"; import {StarIcon} from "lucide-react"; import {FC} from "react"; -import {Job} from "../type"; +import {useJobs} from "../context/useJobs"; -type SkillsProps = { - jobs: Job[] | undefined -} - -export const Skills: FC = ({jobs}) => { - - const skills = new Set(jobs?.filter(notNil).flatMap(({tags}) => tags).sort()); +export const Skills: FC = () => { + const {jobs, filterJobs, filter} = useJobs() + const skills = new Set(jobs.filter(notNil).flatMap(({tags}) => tags).sort()); return ( <>
-

Czech

+

Czech, native

+ + +
-

English 

+

English, B2

+ + +
-
- {Array.from(skills)?.map((name) => ( - - {name} - - ))} +
+
+ {Array.from(skills)?.map((name) => ( + filterJobs(name)} + className={[ + "cursor-pointer text-xs font-medium me-2 px-2.5 py-0.5 rounded-full select-none", + filter === name + ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" + : "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300" + ].join(" ")}> + {name} + + ))} +
+

Psss, you can click on pill to filter.

) diff --git a/src/app/components/Title.tsx b/src/app/components/Title.tsx index b8f4afa..5c43fce 100644 --- a/src/app/components/Title.tsx +++ b/src/app/components/Title.tsx @@ -1,12 +1,14 @@ export const Title = () => { return ( -
- < +

- Just - Roman + < + + Roman {" "} + + />

-  />
) } \ No newline at end of file diff --git a/src/app/context/JobsContext.tsx b/src/app/context/JobsContext.tsx new file mode 100644 index 0000000..f974658 --- /dev/null +++ b/src/app/context/JobsContext.tsx @@ -0,0 +1,25 @@ +"use client" + +import {createContext, ReactNode, FC, useState, Dispatch, SetStateAction} from "react"; +import {Job} from "../type"; + +type JobsContextPayload = { + data: Job[] + filter?: string + setFilter: Dispatch> +} | undefined + +export const JobsContext = createContext(undefined); + +type JobsContextProviderProps = { + jobs: Job[] + children: ReactNode[] +} + +export const JobsProvider: FC = ({children, jobs: data}) => { + const [filter, setFilter] = useState() + + return ( + {children} + ) +} \ No newline at end of file diff --git a/src/app/context/useJobs.ts b/src/app/context/useJobs.ts new file mode 100644 index 0000000..c4b27b9 --- /dev/null +++ b/src/app/context/useJobs.ts @@ -0,0 +1,25 @@ +"use client" + +import {useContext} from "react"; +import {JobsContext} from "./JobsContext"; + +export const useJobs = () => { + const context = useContext(JobsContext) + if (!context) { + throw new Error('useJobs must be used within a JobsProvider!'); + } + + const handleFilterJob = (name: string) => { + if (name === context.filter) { + context.setFilter(undefined) + } else { + context.setFilter(name) + } + } + + return { + jobs: context.data, + filter: context?.filter, + filterJobs: handleFilterJob, + } +} \ No newline at end of file diff --git a/src/app/fetch.ts b/src/app/fetch.ts new file mode 100644 index 0000000..b3343d9 --- /dev/null +++ b/src/app/fetch.ts @@ -0,0 +1,6 @@ +import {Job} from "./type"; + +export const fetchJobs = async (): Promise => { + const res = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/jobs.json`, {cache: "no-store"}) + return await res?.json(); +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5669178..c744b8a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -8,13 +8,16 @@ export default function AppLayout({ }) { return ( - - - - - -
{children}
- - - ) + + + Roman Jaroš + + + + +
{children}
+ + + ) } \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 4af9bd5..45c9f1b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,12 +4,13 @@ import {Contact} from "./components/Contact"; import {Footer} from "./components/Footer"; import {Jobs} from "./components/Jobs"; import {Skills} from "./components/Skills"; -import {Job} from "./type"; +import {fetchJobs} from "./fetch"; +import {JobsProvider} from "./context/JobsContext"; +import {use} from "react"; -export default async function Page() { +export default function Page() { - const res = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/jobs.json`, {cache: "no-store"}) - const data: Job[] | undefined = await res?.json(); + const jobs = use(fetchJobs()) return ( <> @@ -17,8 +18,10 @@ export default async function Page() { <AboutMe /> <Contact /> - <Skills jobs={data} /> - <Jobs jobs={data} /> + <JobsProvider jobs={jobs ?? []}> + <Skills /> + <Jobs /> + </JobsProvider> <Footer /> </div> </> diff --git a/src/components/Card.tsx b/src/components/Card.tsx deleted file mode 100644 index b436f24..0000000 --- a/src/components/Card.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import {FC} from "react"; - -type CardProps = { - title: string; - description: string; -} - -export const Card: FC<CardProps> = ({title, description}) => { - return ( - <div - className="w-full md:w-80 block p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" - > - <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{title}</h5> - <p className="font-normal text-gray-700 dark:text-gray-400">{description}</p> - </div> - ) -} \ No newline at end of file diff --git a/src/components/Kbd.tsx b/src/components/Kbd.tsx new file mode 100644 index 0000000..4a93b45 --- /dev/null +++ b/src/components/Kbd.tsx @@ -0,0 +1,14 @@ +import {FC} from "react"; + +type KbdProps = { + children: string +} + +export const Kbd: FC<KbdProps> = ({children}) => { + return ( + <kbd + className="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500"> + {children} + </kbd> + ) +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils/notNil.ts similarity index 100% rename from src/utils.ts rename to src/utils/notNil.ts