From ce6d0af66bde59926b467a565fa468703161c724 Mon Sep 17 00:00:00 2001 From: Lucas Huerta Date: Wed, 14 Feb 2024 16:58:01 +0100 Subject: [PATCH 1/2] WIP get skills user --- src/components/Header/Index.tsx | 34 ++++++++++++++--------------- src/screens/Profil.tsx | 37 +++++++++++++++++++++----------- src/screens/Projectspage.tsx | 24 ++------------------- src/services/api/Skills/index.ts | 13 +++++++++++ 4 files changed, 55 insertions(+), 53 deletions(-) diff --git a/src/components/Header/Index.tsx b/src/components/Header/Index.tsx index 0b4f4a1..f819ed4 100644 --- a/src/components/Header/Index.tsx +++ b/src/components/Header/Index.tsx @@ -1,3 +1,4 @@ +import { DefaultButton } from "@components/Common/Buttons/DefaultButton"; import { useAuth } from "@contexts/AuthContext"; import { AuthServices } from "@services/api"; import Link from "next/link"; @@ -32,21 +33,21 @@ export const Header: React.FC = () => { Home Projects - About Me
- {isLogged ? ( - - Sign Out - - - ) : ( - - Sign in - - )} + + {isLogged ? ( + + Sign out + + ) : ( + + Sign in + + )} +
@@ -62,6 +63,10 @@ const HeaderContainer = styled.div` align-items: center; `; +const ContainerButtons = styled.div` + display: flex; +`; + const NavigationContainer = styled.div` display: flex; align-items: center; @@ -115,15 +120,8 @@ const LinksContainer = styled.div` `; const StyledSignin = styled(Link)` - background-color: black; - color: white; - padding: 8px 24px; - border-radius: 15px; - font-size: 16px; cursor: pointer; max-width: fit-content; - display: flex; - gap: 12px; `; const RoundedContainer = styled.div` diff --git a/src/screens/Profil.tsx b/src/screens/Profil.tsx index bb915fb..dc3960a 100644 --- a/src/screens/Profil.tsx +++ b/src/screens/Profil.tsx @@ -4,6 +4,7 @@ import { LinkSeeAll } from "@components/Common/Links/SeeAllLink"; import { TagSkill } from "@components/Common/Tags/SkillsTag"; import { useAuth } from "@contexts/AuthContext"; import { ProjectsServices } from "@services/api"; +import { SkillsServices } from "@services/api"; import { ProjectData } from "@typesDef/project/project"; import styled from "styled-components"; @@ -19,19 +20,7 @@ export const ProfileScreen: React.FC = () => { "Adobe XD", ]; - // const tabProjects = [ - // { - // title: "Projet 1", - // description: "Description du projet 1 => Projet de test, aucune données", - // image: "https://via.placeholder.com/150", - // }, - // { - // title: "Projet 2", - // description: "Description du projet 2 => Projet de test, aucune données", - // image: "https://via.placeholder.com/150", - // }, - // ]; - + const skillService = new SkillsServices(); const { user } = useAuth(); const projectService = new ProjectsServices(); const [projects, setProjects] = useState({ @@ -39,6 +28,11 @@ export const ProfileScreen: React.FC = () => { error: null, }); + const [skills, setSkill] = useState({ + skills: null, + error: null, + }); + useEffect(() => { const getProjects = async () => { try { @@ -46,6 +40,21 @@ export const ProfileScreen: React.FC = () => { user?.id as string, ); setProjects({ project, error }); + + if (project) { + const skills = await Promise.all( + project.map( + async (project) => + await skillService.getAllSkillUser( + project.id as unknown as string, + ), + ), + ); + // const skills = await skillService.getAllSkillUser( + // project.map((project) => project.id), + // ); + setSkill({ skills: skills || null, error: null }); + } } catch (error) { console.error("Erreur lors de la récupération des projets :", error); } @@ -54,6 +63,8 @@ export const ProfileScreen: React.FC = () => { getProjects(); }, []); + console.log("skills", skills); + return ( <> diff --git a/src/screens/Projectspage.tsx b/src/screens/Projectspage.tsx index 9c05e00..a00f3b9 100644 --- a/src/screens/Projectspage.tsx +++ b/src/screens/Projectspage.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import Avatar from "@assets/images/avatar.png"; import ProjectImage from "@assets/images/projectImage.png"; import { BackdropComponent } from "@components/Common/BackDrop/Backdrop"; +import { DefaultButton } from "@components/Common/Buttons/DefaultButton"; import { RoundedContainer } from "@components/Common/Containers/RoundedContainer"; import { useAuth } from "@contexts/AuthContext"; import { UsersServices } from "@services/api/Users"; @@ -78,10 +79,7 @@ export const ProjectsScreen: React.FC = ({ fetch }) => { {isLogged ? ( - - Add your own Project - - + Add your own project ) : ( @@ -178,24 +176,6 @@ const ProjectsContainer = styled.div` width: 100%; `; -const StyledButton = styled.button` - background: ${({ theme }) => theme.colors.blue}; - border-radius: 15px; - padding: 8px 24px; - color: white; - font-size: 16px; - border: none; - font-weight: 500; - cursor: pointer; - display: flex; - align-items: center; - gap: 8px; - - & span { - color: white; - } -`; - const ContainerSignup = styled.div` display: flex; flex-direction: column; diff --git a/src/services/api/Skills/index.ts b/src/services/api/Skills/index.ts index e3f923b..94ae279 100644 --- a/src/services/api/Skills/index.ts +++ b/src/services/api/Skills/index.ts @@ -10,4 +10,17 @@ export class SkillsServices { return data; } + + async getAllSkillUser(projectId: string) { + const { data, error } = await supabase + .from("aw_skill_project") + .select("skillId") + .eq("projectId", projectId); + + if (error) { + console.error(error); + } + + return data; + } } From 3fb9acb7f2f47a7ee44022ca56ed06de358fdddb Mon Sep 17 00:00:00 2001 From: Lucas Huerta Date: Thu, 15 Feb 2024 11:47:34 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20skills=20in=20profil=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 2 +- src/screens/Profil.tsx | 50 ++++++++++++++------------------ src/services/api/Skills/index.ts | 23 ++++++++++++--- src/types/skill/skill.ts | 2 +- 4 files changed, 43 insertions(+), 34 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 3bfbc91..aded410 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -46,7 +46,7 @@ "simple-import-sort/exports": "error", "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }], "react/jsx-props-no-spreading": [0], - "react/no-unknown-property": ["error", { "ignore": ["jsx"] }], + "react/no-unknown-property": ["warn", { "ignore": ["jsx"] }], "react/react-in-jsx-scope": "off", "react/jsx-indent-props": ["error", 2], "import/extensions": [0], diff --git a/src/screens/Profil.tsx b/src/screens/Profil.tsx index dc3960a..c741dbd 100644 --- a/src/screens/Profil.tsx +++ b/src/screens/Profil.tsx @@ -6,20 +6,10 @@ import { useAuth } from "@contexts/AuthContext"; import { ProjectsServices } from "@services/api"; import { SkillsServices } from "@services/api"; import { ProjectData } from "@typesDef/project/project"; +import { Skill, SkillData } from "@typesDef/skill/skill"; import styled from "styled-components"; export const ProfileScreen: React.FC = () => { - const tabTags = [ - "React", - "Node", - "TypeScript", - "JavaScript", - "React Native", - "Next.js", - "Figma", - "Adobe XD", - ]; - const skillService = new SkillsServices(); const { user } = useAuth(); const projectService = new ProjectsServices(); @@ -28,7 +18,7 @@ export const ProfileScreen: React.FC = () => { error: null, }); - const [skills, setSkill] = useState({ + const [skills, setSkill] = useState({ skills: null, error: null, }); @@ -42,18 +32,16 @@ export const ProfileScreen: React.FC = () => { setProjects({ project, error }); if (project) { - const skills = await Promise.all( - project.map( - async (project) => - await skillService.getAllSkillUser( - project.id as unknown as string, - ), - ), + const fetchSkills = await skillService.getAllSkillUser( + project.map((p) => p.id), ); - // const skills = await skillService.getAllSkillUser( - // project.map((project) => project.id), - // ); - setSkill({ skills: skills || null, error: null }); + + const fetchSkillsWithContent = fetchSkills.map((skill: Skill) => ({ + ...skill, + content: skill, + })); + + setSkill({ skills: fetchSkillsWithContent, error: null }); } } catch (error) { console.error("Erreur lors de la récupération des projets :", error); @@ -63,8 +51,6 @@ export const ProfileScreen: React.FC = () => { getProjects(); }, []); - console.log("skills", skills); - return ( <> @@ -90,9 +76,17 @@ export const ProfileScreen: React.FC = () => { - {tabTags.map((tag, index) => ( - - ))} + {skills.skills && skills.skills?.length > 0 ? ( + skills.skills?.map((tag, index) => ( + + )) + ) : ( +

Aucun skills

+ )} diff --git a/src/services/api/Skills/index.ts b/src/services/api/Skills/index.ts index 94ae279..ce741ce 100644 --- a/src/services/api/Skills/index.ts +++ b/src/services/api/Skills/index.ts @@ -11,11 +11,26 @@ export class SkillsServices { return data; } - async getAllSkillUser(projectId: string) { + async getAllSkillUser(projectId: Array) { + const { data, error } = await supabase.rpc("get_projects_by_id", { + projectids: projectId, + }); + if (error) { + console.error(error); + } + + const allSkills = data.reduce((acc: unknown, curr: unknown) => { + return acc.concat(curr.skills); + }, []); + + return allSkills; + } + + async getOneSkill(skillId: number) { const { data, error } = await supabase - .from("aw_skill_project") - .select("skillId") - .eq("projectId", projectId); + .from("aw_skills") + .select("*") + .eq("id", skillId); if (error) { console.error(error); diff --git a/src/types/skill/skill.ts b/src/types/skill/skill.ts index a77237a..9467bc2 100644 --- a/src/types/skill/skill.ts +++ b/src/types/skill/skill.ts @@ -6,6 +6,6 @@ export type Skill = { }; export interface SkillData { - project: Array | null; + skills: Array | null; error: PostgrestError | null; }