Merge pull request #15 from leon-luna-ray/dev

Dev
leon-luna-ray · Feb 12, 2024 · 8e9313c · 8e9313c
2 parents cfac64c + 2e84830
commit 8e9313c
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 60 deletions.
diff --git a/src/components/cards/CardProject.jsx b/src/components/cards/CardProject.jsx
@@ -6,7 +6,8 @@ export const CardProject = ({ project }) => {
         <div className='card project'>
 
             <div className="img-wrap">
-                <img src={getImageUrl(project.mainImage).size(300, 300).url()} alt={project.title} />
+                <img src={getImageUrl(project.mainImage).size(300, 300).url()} alt={project.mainImage.altText || 
+                'Project screenshot'} />
             </div>
 
             <div className="details">

diff --git a/src/lib/api.js b/src/lib/api.js
@@ -14,47 +14,50 @@ export function getImageUrl(source) {
   return builder.image(source);
 }
 
-export async function fetchGlobal() {
-  const query = `*[_type == "globalSettings"]`;
-  const global = await client.fetch(query);
-
-  return global;
-}
-
-export async function fetchFeaturedProjects() {
-  const query = `*[_type == "project" && featured] | order(_updatedAt desc) {
+// API Queries
+const queryGlobalSettings = `*[_type == "globalSettings"][0]`
+const querySkillsGroups = `*[_type == "skillsList"] | order(title) {title, "skills" : skills[] -> {title, website}}`;
+const queryProfile = `*[_type == "profileDetails"][0]{
+    ...,
+    "image": image.asset->{
       _id,
-      intro,
+      title,
+      altText,
       description,
-      mainImage,
-      slug,
-      status,
+    }
+  }`
+const queryProjectGroup = (slug) => {
+  return `*[_type == "projectGroup" && slug.current == "${slug}"] | order(title asc) {
+      _id,
       title,
-      url,
-      repository,
-    }`;
-  const projects = await client.fetch(query);
-
-  return projects;
-}
-
-export async function fetchProfile() {
-  const query = `*[_type == "profileDetails"][0]`;
-  const profile = await client.fetch(query);
-
-  return profile;
-}
-
-export async function fetchHobbies() {
-  const query = `*[_type == "profileDetails"][0] { "hobbies" : hobbies[] -> {title} }`;
-  const hobbies = await client.fetch(query);
-
-  return hobbies;
+      slug,
+      description,
+      projects[]->{
+        _id, 
+        intro, 
+        "mainImage": mainImage.asset->{
+          _id,
+          title,
+          altText,
+          description,
+        }, 
+        slug, 
+        status, 
+        title, 
+        technologies[]->{_id, title, slug,},
+      },
+    }[0]`;
 }
 
-export async function fetchSkills() {
-  const query = `*[_type == "skillsList"] | order(title) {title, "skills" : skills[] -> {title, website}}`;
-  const skills = await client.fetch(query);
-
-  return skills;
+// API Requests
+export async function fetchHomePage() {
+  const query = `{
+      "global": ${queryGlobalSettings},
+      "profile": ${queryProfile},
+      "projects": ${queryProjectGroup('backend-projects')},
+      "skillsGroups": ${querySkillsGroups}
+  }`;
+  const data = await client.fetch(query);
+
+  return data;
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -6,7 +6,7 @@ import ContactForm from '../components/ContactForm';
 import CardProject from '../components/cards/CardProject';
 
 export const HomePage = () => {
-  const { profile, profileImage, projects, skills } = useGlobalContext();
+  const { profile, profileImageURL, projects, skills } = useGlobalContext();
 
   const mapListItems = (items) => {
     return items.map((item, index) => <li key={index}>{item.title}</li>);
@@ -27,7 +27,7 @@ export const HomePage = () => {
   return (
     <main className='home page container'>
       <div className="about">
-        {profileImage && <img src={profileImage} alt="Profile" />}
+        {profile && <img src={profileImageURL} alt={profile.image.altText || 'Profile Image'} />}
         {profile && <TypingEffect text={profile.bio} />}
       </div>
       <div className="skills section mobile-container">

diff --git a/src/store/GlobalContext.jsx b/src/store/GlobalContext.jsx
@@ -5,11 +5,8 @@ import React, {
     useState
 } from "react";
 import {
-    fetchProfile,
-    fetchGlobal,
-    fetchSkills,
-    fetchFeaturedProjects,
-    getImageUrl
+    getImageUrl,
+    fetchHomePage,
 } from "../lib/api";
 
 const GlobalContext = createContext();
@@ -21,26 +18,23 @@ export function useGlobalContext() {
 export function GlobalProvider({ children }) {
     const [profile, setProfile] = useState(null);
     const [global, setGlobal] = useState(null);
-    const [profileImage, setProfileImage] = useState(null);
+    const [profileImageURL, setProfileImageURL] = useState(null);
     const [skills, setSkills] = useState([]);
     const [projects, setProjects] = useState([]);
     const [error, setError] = useState(null);
 
     useEffect(() => {
         const fetchData = async () => {
             try {
-                const profileData = await fetchProfile();
-                const globalData = await fetchGlobal();
-                const skillsData = await fetchSkills();
-                const projectsData = await fetchFeaturedProjects();
-
-                setSkills(skillsData);
-                setProfile(profileData);
-                setGlobal(globalData[0]);
-                setProjects(projectsData);
-
-                if (profileData?.image) {
-                    setProfileImage(getImageUrl(profileData.image).size(300, 300).url());
+                const data = await fetchHomePage();
+
+                setSkills(data?.skillsGroups);
+                setProfile(data?.profile);
+                setGlobal(data?.global);
+                setProjects(data?.projects.projects);
+
+                if (data?.profile.image) {
+                    setProfileImageURL(getImageUrl(data?.profile.image).size(300, 300).url());
                 }
             } catch (err) {
                 console.error(err);
@@ -54,7 +48,7 @@ export function GlobalProvider({ children }) {
     const contextValue = {
         profile,
         global,
-        profileImage,
+        profileImageURL,
         skills,
         projects,
         error,