Global fixes + Ajout des skills dans la page profil utilisateur

.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],

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";
@@ -30,23 +31,23 @@ export const Header: React.FC = () => {
         </TitleContainer>
         <RoundedContainer>
           <LinksContainer>
-            <StyledLink href="/">Accueil</StyledLink>
-            <StyledLink href="/projects">Projets</StyledLink>
-            <StyledLink href="/About">About</StyledLink>
-            <StyledLink href="/users/me">Moi</StyledLink>
+            <StyledLink href="/">Home</StyledLink>
+            <StyledLink href="/projects">Projects</StyledLink>
+            <StyledLink href="/users/me">Me</StyledLink>
           </LinksContainer>
         </RoundedContainer>
         <div>
-          {isLogged ? (
-            <StyledSignin href="" onClick={handleSignOut}>
-              Se déconnecter
-              <i className="ri-arrow-right-up-line"></i>
-            </StyledSignin>
-          ) : (
-            <StyledSignin href="/auth/signin">
-              Se connecter <i className="ri-arrow-right-up-line"></i>
-            </StyledSignin>
-          )}
+          <ContainerButtons>
+            {isLogged ? (
+              <DefaultButton type="default" onClick={handleSignOut}>
+                Sign out
+              </DefaultButton>
+            ) : (
+              <StyledSignin href="/auth/signin">
+                <DefaultButton type="default">Sign in</DefaultButton>
+              </StyledSignin>
+            )}
+          </ContainerButtons>
         </div>
       </HeaderContainer>
     </NavigationContainer>
@@ -63,6 +64,10 @@ const HeaderContainer = styled.div`
   padding: 0 50px;
 `;
 
+const ContainerButtons = styled.div`
+  display: flex;
+`;
+
 const NavigationContainer = styled.div`
   display: flex;
   align-items: center;
@@ -116,15 +121,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`

src/screens/Profil.tsx

@@ -4,48 +4,45 @@ 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 { 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 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<ProjectData>({
     project: null,
     error: null,
   });
 
+  const [skills, setSkill] = useState<SkillData>({
+    skills: null,
+    error: null,
+  });
+
   useEffect(() => {
     const getProjects = async () => {
       try {
         const { project, error } = await projectService.getAllUserProject(
           user?.id as string,
         );
         setProjects({ project, error });
+
+        if (project) {
+          const fetchSkills = await skillService.getAllSkillUser(
+            project.map((p) => p.id),
+          );
+
+          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);
       }
@@ -79,9 +76,17 @@ export const ProfileScreen: React.FC = () => {
             <ContainerInfosSkills>
               <RowContainer>
                 <RowSkills style={{ justifyContent: "space-around" }}>
-                  {tabTags.map((tag, index) => (
-                    <TagSkill content={tag} isIcon={false} key={index} />
-                  ))}
+                  {skills.skills && skills.skills?.length > 0 ? (
+                    skills.skills?.map((tag, index) => (
+                      <TagSkill
+                        content={tag.content}
+                        isIcon={false}
+                        key={index}
+                      />
+                    ))
+                  ) : (
+                    <p>Aucun skills</p>
+                  )}
                 </RowSkills>
               </RowContainer>
             </ContainerInfosSkills>

src/screens/Projectspage.tsx

@@ -49,9 +49,9 @@ export const ProjectsScreen: React.FC<ProjectsScreenProps> = ({ fetch }) => {
   return (
     <ProjectsContainer>
       {isLogged ? (
-        <DefaultButton href="/projects/add" type="primary">
-          Ajouter votre projet
-        </DefaultButton>
+        <Link href="/add-project">
+          <DefaultButton type="primary">Add your own project</DefaultButton>
+        </Link>
       ) : (
         <ContainerSignup>
           <p>Connectez vous pour ajouter un projet</p>

src/services/api/Skills/index.ts

@@ -10,4 +10,32 @@ export class SkillsServices {
 
     return data;
   }
+
+  async getAllSkillUser(projectId: Array<number>) {
+    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_skills")
+      .select("*")
+      .eq("id", skillId);
+
+    if (error) {
+      console.error(error);
+    }
+
+    return data;
+  }
 }

src/types/skill/skill.ts

@@ -6,6 +6,6 @@ export type Skill = {
 };
 
 export interface SkillData {
-  project: Array<Skill> | null;
+  skills: Array<Skill> | null;
   error: PostgrestError | null;
 }