fix: ninja badges

apps/app/components/LectureForm/index.js

@@ -52,16 +52,16 @@ export default function LectureForm({ id }) {
 
   const [ninjas, setNinjas] = useState([]);
 
-  let promise;
+  useEffect(() => {
+    let promise;
 
-  const fetchData = () => {
-    if (!promise) {
-      promise = Promise.all(events.map((event) => getNinjaEvents(event.id)));
-    }
-    return promise;
-  };
+    const fetchData = () => {
+      if (!promise) {
+        promise = Promise.all(events.map((event) => getNinjaEvents(event.id)));
+      }
+      return promise;
+    };
 
-  useEffect(() => {
     fetchData().then((responses) => {
       const allNinjas = responses.flatMap((response) => response.data);
       setNinjas(

apps/app/components/Profile/index.tsx

@@ -6,7 +6,6 @@ import {
   Row,
   Space,
   Tabs,
-  Tag,
   Timeline,
   Typography,
 } from "antd";
@@ -20,14 +19,13 @@ import * as api from "bokkenjs";
 import * as socials from "~/lib/social";
 import { notifyError, notifyInfo } from "~/components/Notification";
 import styles from "./style.module.css";
-import { EUser } from "bokkenjs";
-
-import { BsFileEarmarkPersonFill } from "react-icons/bs";
-
+import { EUser, getNinjasAsAdmin, updateGuardianAsAdmin } from "bokkenjs";
+import Link from "next/link";
 import { getIcon } from "~/lib/utils";
 
 const { TabPane } = Tabs;
-const { Title } = Typography;
+
+const { Title, Text } = Typography;
 
 interface Props {
   id: string;
@@ -39,65 +37,95 @@ function Profile({ id, role }: Props) {
   const [badges, setBadges] = useState<any[]>([]);
   const [projects, setProjects] = useState<any[]>([]);
   const [skills, setSkills] = useState<any[]>([]);
-  const [date, setDate] = useState<String>("");
+  const [date, setDate] = useState<string>("");
+  const [guardian, setGuardians] = useState<any>([]);
 
   useEffect(() => {
-    api
-      .getUserByRole({ id, role })
-      .then((response) => setInfo(response.data))
-      .catch((error) => {
+    const fetchUserByRole = async () => {
+      try {
+        const response = await api.getUserByRole({ id, role });
+        setInfo(response.data);
+      } catch (error) {
         notifyError(
           "Ocorreu um erro",
           "Não foi possível obter os dados do utilizador"
         );
-      });
+      }
+    };
 
-    if (role == EUser.Mentor) {
-      api
-        .getMentorSkills(id)
-        .then((response) => setSkills(response.data))
-        .catch((error) => {
-          notifyError(
-            "Ocorreu um erro",
-            "Não foi possível obter os conhecimentos do mentor"
-          );
-        });
-    } else if (role == EUser.Ninja) {
-      api
-        .getNinjaBadges(id)
-        .then((response) => setBadges(response.data))
-        .catch((error) => {
-          notifyError(
-            "Ocorreu um erro",
-            "Não foi possível obter os crachás do ninja"
-          );
-        });
+    const fetchMentorSkills = async () => {
+      try {
+        const response = await api.getMentorSkills(id);
+        setSkills(response.data);
+      } catch (error) {
+        notifyError(
+          "Ocorreu um erro",
+          "Não foi possível obter os conhecimentos do mentor"
+        );
+      }
+    };
 
-      api
-        .getNinjaFiles(id)
-        .then((response) => setProjects(response.data))
-        .catch((error) => {
-          notifyError(
-            "Ocorreu um erro",
-            "Não foi possível obter os ficheiros do ninja"
-          );
-        });
+    const fetchNinjaBadges = async () => {
+      try {
+        const response = await api.getNinjaBadges(id);
+        setBadges(response.data);
+      } catch (error) {
+        notifyError(
+          "Ocorreu um erro",
+          "Não foi possível obter os crachás do ninja"
+        );
+      }
+    };
 
-      api
-        .getNinjaSkills(id)
-        .then((response) => setSkills(response.data))
-        .catch((error) => {
-          notifyError(
-            "Ocorreu um erro",
-            "Não foi possível obter as linguagens do ninja"
-          );
-        });
+    const fetchNinjaFiles = async () => {
+      try {
+        const response = await api.getNinjaFiles(id);
+        setProjects(response.data);
+      } catch (error) {
+        notifyError(
+          "Ocorreu um erro",
+          "Não foi possível obter os ficheiros do ninja"
+        );
+      }
+    };
+
+    const fetchNinjaSkills = async () => {
+      try {
+        const response = await api.getNinjaSkills(id);
+        setSkills(response.data);
+      } catch (error) {
+        notifyError(
+          "Ocorreu um erro",
+          "Não foi possível obter as linguagens do ninja"
+        );
+      }
+    };
+
+    fetchUserByRole();
+
+    if (role === EUser.Mentor) {
+      fetchMentorSkills();
+    } else if (role === EUser.Ninja) {
+      fetchNinjaBadges();
+      fetchNinjaFiles();
+      fetchNinjaSkills();
     }
   }, [id, role]);
 
   useEffect(() => {
-    setDate(moment(info.since).format("DD/MM/YYYY"));
-  }, [info]);
+    if (info.since) {
+      setDate(moment(info.since).format("DD/MM/YYYY"));
+    }
+  }, [info.since]);
+
+  useEffect(() => {
+    if (role === EUser.Ninja) {
+      api
+        .getGuardian(info.guardian_id)
+        .then((response: any) => setGuardians(response.data))
+        .catch((error: any) => {});
+    }
+  }, [info.guardian_id, role]);
 
   return (
     <>
@@ -115,32 +143,36 @@ function Profile({ id, role }: Props) {
             src={info?.photo}
             icon={<UserOutlined />}
           />
-          <Row justify="center" align="middle">
-            <Col span={24}>
-              <Title level={2}>
-                {info.first_name} {info.last_name}
-              </Title>
-            </Col>
-            <Col span={24}>
-              <Title className={styles.capitalize} level={4}>
-                <BsFileEarmarkPersonFill /> {role}
-              </Title>
-            </Col>
-            <Col span={24}>
-              <Title level={5}>Conta criada em: {date}</Title>
-            </Col>
-
-            {"belt" in info && (
-              <Col span={24}>
-                <Belt belt={info.belt} />
-              </Col>
-            )}
-
-            <Col span={24}>
+          <Col span={25}>
+            <Title level={2} style={{ marginBottom: "0px" }}>
+              {info.first_name} {info.last_name}
+            </Title>
+            <p style={{ fontSize: "18px", marginBottom: "3px" }}>
+              {role.charAt(0).toUpperCase() + role.slice(1)}
+              {role === EUser.Ninja && (
+                <>
+                  <span style={{ marginLeft: "6px", fontSize: "18px" }}>
+                    de{" "}
+                    <Link href={`/profile/guardian/${guardian.id}`}>
+                      <a>
+                        {guardian.first_name} {guardian.last_name}
+                      </a>
+                    </Link>
+                  </span>
+                </>
+              )}
+            </p>
+            <p style={{ fontSize: "14px", marginBottom: "3px" }}>
+              Conta criada em: {date}
+            </p>
+            <p style={{ marginBottom: "5px", marginTop: "3px" }}>
+              <Belt belt={info.belt} />
+            </p>
+            <p style={{ marginBottom: "2px" }}>
               <Space style={{ fontSize: 20 }}>
                 {info?.socials?.map((social: any) =>
-                  social?.name == "discord" || social?.name == "slack" ? (
-                    <a title={social.username}>
+                  social?.name === "discord" || social?.name === "slack" ? (
+                    <a key={social.id} title={social.username}>
                       {socials.ICONS[social.name as keyof typeof socials.URLS]}
                     </a>
                   ) : (
@@ -150,32 +182,41 @@ function Profile({ id, role }: Props) {
                       rel="noreferrer"
                       href={`${
                         socials.URLS[social.name as keyof typeof socials.URLS]
-                      }/${social.username}`}
+                      }${social.username}`}
                     >
                       {socials.ICONS[social.name as keyof typeof socials.URLS]}
                     </a>
                   )
                 )}
               </Space>
-            </Col>
-
-            <Col span={24}>
-              {skills.map((s) => (
-                <Tag key={s.id}>
-                  {getIcon(s.name)} {s.name}
-                </Tag>
+            </p>
+            <p>
+              {skills.map((s: any) => (
+                <div
+                  style={{
+                    display: "inline-block",
+                    fontSize: 20,
+                    marginRight: "6px",
+                    color: "#424549",
+                  }}
+                  key={s.id}
+                >
+                  {getIcon(s.name)}
+                </div>
               ))}
-            </Col>
-          </Row>
+            </p>
+          </Col>
         </Space>
       </Row>
       <Tabs defaultActiveKey="1" centered>
         <TabPane tab="Eventos" key="1">
           <Timeline mode="alternate">
-            <Timeline.Item dot={<ClockCircleOutlined />}>
-              Registou-se na plataforma{" "}
-              {moment(info.since).locale("pt").fromNow()}
-            </Timeline.Item>
+            <Col span={21}>
+              <Timeline.Item dot={<ClockCircleOutlined />}>
+                Registou-se na plataforma{" "}
+                {moment(info.since).locale("pt").fromNow()}
+              </Timeline.Item>
+            </Col>
           </Timeline>
         </TabPane>
         {role === EUser.Ninja && (

apps/app/components/Profile/style.module.css

@@ -1,3 +1,3 @@
 .capitalize {
-  text-transform: capitalize;
-}
+    text-transform: capitalize;
+  }

apps/app/components/Register/index.tsx

@@ -60,7 +60,6 @@ function Register({ cities }: any) {
   ]);
 
   const onFinish = (values: any) => {
-    console.log(values);
     setLoading(true);
     api
       .registerUser(values)

apps/app/lib/social.tsx

@@ -5,7 +5,8 @@ import {
   FaSlack,
   FaTrello,
 } from "react-icons/fa";
-import { SiCodewars, SiScratch } from "react-icons/si";
+import { SiCodewars, SiScratch, SiSurveymonkey } from "react-icons/si";
+import { AiOutlineReddit } from "react-icons/ai";
 
 export const ICONS = {
   scratch: <SiScratch />,
@@ -15,6 +16,8 @@ export const ICONS = {
   trello: <FaTrello />,
   discord: <FaDiscord />,
   slack: <FaSlack />,
+  lightbot: <AiOutlineReddit />,
+  codemonkey: <SiSurveymonkey />,
 };
 
 export const URLS = {

apps/app/lib/utils.tsx

@@ -1,32 +1,41 @@
 import {
   SiCodewars,
+  SiCss3,
   SiDiscord,
   SiGithub,
   SiGitlab,
+  SiHtml5,
+  SiJavascript,
   SiPython,
   SiScratch,
   SiSlack,
   SiTrello,
 } from "react-icons/si";
 
 export function getIcon(skill: string) {
-  if (skill.startsWith("Python")) {
-    return <SiPython />;
-  } else if (skill.startsWith("Scratch")) {
-    return <SiScratch />;
-  }
-
   switch (skill) {
+    case "Python":
+      return <SiPython />;
+
     case "Scratch":
       return <SiScratch />;
     case "Codewars":
       return <SiCodewars />;
+    case "HTML/CSS/Javascript":
+      return (
+        <>
+          <div className="row flex">
+            <SiHtml5 style={{ marginRight: "8px" }} />
+            <SiCss3 style={{ marginRight: "8px" }} />
+            <SiJavascript />
+          </div>
+        </>
+      );
+
     case "GitHub":
       return <SiGithub />;
     case "GitLab":
       return <SiGitlab />;
-    case "Trello":
-      return <SiTrello />;
     case "Discord":
       return <SiDiscord />;
     case "Slack":