temporary fix to cors issue

Nickolausen · Nov 15, 2024 · fddf1e8 · fddf1e8
1 parent aaed362
commit fddf1e8
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 17 deletions.
diff --git a/src/components/EducationCard.tsx b/src/components/EducationCard.tsx
@@ -1,5 +1,5 @@
 // import styles from './EducationCard.module.css'
-import { EducationTitle } from '../data/Education'
+import { EducationTitle } from '../model/Education'
 
 interface IProps {
     data?: EducationTitle 

diff --git a/src/components/GHRepoCard.tsx b/src/components/GHRepoCard.tsx
@@ -1,5 +1,5 @@
 // import template_img from '../assets/media/template.jpeg'
-import { GHRepoDetails, languageToID } from '../data/ProjectDetails'
+import { GHRepoDetails, languageToID } from '../model/ProjectDetails'
 
 interface IProps {
     data: GHRepoDetails
@@ -21,10 +21,13 @@ function GHRepoCard({ data }: IProps ) {
                 </div>
                 <h3 className='text-2xl font-bold pt-3'>&lt;{data.name}<span className='accent-clr'>/</span>&gt;</h3>
                 <p className='text-pretty py-3'>{data.description}</p>
-                <div id={tooltip_id} role="tooltip" className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-[--accent-color] rounded-lg shadow-lg opacity-0 tooltip">
-                    Made in {data.language}
-                    <div className="tooltip-arrow" data-popper-arrow></div>
-                </div>
+                { 
+                    data.language && 
+                    <div id={tooltip_id} role="tooltip" className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-[--accent-color] rounded-lg shadow-lg opacity-0 tooltip">
+                        Made in {data.language}
+                        <div className="tooltip-arrow" data-popper-arrow></div>
+                    </div>
+                }
             </div>
             <a href={"https://github.com/Nickolausen/"+ data.name} className='w-full exclude text-center text-white align-middle py-4 transition hover:cursor-pointer hover:bg-[--accent-color-darker] bg-[--accent-color] rounded-b-lg justify-self-end'>
                 VIEW ON GITHUB

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { languageToID, ProjectDetails } from "../data/ProjectDetails"
+import { languageToID, ProjectDetails } from "../model/ProjectDetails"
 
 interface IProps {
     project_info?: ProjectDetails

diff --git a/src/data/Education.tsx → src/model/Education.tsx b/src/data/Education.tsx → src/model/Education.tsx
diff --git a/src/data/ProjectDetails.tsx → src/model/ProjectDetails.tsx b/src/data/ProjectDetails.tsx → src/model/ProjectDetails.tsx
diff --git a/src/pages/Education.tsx b/src/pages/Education.tsx
@@ -1,5 +1,5 @@
 import EducationCard from "../components/EducationCard"
-import { EducationTitle, Expertise } from "../data/Education"
+import { EducationTitle, Expertise } from "../model/Education"
 import styles from './Education.module.css'
 
 const from_school = [

diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from "react"
 import GHRepoCard from "../components/GHRepoCard"
-import { GHRepoDetails, ProjectDetails } from "../data/ProjectDetails"
+import { GHRepoDetails, ProjectDetails } from "../model/ProjectDetails"
 import ProjectCard from "../components/ProjectCard"
 
 function Projects() 
@@ -10,7 +10,16 @@ function Projects()
     useEffect(() => {
         let fetchedRepos: GHRepoDetails[] = []
 
-        fetch("https://pinned.berrysauce.me/get/Nickolausen")
+        // TODO: Fix CORS issue
+        fetch("https://pinned.berrysauce.me/get/Nickolausen", 
+            {
+                method: "GET",
+                mode: "cors", 
+                headers: { 
+                    "Access-Control-Allow-Origin": "*",
+                    "Content-Type": "application/json" 
+                }
+            })
             .then((res) => res.json())
             .then((data) => {
                 data.forEach((el: any) => {
@@ -26,6 +35,7 @@ function Projects()
 
                     setRepos(fetchedRepos)
                 })
+            .catch((e) => console.log(e))
     }, [])
 
     let projects: ProjectDetails[] = [
@@ -70,13 +80,19 @@ function Projects()
     return <>
         <section id="projects" className="pt-20">
             <h1 className="text-5xl font-bold uppercase">Projects</h1>
-            <h3 className="text-primary text-3xl font-bold uppercase mt-10"><i className="fa fa-chevron-right"></i> From my GitHub's pinned repositories</h3>
-            <div className="pt-8 grid md:grid-cols-2 2xl:grid-cols-3 gap-5 gap-y-8 text-primary">
-                { 
-                    repos.map<ReactNode>((repo: GHRepoDetails, idx: number) => <GHRepoCard key={idx} data={repo}/>)
-                }
-            </div>
-            <h3 className="text-primary text-3xl font-bold uppercase pt-20"><i className="fa fa-chevron-right"></i> From previous work experiences</h3>
+            { repos.length > 0 && <>
+                <h3 className="text-primary text-3xl font-bold uppercase mt-10"><i className="fa fa-chevron-right"></i> From my GitHub's pinned repositories</h3>
+                <div className="pt-8 grid md:grid-cols-2 2xl:grid-cols-3 gap-5 gap-y-8 text-primary">
+                    { 
+                        repos.map<ReactNode>((repo: GHRepoDetails, idx: number) => <GHRepoCard key={idx} data={repo}/>)
+                    }
+                </div>
+            </>}
+            { 
+                repos.length > 0 ? 
+                    <h3 className={"text-primary text-3xl font-bold uppercase pt-20"} ><i className="fa fa-chevron-right"></i> From previous work experiences</h3> : 
+                    <h3 className={"text-primary text-3xl font-bold uppercase pt-10"} ><i className="fa fa-chevron-right"></i> From previous work experiences</h3>
+            }
             <div className="pt-8 grid grid-cols-1 gap-5 text-primary">
                 {
                     projects.map<ReactNode>((proj: ProjectDetails, idx: number) => <ProjectCard key={idx} project_info={proj}/>)