From 0c4fff142782acb3e63d25df39c36e0e943b5f6a Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Mon, 12 Feb 2024 13:42:38 +0300 Subject: [PATCH 1/6] refactor frontend code --- src/APP/pages/products2/data.js | 283 +++++++++++++++++++++ src/APP/pages/products2/sections/Teams.jsx | 216 +++++++++------- 2 files changed, 412 insertions(+), 87 deletions(-) diff --git a/src/APP/pages/products2/data.js b/src/APP/pages/products2/data.js index 9ffd73b4..30a9724e 100644 --- a/src/APP/pages/products2/data.js +++ b/src/APP/pages/products2/data.js @@ -282,3 +282,286 @@ export const teams = { }, ], }; + +export const backendTeamData = [ + { + id: 1, + name: "Design", + developers: [ + { + id: 6, + stacks: [1], + name: "Fred Ouko", + title: "Product Designer", + portfolio: "https://www.linkedin.com/in/fred-ouko-918293bb", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 5, + stacks: [1], + name: "Pamela Owino", + title: "Lead Product Designer", + portfolio: "https://www.linkedin.com/in/owino-pamela", + image: + "https://apis.spaceyatech.com/media/product_teams/pamela-owino.png", + }, + { + id: 4, + stacks: [1], + name: "Emmy Akinyi", + title: "UX Team Lead", + portfolio: "https://www.linkedin.com/in/emmy-akinyi-16ab301a2", + image: + "https://apis.spaceyatech.com/media/product_teams/emmy-akinyi.jpeg", + }, + { + id: 7, + stacks: [1], + name: "Aaron Abubakar", + title: "Product Designer", + portfolio: "https://www.linkedin.com/in/aroni-abubakari-b1a126146", + image: + "https://apis.spaceyatech.com/media/product_teams/aaron-abubakar.jpeg", + }, + { + id: 8, + stacks: [1], + name: "Robert Okusi", + title: "Product Designer", + portfolio: "https://www.linkedin.com/in/robert-okusi", + image: + "https://apis.spaceyatech.com/media/product_teams/robert-okusi.jpg", + }, + { + id: 9, + stacks: [1], + name: "Temitayo Adeleye", + title: "Product Designer", + portfolio: "https://www.linkedin.com/in/adeleye-temitayo-1964b5b9", + image: "https://apis.spaceyatech.com/media/product_teams/temitayo.jpeg", + }, + { + id: 10, + stacks: [1], + name: "Belinda Koech", + title: "Product Designer", + portfolio: "https://www.linkedin.com/in/thisisbesh", + image: + "https://apis.spaceyatech.com/media/product_teams/belinda-koech.jpg", + }, + ], + }, + { + id: 3, + name: "Front End Dev", + developers: [ + { + id: 1, + stacks: [3, 6], + name: "JD", + title: "CoLabs /Certyfied Lead", + portfolio: "https://www.linkedin.com/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 2, + stacks: [3], + name: "Rizwan Hamisi", + title: "Frontend Lead", + portfolio: "https://www.linkedin.com/in/hamisi-rizwan-2b1a00230", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 3, + stacks: [3], + name: "Webala Daniel", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/daniel-webala-8b4992184/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 11, + stacks: [3], + name: "David Clinton", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/clintondavid46/", + image: + "https://apis.spaceyatech.com/media/product_teams/dave-clinton.jpeg", + }, + { + id: 12, + stacks: [3, 4], + name: "Collins Kasyoki", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/collins-thano", + image: "https://apis.spaceyatech.com/media/product_teams/kasyoki.jpg", + }, + { + id: 13, + stacks: [3], + name: "Catherine Kiiru", + title: "Frondend Developer", + portfolio: "https://www.linkedin.com/in/catherine-kiiru-47b2688b/", + image: + "https://apis.spaceyatech.com/media/product_teams/catherine-kiiru.jpeg", + }, + { + id: 14, + stacks: [3], + name: "Ian Mugenya", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/ian-mugenya/", + image: + "https://apis.spaceyatech.com/media/product_teams/ian-mugenya.png", + }, + { + id: 15, + stacks: [3], + name: "Sharon Jebitok", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/sharon-jebitok/", + image: + "https://apis.spaceyatech.com/media/product_teams/sharon-jebitok.jpeg", + }, + { + id: 21, + stacks: [3], + name: "Sonia Somo", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/sonia-lomo/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 22, + stacks: [3], + name: "Felix Nyalenda", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/felix-olali-1652aa231", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 23, + stacks: [3], + name: "Lawrence Moindi", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/lawrence-moindi-55b35773", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + ], + }, + { + id: 4, + name: "Back End Dev", + developers: [ + { + id: 16, + stacks: [4], + name: "Hellen Wainaina", + title: "Backend Developer", + portfolio: "https://www.linkedin.com/in/hellen-wainaina-0946bb20b/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 17, + stacks: [4], + name: "Raymond Kipkorir", + title: "Backend Developer", + portfolio: "https://www.linkedin.com/in/raykipkorir/", + image: "https://apis.spaceyatech.com/media/product_teams/raymond.jpg", + }, + { + id: 19, + stacks: [4, 5], + name: "Waithaka Waweru", + title: "Backend Developer", + portfolio: "https://www.linkedin.com/in/waithaka-waweru/", + image: + "https://apis.spaceyatech.com/media/product_teams/waithaka-waweru.jpeg", + }, + { + id: 12, + stacks: [3, 4], + name: "Collins Kasyoki", + title: "Frontend Developer", + portfolio: "https://www.linkedin.com/in/collins-thano", + image: "https://apis.spaceyatech.com/media/product_teams/kasyoki.jpg", + }, + { + id: 20, + stacks: [4, 5], + name: "James Otieno", + title: "Backend Developer", + portfolio: "https://www.linkedin.com/in/james-oduor/", + image: + "https://apis.spaceyatech.com/media/product_teams/james-otieno.jpeg", + }, + { + id: 24, + stacks: [4], + name: "Fredrick Waihenya", + title: "Backend Developer", + portfolio: "https://www.linkedin.com/in/waihenya/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + ], + }, + { + id: 5, + name: "DevOps", + developers: [ + { + id: 18, + stacks: [5], + name: "Hudson Obai", + title: "DevOps Lead", + portfolio: "https://www.linkedin.com/in/hudson-obai-3948aa204/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + { + id: 19, + stacks: [4, 5], + name: "Waithaka Waweru", + title: "Backend Developer", + portfolio: "https://www.linkedin.com/in/waithaka-waweru/", + image: + "https://apis.spaceyatech.com/media/product_teams/waithaka-waweru.jpeg", + }, + { + id: 20, + stacks: [4, 5], + name: "James Otieno", + title: "Backend Developer", + portfolio: "https://www.linkedin.com/in/james-oduor/", + image: + "https://apis.spaceyatech.com/media/product_teams/james-otieno.jpeg", + }, + { + id: 25, + stacks: [5], + name: "Spencer Ochieng", + title: "DevOps", + portfolio: "https://www.linkedin.com/in/spencerochieng/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + ], + }, + { + id: 6, + name: "Web3", + developers: [ + { + id: 1, + stacks: [3, 6], + name: "JD", + title: "CoLabs /Certyfied Lead", + portfolio: "https://www.linkedin.com/", + image: "https://apis.spaceyatech.com/media/default.svg", + }, + ], + }, + { + id: 7, + name: "UX Team Lead", + developers: [], + }, +]; diff --git a/src/APP/pages/products2/sections/Teams.jsx b/src/APP/pages/products2/sections/Teams.jsx index 082ab16c..b47dc074 100644 --- a/src/APP/pages/products2/sections/Teams.jsx +++ b/src/APP/pages/products2/sections/Teams.jsx @@ -1,87 +1,129 @@ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; -import { Tab } from "@headlessui/react"; -import { teams } from "../data"; -import { upleftGreen } from "../../../../assets/images/icons"; -import DeveloperCard from "./DeveloperCard"; - -function classNames(...classes) { - return classes.filter(Boolean).join(" "); -} - -const Teams = () => { - let [categories] = useState(teams); - - return ( -
- {/* Header */} -
-

- Backed by a team of Global Talents. -

- - - - Join us - - upleft - -
- - {/* Tabs */} -
- - - {Object.keys(categories).map((category) => ( - - classNames( - "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", - "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", - selected - ? "bg-primary font-medium text-white" - : "bg-[#f8f8f8] font-normal" - ) - } - > - {category} - - ))} - - - {Object.values(categories).map((posts, idx) => ( - - {posts.map(({ id, name, title, headshot, portfolio }) => ( - - ))} - - ))} - - -
-
- ); -}; - -export default Teams; +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import { Tab } from "@headlessui/react"; +import { backendTeamData, teams } from "../data"; +import { upleftGreen } from "../../../../assets/images/icons"; +import DeveloperCard from "./DeveloperCard"; + +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} + +const Teams = () => { + let [categories] = useState(teams); + + return ( +
+ {/* Header */} +
+

+ Backed by a team of Global Talents. +

+ + + + Join us + + upleft + +
+ + {/* Tabs */} +
+ {/* + + {Object.keys(categories).map((category) => ( + + classNames( + "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", + "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", + selected + ? "bg-primary font-medium text-white" + : "bg-[#f8f8f8] font-normal" + ) + } + > + {category} + + ))} + + + {Object.values(categories).map((posts, idx) => ( + + {posts.map(({ id, name, title, headshot, portfolio }) => ( + + ))} + + ))} + + */} + + + + {backendTeamData.map(({ id, name }) => ( + + classNames( + "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", + "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", + selected + ? "bg-primary font-medium text-white" + : "bg-[#f8f8f8] font-normal" + ) + } + > + {name} + + ))} + + + {backendTeamData.map(({ id, developers }) => ( + + {developers.length > 0 && + developers.map(({ id, name, title, portfolio, image }) => ( + + ))} + + ))} + + +
+
+ ); +}; + +export default Teams; From 1c3ee134309693148e6d99a27d2277fc4c5104b9 Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Mon, 12 Feb 2024 13:53:23 +0300 Subject: [PATCH 2/6] filter empty stack --- src/APP/pages/products2/sections/Teams.jsx | 75 ++++++---------------- 1 file changed, 19 insertions(+), 56 deletions(-) diff --git a/src/APP/pages/products2/sections/Teams.jsx b/src/APP/pages/products2/sections/Teams.jsx index b47dc074..0c466345 100644 --- a/src/APP/pages/products2/sections/Teams.jsx +++ b/src/APP/pages/products2/sections/Teams.jsx @@ -1,16 +1,20 @@ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; import { Tab } from "@headlessui/react"; -import { backendTeamData, teams } from "../data"; +import React from "react"; +import { Link } from "react-router-dom"; + import { upleftGreen } from "../../../../assets/images/icons"; +import { backendTeamData } from "../data"; import DeveloperCard from "./DeveloperCard"; function classNames(...classes) { return classes.filter(Boolean).join(" "); } -const Teams = () => { - let [categories] = useState(teams); +function Teams() { + const filteredTeams = backendTeamData.filter( + (team) => team.developers.length > 0 + ); + console.log("New team: ", filteredTeams); return (
@@ -39,12 +43,13 @@ const Teams = () => { {/* Tabs */}
- {/* + - {Object.keys(categories).map((category) => ( + {filteredTeams.map(({ id, name }) => ( + // eslint-disable-next-line implicit-arrow-linebreak classNames( "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", @@ -54,76 +59,34 @@ const Teams = () => { ) } > - {category} + {name} ))} - {Object.values(categories).map((posts, idx) => ( + {filteredTeams.map(({ id, developers }) => ( - {posts.map(({ id, name, title, headshot, portfolio }) => ( + {developers.map(({ id, name, title, portfolio, image }) => ( ))} ))} - */} - - - - {backendTeamData.map(({ id, name }) => ( - - classNames( - "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", - "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", - selected - ? "bg-primary font-medium text-white" - : "bg-[#f8f8f8] font-normal" - ) - } - > - {name} - - ))} - - - {backendTeamData.map(({ id, developers }) => ( - - {developers.length > 0 && - developers.map(({ id, name, title, portfolio, image }) => ( - - ))} - - ))} -
); -}; +} export default Teams; From 520757b0a36dde057b7ff637e68731954c1b6e55 Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Mon, 12 Feb 2024 14:18:24 +0300 Subject: [PATCH 3/6] fetch data from api --- src/APP/pages/products2/sections/Teams.jsx | 106 ++++++++++++--------- src/hooks/Queries/blog/useBlogData.jsx | 2 +- src/hooks/Queries/stack/useStackData.jsx | 22 +++++ 3 files changed, 82 insertions(+), 48 deletions(-) create mode 100644 src/hooks/Queries/stack/useStackData.jsx diff --git a/src/APP/pages/products2/sections/Teams.jsx b/src/APP/pages/products2/sections/Teams.jsx index 0c466345..05201124 100644 --- a/src/APP/pages/products2/sections/Teams.jsx +++ b/src/APP/pages/products2/sections/Teams.jsx @@ -1,9 +1,10 @@ import { Tab } from "@headlessui/react"; import React from "react"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import { upleftGreen } from "../../../../assets/images/icons"; -import { backendTeamData } from "../data"; +import useStackData from "../../../../hooks/Queries/stack/useStackData"; +import { Loader } from "../../../components"; import DeveloperCard from "./DeveloperCard"; function classNames(...classes) { @@ -11,10 +12,9 @@ function classNames(...classes) { } function Teams() { - const filteredTeams = backendTeamData.filter( - (team) => team.developers.length > 0 - ); - console.log("New team: ", filteredTeams); + const navigate = useNavigate(); + + const { data: teamData, isLoading, isError, isSuccess } = useStackData(); return (
@@ -43,47 +43,59 @@ function Teams() { {/* Tabs */}
- - - {filteredTeams.map(({ id, name }) => ( - - // eslint-disable-next-line implicit-arrow-linebreak - classNames( - "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", - "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", - selected - ? "bg-primary font-medium text-white" - : "bg-[#f8f8f8] font-normal" - ) - } - > - {name} - - ))} - - - {filteredTeams.map(({ id, developers }) => ( - - {developers.map(({ id, name, title, portfolio, image }) => ( - - ))} - - ))} - - + {isError && navigate("/error-500")} + + {isLoading && ( +
+ +

+ Loading blog details... +

+
+ )} + {isSuccess && ( + + + {teamData.map(({ id, name }) => ( + + // eslint-disable-next-line implicit-arrow-linebreak + classNames( + "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", + "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", + selected + ? "bg-primary font-medium text-white" + : "bg-[#f8f8f8] font-normal" + ) + } + > + {name} + + ))} + + + {teamData.map(({ id, developers }) => ( + + {developers.map(({ id, name, title, portfolio, image }) => ( + + ))} + + ))} + + + )}
); diff --git a/src/hooks/Queries/blog/useBlogData.jsx b/src/hooks/Queries/blog/useBlogData.jsx index 9412b68d..c4c47ef0 100644 --- a/src/hooks/Queries/blog/useBlogData.jsx +++ b/src/hooks/Queries/blog/useBlogData.jsx @@ -1,5 +1,5 @@ -import axios from "axios"; import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; const fetchBlogData = async (title_slug) => { try { diff --git a/src/hooks/Queries/stack/useStackData.jsx b/src/hooks/Queries/stack/useStackData.jsx new file mode 100644 index 00000000..9689f1d3 --- /dev/null +++ b/src/hooks/Queries/stack/useStackData.jsx @@ -0,0 +1,22 @@ +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; + +const fetchStackData = async () => { + try { + const url = `${process.env.REACT_APP_API_BASE_URL}/stack`; + const response = await axios.get(url); + const teamData = response.data.filter((team) => team.developers.length > 0); + return teamData; + } catch (error) { + throw new Error(error); + } +}; + +export default function useStackData() { + return useQuery({ + queryKey: ["stackData"], + queryFn: () => fetchStackData(), + refetchOnWindowFocus: false, + staleTime: 5 * 60 * 60, + }); +} From fe78a4fa963dc524938afda114116075ec2153aa Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Mon, 12 Feb 2024 14:22:14 +0300 Subject: [PATCH 4/6] delete static data --- src/APP/pages/products2/data.js | 851 +++++++-------------- src/APP/pages/products2/sections/Teams.jsx | 2 +- 2 files changed, 285 insertions(+), 568 deletions(-) diff --git a/src/APP/pages/products2/data.js b/src/APP/pages/products2/data.js index 30a9724e..f2e52065 100644 --- a/src/APP/pages/products2/data.js +++ b/src/APP/pages/products2/data.js @@ -1,567 +1,284 @@ -import { - aaron, - belinda, - catherine, - dave, - emmy, - fred, - hudson, - ian, - james, - pamela, - sharon, - temitayo, - robert, - // kasyoki, - rizwan, - raymond, - hellen, -} from "../../../assets/images/aboutPage"; -import { - angular, - django, - docker, - figma, - flutter, - git, - java, - jira, - js, - laravel, - mentorlst, - colabs, - notion, - python, - react, - vue, - whimsical, -} from "../../../assets/images/products"; - -export const products = [ - { - name: "Mentorlst Web and Mobile App", - desc: "A platform for mentors, coaches and consultants to meet with mentees, students and clients for 1:1 sessions, group sessions and community virtual events.", - img: mentorlst, - link: "https://mentorlst.com/", - }, - { - name: "Colabs", - desc: "An open-source directory with beginner-friendly open-source projects across all technologies and tech stacks. Browse through hundreds of projects or list your open-source projects and onboard contributors.", - img: colabs, - link: "https://spaceyatech.github.io/CoLabs/", - }, - // { - // name: "Mastori", - // desc: "A platform for mentors, coaches and consultants to meet with mentees, students and clients for 1:1 sessions, group sessions and community virtual events.", - // img: mentorlst, - // link: "/products", - // }, -]; - -export const stackCollection = [ - { - id: 1, - category: "Design", - stack: [ - { url: figma, alt: "figma" }, - { url: notion, alt: "notion" }, - { url: whimsical, alt: "whimsical" }, - ], - }, - { - id: 3, - category: "Backend", - stack: [ - { url: django, alt: "django" }, - { url: java, alt: "java" }, - { url: laravel, alt: "laravel" }, - { url: python, alt: "python" }, - ], - }, - { - id: 2, - category: "Frontend", - stack: [ - { url: react, alt: "react" }, - { url: vue, alt: "vue" }, - { url: js, alt: "js" }, - { url: angular, alt: "angular" }, - { url: flutter, alt: "flutter" }, - ], - }, - { - id: 4, - category: "DevOps", - stack: [ - { url: git, alt: "git" }, - { url: docker, alt: "docker" }, - { url: jira, alt: "jira" }, - ], - }, -]; - -export const teams = { - Design: [ - { - id: 1, - name: "Emmy Akinyi", - title: "UX Team Lead", - headshot: emmy, - portfolio: "https://www.linkedin.com/in/emmy-akinyi-16ab301a2", - }, - { - id: 2, - name: "Pamela Owino", - title: "Lead Product Designer", - headshot: pamela, - portfolio: "https://www.linkedin.com/in/owino-pamela", - }, - { - id: 3, - name: "Fred Ouko", - title: "Product Designer", - headshot: fred, - portfolio: "https://www.linkedin.com/in/fred-ouko-918293bb", - }, - { - id: 4, - name: "Aaron Abubakar", - title: "Product Designer", - headshot: aaron, - portfolio: "https://www.linkedin.com/in/aroni-abubakari-b1a126146", - }, - { - id: 5, - name: "Robert Okusi", - title: "Product Designer", - headshot: robert, - portfolio: "https://www.linkedin.com/in/robert-okusi", - }, - { - id: 6, - name: "Temitayo Adeleye", - title: "Product Designer", - headshot: temitayo, - portfolio: "https://www.linkedin.com/in/adeleye-temitayo-1964b5b9", - }, - { - id: 7, - name: "Belinda Koech", - title: "Product Designer", - headshot: belinda, - portfolio: "https://www.linkedin.com/in/thisisbesh", - }, - ], - "Front-End Dev": [ - { - id: 1, - name: "Rizwan Hamisi", - title: "Frontend Developer", - headshot: rizwan, - portfolio: "https://www.linkedin.com/in/hamisi-rizwan-2b1a00230", - }, - { - id: 2, - name: "Sonia Lomo", - title: "Frontend Developer", - headshot: - "https://media.licdn.com/dms/image/D4D03AQHLQHd_YdNIIw/profile-displayphoto-shrink_400_400/0/1703509213541?e=1709164800&v=beta&t=mdmSQ04f6kKSsngCSKhTl75bdXDZFUPPvFco2QQeZYo", - portfolio: "https://www.linkedin.com/in/sonia-lomo/", - }, - { - id: 3, - name: "Felix Nyalenda", - title: "Frontend Developer", - headshot: "https://avatars.githubusercontent.com/u/68052150?v=4", - portfolio: "https://www.linkedin.com/in/felix-olali-1652aa231", - }, - { - id: 4, - name: "David Clinton", - title: "Frontend Developer", - headshot: dave, - portfolio: "https://www.linkedin.com/in/clintondavid46/", - }, - { - id: 5, - name: "Collins Kasyoki", - title: "Software Developer", - headshot: "https://avatars.githubusercontent.com/u/40399921?v=4", - portfolio: "https://www.linkedin.com/in/collins-thano", - }, - { - id: 6, - name: "Lawrence Moindi", - title: "Frontend Developer", - headshot: - "https://media.licdn.com/dms/image/D4D03AQEOYTI8_FXF3Q/profile-displayphoto-shrink_100_100/0/1680982692686?e=1707350400&v=beta&t=Vji_sa-dDdCNCNU4v5MAT5BPb8lc1iCFvMI9qGSWVWk", - portfolio: "https://www.linkedin.com/in/lawrence-moindi-55b35773", - }, - { - id: 7, - name: "Catherine Kiiru", - title: "Frontend Developer", - headshot: catherine, - portfolio: "https://www.linkedin.com/in/catherine-kiiru-47b2688b/", - }, - { - id: 8, - name: "Ian Mugenya", - title: "Frontend Developer", - headshot: ian, - portfolio: "https://www.linkedin.com/in/ian-mugenya/", - }, - { - id: 9, - name: "Sharon Jebitok", - title: "Frontend Developer", - headshot: sharon, - portfolio: "https://www.linkedin.com/in/sharon-jebitok/", - }, - ], - "Back-End Dev": [ - { - id: 4, - name: "James Otieno", - title: "Backend Developer", - headshot: james, - portfolio: "https://www.linkedin.com/in/james-oduor/", - }, - { - id: 5, - name: "Hellen Wainaina", - title: "Backend Developer", - headshot: hellen, - portfolio: "https://www.linkedin.com/in/hellen-wainaina-0946bb20b/", - }, - { - id: 6, - name: "Raymond Kipkorir", - title: "Backend Developer", - headshot: raymond, - portfolio: "https://www.linkedin.com/in/raykipkorir/", - }, - { - id: 7, - name: "Fredrick Waihenya", - title: "Backend Developer", - headshot: - "https://media.licdn.com/dms/image/D4D03AQGWRP9FzPhkag/profile-displayphoto-shrink_400_400/0/1701011405980?e=1706745600&v=beta&t=SAQGksEQUVrzMP70CJ2ShtwwbFMinxFtoQD4lMpeOuw", - portfolio: "https://www.linkedin.com/in/waihenya/", - }, - { - id: 8, - name: "Collins Kasyoki", - title: "Software Developer", - headshot: "https://avatars.githubusercontent.com/u/40399921?v=4", - portfolio: "https://www.linkedin.com/in/collins-thano", - }, - ], - DevOps: [ - { - id: 1, - name: "Hudson Obai", - title: "DevOps Lead", - headshot: hudson, - portfolio: "https://www.linkedin.com/in/hudson-obai-3948aa204/", - }, - { - id: 2, - name: "James Otieno", - title: "DevOps", - headshot: james, - portfolio: "https://www.linkedin.com/in/james-oduor/", - }, - { - id: 3, - name: "Spencer Ochieng", - title: "DevOps", - headshot: - "https://media.licdn.com/dms/image/D4D03AQHgS719SVEGkw/profile-displayphoto-shrink_400_400/0/1698877680926?e=1706745600&v=beta&t=_ofudLp8BJN5voqACjZBvUsuPX5JnPAPY95Ovh9xppA", - portfolio: "https://www.linkedin.com/in/spencerochieng/", - }, - ], -}; - -export const backendTeamData = [ - { - id: 1, - name: "Design", - developers: [ - { - id: 6, - stacks: [1], - name: "Fred Ouko", - title: "Product Designer", - portfolio: "https://www.linkedin.com/in/fred-ouko-918293bb", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 5, - stacks: [1], - name: "Pamela Owino", - title: "Lead Product Designer", - portfolio: "https://www.linkedin.com/in/owino-pamela", - image: - "https://apis.spaceyatech.com/media/product_teams/pamela-owino.png", - }, - { - id: 4, - stacks: [1], - name: "Emmy Akinyi", - title: "UX Team Lead", - portfolio: "https://www.linkedin.com/in/emmy-akinyi-16ab301a2", - image: - "https://apis.spaceyatech.com/media/product_teams/emmy-akinyi.jpeg", - }, - { - id: 7, - stacks: [1], - name: "Aaron Abubakar", - title: "Product Designer", - portfolio: "https://www.linkedin.com/in/aroni-abubakari-b1a126146", - image: - "https://apis.spaceyatech.com/media/product_teams/aaron-abubakar.jpeg", - }, - { - id: 8, - stacks: [1], - name: "Robert Okusi", - title: "Product Designer", - portfolio: "https://www.linkedin.com/in/robert-okusi", - image: - "https://apis.spaceyatech.com/media/product_teams/robert-okusi.jpg", - }, - { - id: 9, - stacks: [1], - name: "Temitayo Adeleye", - title: "Product Designer", - portfolio: "https://www.linkedin.com/in/adeleye-temitayo-1964b5b9", - image: "https://apis.spaceyatech.com/media/product_teams/temitayo.jpeg", - }, - { - id: 10, - stacks: [1], - name: "Belinda Koech", - title: "Product Designer", - portfolio: "https://www.linkedin.com/in/thisisbesh", - image: - "https://apis.spaceyatech.com/media/product_teams/belinda-koech.jpg", - }, - ], - }, - { - id: 3, - name: "Front End Dev", - developers: [ - { - id: 1, - stacks: [3, 6], - name: "JD", - title: "CoLabs /Certyfied Lead", - portfolio: "https://www.linkedin.com/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 2, - stacks: [3], - name: "Rizwan Hamisi", - title: "Frontend Lead", - portfolio: "https://www.linkedin.com/in/hamisi-rizwan-2b1a00230", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 3, - stacks: [3], - name: "Webala Daniel", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/daniel-webala-8b4992184/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 11, - stacks: [3], - name: "David Clinton", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/clintondavid46/", - image: - "https://apis.spaceyatech.com/media/product_teams/dave-clinton.jpeg", - }, - { - id: 12, - stacks: [3, 4], - name: "Collins Kasyoki", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/collins-thano", - image: "https://apis.spaceyatech.com/media/product_teams/kasyoki.jpg", - }, - { - id: 13, - stacks: [3], - name: "Catherine Kiiru", - title: "Frondend Developer", - portfolio: "https://www.linkedin.com/in/catherine-kiiru-47b2688b/", - image: - "https://apis.spaceyatech.com/media/product_teams/catherine-kiiru.jpeg", - }, - { - id: 14, - stacks: [3], - name: "Ian Mugenya", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/ian-mugenya/", - image: - "https://apis.spaceyatech.com/media/product_teams/ian-mugenya.png", - }, - { - id: 15, - stacks: [3], - name: "Sharon Jebitok", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/sharon-jebitok/", - image: - "https://apis.spaceyatech.com/media/product_teams/sharon-jebitok.jpeg", - }, - { - id: 21, - stacks: [3], - name: "Sonia Somo", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/sonia-lomo/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 22, - stacks: [3], - name: "Felix Nyalenda", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/felix-olali-1652aa231", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 23, - stacks: [3], - name: "Lawrence Moindi", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/lawrence-moindi-55b35773", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - ], - }, - { - id: 4, - name: "Back End Dev", - developers: [ - { - id: 16, - stacks: [4], - name: "Hellen Wainaina", - title: "Backend Developer", - portfolio: "https://www.linkedin.com/in/hellen-wainaina-0946bb20b/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 17, - stacks: [4], - name: "Raymond Kipkorir", - title: "Backend Developer", - portfolio: "https://www.linkedin.com/in/raykipkorir/", - image: "https://apis.spaceyatech.com/media/product_teams/raymond.jpg", - }, - { - id: 19, - stacks: [4, 5], - name: "Waithaka Waweru", - title: "Backend Developer", - portfolio: "https://www.linkedin.com/in/waithaka-waweru/", - image: - "https://apis.spaceyatech.com/media/product_teams/waithaka-waweru.jpeg", - }, - { - id: 12, - stacks: [3, 4], - name: "Collins Kasyoki", - title: "Frontend Developer", - portfolio: "https://www.linkedin.com/in/collins-thano", - image: "https://apis.spaceyatech.com/media/product_teams/kasyoki.jpg", - }, - { - id: 20, - stacks: [4, 5], - name: "James Otieno", - title: "Backend Developer", - portfolio: "https://www.linkedin.com/in/james-oduor/", - image: - "https://apis.spaceyatech.com/media/product_teams/james-otieno.jpeg", - }, - { - id: 24, - stacks: [4], - name: "Fredrick Waihenya", - title: "Backend Developer", - portfolio: "https://www.linkedin.com/in/waihenya/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - ], - }, - { - id: 5, - name: "DevOps", - developers: [ - { - id: 18, - stacks: [5], - name: "Hudson Obai", - title: "DevOps Lead", - portfolio: "https://www.linkedin.com/in/hudson-obai-3948aa204/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - { - id: 19, - stacks: [4, 5], - name: "Waithaka Waweru", - title: "Backend Developer", - portfolio: "https://www.linkedin.com/in/waithaka-waweru/", - image: - "https://apis.spaceyatech.com/media/product_teams/waithaka-waweru.jpeg", - }, - { - id: 20, - stacks: [4, 5], - name: "James Otieno", - title: "Backend Developer", - portfolio: "https://www.linkedin.com/in/james-oduor/", - image: - "https://apis.spaceyatech.com/media/product_teams/james-otieno.jpeg", - }, - { - id: 25, - stacks: [5], - name: "Spencer Ochieng", - title: "DevOps", - portfolio: "https://www.linkedin.com/in/spencerochieng/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - ], - }, - { - id: 6, - name: "Web3", - developers: [ - { - id: 1, - stacks: [3, 6], - name: "JD", - title: "CoLabs /Certyfied Lead", - portfolio: "https://www.linkedin.com/", - image: "https://apis.spaceyatech.com/media/default.svg", - }, - ], - }, - { - id: 7, - name: "UX Team Lead", - developers: [], - }, -]; +// import { +// aaron, +// belinda, +// catherine, +// dave, +// emmy, +// fred, +// hudson, +// ian, +// james, +// pamela, +// sharon, +// temitayo, +// robert, +// // kasyoki, +// rizwan, +// raymond, +// hellen, +// } from "../../../assets/images/aboutPage"; +import { + angular, + django, + docker, + figma, + flutter, + git, + java, + jira, + js, + laravel, + mentorlst, + colabs, + notion, + python, + react, + vue, + whimsical, +} from "../../../assets/images/products"; + +export const products = [ + { + name: "Mentorlst Web and Mobile App", + desc: "A platform for mentors, coaches and consultants to meet with mentees, students and clients for 1:1 sessions, group sessions and community virtual events.", + img: mentorlst, + link: "https://mentorlst.com/", + }, + { + name: "Colabs", + desc: "An open-source directory with beginner-friendly open-source projects across all technologies and tech stacks. Browse through hundreds of projects or list your open-source projects and onboard contributors.", + img: colabs, + link: "https://spaceyatech.github.io/CoLabs/", + }, + // { + // name: "Mastori", + // desc: "A platform for mentors, coaches and consultants to meet with mentees, students and clients for 1:1 sessions, group sessions and community virtual events.", + // img: mentorlst, + // link: "/products", + // }, +]; + +export const stackCollection = [ + { + id: 1, + category: "Design", + stack: [ + { url: figma, alt: "figma" }, + { url: notion, alt: "notion" }, + { url: whimsical, alt: "whimsical" }, + ], + }, + { + id: 3, + category: "Backend", + stack: [ + { url: django, alt: "django" }, + { url: java, alt: "java" }, + { url: laravel, alt: "laravel" }, + { url: python, alt: "python" }, + ], + }, + { + id: 2, + category: "Frontend", + stack: [ + { url: react, alt: "react" }, + { url: vue, alt: "vue" }, + { url: js, alt: "js" }, + { url: angular, alt: "angular" }, + { url: flutter, alt: "flutter" }, + ], + }, + { + id: 4, + category: "DevOps", + stack: [ + { url: git, alt: "git" }, + { url: docker, alt: "docker" }, + { url: jira, alt: "jira" }, + ], + }, +]; + +// export const teams = { +// Design: [ +// { +// id: 1, +// name: "Emmy Akinyi", +// title: "UX Team Lead", +// headshot: emmy, +// portfolio: "https://www.linkedin.com/in/emmy-akinyi-16ab301a2", +// }, +// { +// id: 2, +// name: "Pamela Owino", +// title: "Lead Product Designer", +// headshot: pamela, +// portfolio: "https://www.linkedin.com/in/owino-pamela", +// }, +// { +// id: 3, +// name: "Fred Ouko", +// title: "Product Designer", +// headshot: fred, +// portfolio: "https://www.linkedin.com/in/fred-ouko-918293bb", +// }, +// { +// id: 4, +// name: "Aaron Abubakar", +// title: "Product Designer", +// headshot: aaron, +// portfolio: "https://www.linkedin.com/in/aroni-abubakari-b1a126146", +// }, +// { +// id: 5, +// name: "Robert Okusi", +// title: "Product Designer", +// headshot: robert, +// portfolio: "https://www.linkedin.com/in/robert-okusi", +// }, +// { +// id: 6, +// name: "Temitayo Adeleye", +// title: "Product Designer", +// headshot: temitayo, +// portfolio: "https://www.linkedin.com/in/adeleye-temitayo-1964b5b9", +// }, +// { +// id: 7, +// name: "Belinda Koech", +// title: "Product Designer", +// headshot: belinda, +// portfolio: "https://www.linkedin.com/in/thisisbesh", +// }, +// ], +// "Front-End Dev": [ +// { +// id: 1, +// name: "Rizwan Hamisi", +// title: "Frontend Developer", +// headshot: rizwan, +// portfolio: "https://www.linkedin.com/in/hamisi-rizwan-2b1a00230", +// }, +// { +// id: 2, +// name: "Sonia Lomo", +// title: "Frontend Developer", +// headshot: +// "https://media.licdn.com/dms/image/D4D03AQHLQHd_YdNIIw/profile-displayphoto-shrink_400_400/0/1703509213541?e=1709164800&v=beta&t=mdmSQ04f6kKSsngCSKhTl75bdXDZFUPPvFco2QQeZYo", +// portfolio: "https://www.linkedin.com/in/sonia-lomo/", +// }, +// { +// id: 3, +// name: "Felix Nyalenda", +// title: "Frontend Developer", +// headshot: "https://avatars.githubusercontent.com/u/68052150?v=4", +// portfolio: "https://www.linkedin.com/in/felix-olali-1652aa231", +// }, +// { +// id: 4, +// name: "David Clinton", +// title: "Frontend Developer", +// headshot: dave, +// portfolio: "https://www.linkedin.com/in/clintondavid46/", +// }, +// { +// id: 5, +// name: "Collins Kasyoki", +// title: "Software Developer", +// headshot: "https://avatars.githubusercontent.com/u/40399921?v=4", +// portfolio: "https://www.linkedin.com/in/collins-thano", +// }, +// { +// id: 6, +// name: "Lawrence Moindi", +// title: "Frontend Developer", +// headshot: +// "https://media.licdn.com/dms/image/D4D03AQEOYTI8_FXF3Q/profile-displayphoto-shrink_100_100/0/1680982692686?e=1707350400&v=beta&t=Vji_sa-dDdCNCNU4v5MAT5BPb8lc1iCFvMI9qGSWVWk", +// portfolio: "https://www.linkedin.com/in/lawrence-moindi-55b35773", +// }, +// { +// id: 7, +// name: "Catherine Kiiru", +// title: "Frontend Developer", +// headshot: catherine, +// portfolio: "https://www.linkedin.com/in/catherine-kiiru-47b2688b/", +// }, +// { +// id: 8, +// name: "Ian Mugenya", +// title: "Frontend Developer", +// headshot: ian, +// portfolio: "https://www.linkedin.com/in/ian-mugenya/", +// }, +// { +// id: 9, +// name: "Sharon Jebitok", +// title: "Frontend Developer", +// headshot: sharon, +// portfolio: "https://www.linkedin.com/in/sharon-jebitok/", +// }, +// ], +// "Back-End Dev": [ +// { +// id: 4, +// name: "James Otieno", +// title: "Backend Developer", +// headshot: james, +// portfolio: "https://www.linkedin.com/in/james-oduor/", +// }, +// { +// id: 5, +// name: "Hellen Wainaina", +// title: "Backend Developer", +// headshot: hellen, +// portfolio: "https://www.linkedin.com/in/hellen-wainaina-0946bb20b/", +// }, +// { +// id: 6, +// name: "Raymond Kipkorir", +// title: "Backend Developer", +// headshot: raymond, +// portfolio: "https://www.linkedin.com/in/raykipkorir/", +// }, +// { +// id: 7, +// name: "Fredrick Waihenya", +// title: "Backend Developer", +// headshot: +// "https://media.licdn.com/dms/image/D4D03AQGWRP9FzPhkag/profile-displayphoto-shrink_400_400/0/1701011405980?e=1706745600&v=beta&t=SAQGksEQUVrzMP70CJ2ShtwwbFMinxFtoQD4lMpeOuw", +// portfolio: "https://www.linkedin.com/in/waihenya/", +// }, +// { +// id: 8, +// name: "Collins Kasyoki", +// title: "Software Developer", +// headshot: "https://avatars.githubusercontent.com/u/40399921?v=4", +// portfolio: "https://www.linkedin.com/in/collins-thano", +// }, +// ], +// DevOps: [ +// { +// id: 1, +// name: "Hudson Obai", +// title: "DevOps Lead", +// headshot: hudson, +// portfolio: "https://www.linkedin.com/in/hudson-obai-3948aa204/", +// }, +// { +// id: 2, +// name: "James Otieno", +// title: "DevOps", +// headshot: james, +// portfolio: "https://www.linkedin.com/in/james-oduor/", +// }, +// { +// id: 3, +// name: "Spencer Ochieng", +// title: "DevOps", +// headshot: +// "https://media.licdn.com/dms/image/D4D03AQHgS719SVEGkw/profile-displayphoto-shrink_400_400/0/1698877680926?e=1706745600&v=beta&t=_ofudLp8BJN5voqACjZBvUsuPX5JnPAPY95Ovh9xppA", +// portfolio: "https://www.linkedin.com/in/spencerochieng/", +// }, +// ], +// }; diff --git a/src/APP/pages/products2/sections/Teams.jsx b/src/APP/pages/products2/sections/Teams.jsx index 05201124..cc4c9782 100644 --- a/src/APP/pages/products2/sections/Teams.jsx +++ b/src/APP/pages/products2/sections/Teams.jsx @@ -49,7 +49,7 @@ function Teams() {

- Loading blog details... + Loading team details...

)} From e24e6b6004d9afff27f3b1b59ef1b8a070973ca0 Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Tue, 20 Feb 2024 21:11:54 +0300 Subject: [PATCH 5/6] remove comments --- src/APP/pages/products2/data.js | 202 -------------------------------- 1 file changed, 202 deletions(-) diff --git a/src/APP/pages/products2/data.js b/src/APP/pages/products2/data.js index f2e52065..950a8ac3 100644 --- a/src/APP/pages/products2/data.js +++ b/src/APP/pages/products2/data.js @@ -1,22 +1,3 @@ -// import { -// aaron, -// belinda, -// catherine, -// dave, -// emmy, -// fred, -// hudson, -// ian, -// james, -// pamela, -// sharon, -// temitayo, -// robert, -// // kasyoki, -// rizwan, -// raymond, -// hellen, -// } from "../../../assets/images/aboutPage"; import { angular, django, @@ -99,186 +80,3 @@ export const stackCollection = [ ], }, ]; - -// export const teams = { -// Design: [ -// { -// id: 1, -// name: "Emmy Akinyi", -// title: "UX Team Lead", -// headshot: emmy, -// portfolio: "https://www.linkedin.com/in/emmy-akinyi-16ab301a2", -// }, -// { -// id: 2, -// name: "Pamela Owino", -// title: "Lead Product Designer", -// headshot: pamela, -// portfolio: "https://www.linkedin.com/in/owino-pamela", -// }, -// { -// id: 3, -// name: "Fred Ouko", -// title: "Product Designer", -// headshot: fred, -// portfolio: "https://www.linkedin.com/in/fred-ouko-918293bb", -// }, -// { -// id: 4, -// name: "Aaron Abubakar", -// title: "Product Designer", -// headshot: aaron, -// portfolio: "https://www.linkedin.com/in/aroni-abubakari-b1a126146", -// }, -// { -// id: 5, -// name: "Robert Okusi", -// title: "Product Designer", -// headshot: robert, -// portfolio: "https://www.linkedin.com/in/robert-okusi", -// }, -// { -// id: 6, -// name: "Temitayo Adeleye", -// title: "Product Designer", -// headshot: temitayo, -// portfolio: "https://www.linkedin.com/in/adeleye-temitayo-1964b5b9", -// }, -// { -// id: 7, -// name: "Belinda Koech", -// title: "Product Designer", -// headshot: belinda, -// portfolio: "https://www.linkedin.com/in/thisisbesh", -// }, -// ], -// "Front-End Dev": [ -// { -// id: 1, -// name: "Rizwan Hamisi", -// title: "Frontend Developer", -// headshot: rizwan, -// portfolio: "https://www.linkedin.com/in/hamisi-rizwan-2b1a00230", -// }, -// { -// id: 2, -// name: "Sonia Lomo", -// title: "Frontend Developer", -// headshot: -// "https://media.licdn.com/dms/image/D4D03AQHLQHd_YdNIIw/profile-displayphoto-shrink_400_400/0/1703509213541?e=1709164800&v=beta&t=mdmSQ04f6kKSsngCSKhTl75bdXDZFUPPvFco2QQeZYo", -// portfolio: "https://www.linkedin.com/in/sonia-lomo/", -// }, -// { -// id: 3, -// name: "Felix Nyalenda", -// title: "Frontend Developer", -// headshot: "https://avatars.githubusercontent.com/u/68052150?v=4", -// portfolio: "https://www.linkedin.com/in/felix-olali-1652aa231", -// }, -// { -// id: 4, -// name: "David Clinton", -// title: "Frontend Developer", -// headshot: dave, -// portfolio: "https://www.linkedin.com/in/clintondavid46/", -// }, -// { -// id: 5, -// name: "Collins Kasyoki", -// title: "Software Developer", -// headshot: "https://avatars.githubusercontent.com/u/40399921?v=4", -// portfolio: "https://www.linkedin.com/in/collins-thano", -// }, -// { -// id: 6, -// name: "Lawrence Moindi", -// title: "Frontend Developer", -// headshot: -// "https://media.licdn.com/dms/image/D4D03AQEOYTI8_FXF3Q/profile-displayphoto-shrink_100_100/0/1680982692686?e=1707350400&v=beta&t=Vji_sa-dDdCNCNU4v5MAT5BPb8lc1iCFvMI9qGSWVWk", -// portfolio: "https://www.linkedin.com/in/lawrence-moindi-55b35773", -// }, -// { -// id: 7, -// name: "Catherine Kiiru", -// title: "Frontend Developer", -// headshot: catherine, -// portfolio: "https://www.linkedin.com/in/catherine-kiiru-47b2688b/", -// }, -// { -// id: 8, -// name: "Ian Mugenya", -// title: "Frontend Developer", -// headshot: ian, -// portfolio: "https://www.linkedin.com/in/ian-mugenya/", -// }, -// { -// id: 9, -// name: "Sharon Jebitok", -// title: "Frontend Developer", -// headshot: sharon, -// portfolio: "https://www.linkedin.com/in/sharon-jebitok/", -// }, -// ], -// "Back-End Dev": [ -// { -// id: 4, -// name: "James Otieno", -// title: "Backend Developer", -// headshot: james, -// portfolio: "https://www.linkedin.com/in/james-oduor/", -// }, -// { -// id: 5, -// name: "Hellen Wainaina", -// title: "Backend Developer", -// headshot: hellen, -// portfolio: "https://www.linkedin.com/in/hellen-wainaina-0946bb20b/", -// }, -// { -// id: 6, -// name: "Raymond Kipkorir", -// title: "Backend Developer", -// headshot: raymond, -// portfolio: "https://www.linkedin.com/in/raykipkorir/", -// }, -// { -// id: 7, -// name: "Fredrick Waihenya", -// title: "Backend Developer", -// headshot: -// "https://media.licdn.com/dms/image/D4D03AQGWRP9FzPhkag/profile-displayphoto-shrink_400_400/0/1701011405980?e=1706745600&v=beta&t=SAQGksEQUVrzMP70CJ2ShtwwbFMinxFtoQD4lMpeOuw", -// portfolio: "https://www.linkedin.com/in/waihenya/", -// }, -// { -// id: 8, -// name: "Collins Kasyoki", -// title: "Software Developer", -// headshot: "https://avatars.githubusercontent.com/u/40399921?v=4", -// portfolio: "https://www.linkedin.com/in/collins-thano", -// }, -// ], -// DevOps: [ -// { -// id: 1, -// name: "Hudson Obai", -// title: "DevOps Lead", -// headshot: hudson, -// portfolio: "https://www.linkedin.com/in/hudson-obai-3948aa204/", -// }, -// { -// id: 2, -// name: "James Otieno", -// title: "DevOps", -// headshot: james, -// portfolio: "https://www.linkedin.com/in/james-oduor/", -// }, -// { -// id: 3, -// name: "Spencer Ochieng", -// title: "DevOps", -// headshot: -// "https://media.licdn.com/dms/image/D4D03AQHgS719SVEGkw/profile-displayphoto-shrink_400_400/0/1698877680926?e=1706745600&v=beta&t=_ofudLp8BJN5voqACjZBvUsuPX5JnPAPY95Ovh9xppA", -// portfolio: "https://www.linkedin.com/in/spencerochieng/", -// }, -// ], -// }; From f4149b64337f2de554925b46bbbb0166fef9924b Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Sat, 24 Feb 2024 12:05:06 +0300 Subject: [PATCH 6/6] fix the img src --- .../pages/blog/sections/RelatedBlogCard.jsx | 75 +++++++++++ src/APP/pages/blog/sections/RelatedBlogs.jsx | 121 +++++++++--------- src/APP/pages/blogs/sections/BlogCard.jsx | 4 +- 3 files changed, 138 insertions(+), 62 deletions(-) create mode 100644 src/APP/pages/blog/sections/RelatedBlogCard.jsx diff --git a/src/APP/pages/blog/sections/RelatedBlogCard.jsx b/src/APP/pages/blog/sections/RelatedBlogCard.jsx new file mode 100644 index 00000000..5097c59f --- /dev/null +++ b/src/APP/pages/blog/sections/RelatedBlogCard.jsx @@ -0,0 +1,75 @@ +/* eslint-disable react/prop-types */ +import { formatDistanceToNow } from "date-fns"; +import React from "react"; +import { useNavigate, Link } from "react-router-dom"; + +import { arrowRight } from "../../../../assets/images/blogs-page"; +import logo from "../../../../assets/images/sytLogo.png"; +import { BlogStats } from "../../blogs/sections"; + +function RelatedBlogCard({ blog }) { + const navigate = useNavigate(); + + const timeAgo = + blog?.created_at && + formatDistanceToNow(new Date(blog?.created_at), { + addSuffix: true, + }); + + return ( + + {blog.title} + +
+
+

{blog.title}

+ + +
+ +

+ {blog.description} +

+ +
+
+ icon + +
+

+ {blog.author} +

+ {timeAgo} +
+
+ + +
+
+ + ); +} + +export default RelatedBlogCard; diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx index cc60f48b..09ebd142 100644 --- a/src/APP/pages/blog/sections/RelatedBlogs.jsx +++ b/src/APP/pages/blog/sections/RelatedBlogs.jsx @@ -1,60 +1,61 @@ -import { useEffect } from "react"; -import { useParams } from "react-router-dom"; -import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData"; -import BlogCard from "../../blogs/sections/BlogCard"; -import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs"; - -function RelatedBlogs({ blogId, categoryId }) { - const { title_slug } = useParams(); - - const { - data: relatedBlogsData, - refetch: refetchRelatedBlogsData, - isLoading, - isError, - isSuccess, - } = useRelatedBlogsData(categoryId); - - useEffect(() => { - refetchRelatedBlogsData(); - }, [title_slug]); - - const filteredRelatedBlogs = filterRelatedBlogs( - relatedBlogsData?.blogs, - title_slug - ); - - return ( - <> - {isError &&

Error loading blogs!

} - {isLoading &&

Loading blogs...

} - - {isSuccess && filteredRelatedBlogs.length > 0 && ( - <> -

- {filteredRelatedBlogs.length > 1 - ? "Related Articles" - : "Related Article"} -

-
- {Array.isArray(filteredRelatedBlogs) && - filteredRelatedBlogs.length > 0 ? ( - filteredRelatedBlogs - .filter(function (blog) { - if (blog.id === blogId) { - return false; - } - return true; - }) - .map((blog) => ) - ) : ( -

No related blogs found!

- )} -
- - )} - - ); -} - -export default RelatedBlogs; +import { useEffect } from "react"; +import { useParams } from "react-router-dom"; + +import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData"; +import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs"; +import RelatedBlogCard from "./RelatedBlogCard"; + +function RelatedBlogs({ blogId, categoryId }) { + const { titleSlug } = useParams(); + + const { + data: relatedBlogsData, + refetch: refetchRelatedBlogsData, + isLoading, + isError, + isSuccess, + } = useRelatedBlogsData(categoryId); + + useEffect(() => { + refetchRelatedBlogsData(); + }, [refetchRelatedBlogsData, titleSlug]); + + const filteredRelatedBlogs = filterRelatedBlogs( + relatedBlogsData?.blogs, + titleSlug + ); + + return ( + <> + {isError &&

Error loading blogs!

} + {isLoading &&

Loading blogs...

} + + {isSuccess && filteredRelatedBlogs.length > 0 && ( + <> +

+ {filteredRelatedBlogs.length > 1 + ? "Related Articles" + : "Related Article"} +

+
+ {Array.isArray(filteredRelatedBlogs) && + filteredRelatedBlogs.length > 0 ? ( + filteredRelatedBlogs + .filter(function (blog) { + if (blog.id === blogId) { + return false; + } + return true; + }) + .map((blog) => ) + ) : ( +

No related blogs found!

+ )} +
+ + )} + + ); +} + +export default RelatedBlogs; diff --git a/src/APP/pages/blogs/sections/BlogCard.jsx b/src/APP/pages/blogs/sections/BlogCard.jsx index 1717d63a..e252464d 100644 --- a/src/APP/pages/blogs/sections/BlogCard.jsx +++ b/src/APP/pages/blogs/sections/BlogCard.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ +import { formatDistanceToNow } from "date-fns"; import React from "react"; import { useNavigate, Link } from "react-router-dom"; -import { formatDistanceToNow } from "date-fns"; import { arrowRight } from "../../../../assets/images/blogs-page"; import logo from "../../../../assets/images/sytLogo.png"; @@ -23,7 +23,7 @@ function BlogCard({ blog }) { > blog