Merge pull request #69 from occamengenharia/gamificacao

✨ feat: Page Rankink de membros and update data

src/components/MemberStatistics/index.tsx

@@ -96,10 +96,12 @@ const MemberStatistics: React.FC<IMemberStatisticsProps> = ({
   selectOptions
 }) => {
   const fullName =
-    member.name.split(' ')[0] +
+    member?.name.split(' ')[0] +
     ' ' +
-    member.name.split(' ')[member.name.split(' ').length - 1]
+    member?.name.split(' ')[member.name.split(' ').length - 1]
   const formRef = useRef()
+  console.log(member);
+
   const router = useRouter()
   const handleChangeMember = useCallback((option: OptionTypeBase) => {
     if (option) {
@@ -112,12 +114,12 @@ const MemberStatistics: React.FC<IMemberStatisticsProps> = ({
         <MemberProgress {...member} />
         <figcaption>
           <label htmlFor="member">{fullName}</label>
-          <i>{member.profession}</i>
+          <i>{member?.profession}</i>
           <aside>
-            <a href={member.link_github}>
+            <a href={member?.link_github}>
               <FaGithub />
             </a>
-            <a href={member.link_linkedin}>
+            <a href={member?.link_linkedin}>
               <FaLinkedin />
             </a>
           </aside>
@@ -141,7 +143,7 @@ const MemberStatistics: React.FC<IMemberStatisticsProps> = ({
         <Box>
           <aside>
             <strong>Total de pontos</strong>
-            <span>{10 + 'xp'}</span>
+            <span>{member?.total_experience + 'xp'}</span>
           </aside>
           <aside>
             <strong>Posição no ranking</strong>
@@ -150,10 +152,10 @@ const MemberStatistics: React.FC<IMemberStatisticsProps> = ({
         </Box>
         <Box>
           <strong>Conquistas</strong>
-          <section></section>
+          <section>{member?.achievements.map(achievement=><span key={achievement.id} title={achievement.title}> {achievement.emoji} </span>)}</section>
         </Box>
         <Links>
-          <a href="#placarGeral">Placar Geral</a>
+          <a href="/ranking-de-membros">Placar Geral</a>
           <Link href="/pontos">
             <a>Pontos</a>
           </Link>

src/components/MemberStatistics/interfaces.ts

@@ -3,11 +3,25 @@ export interface IPropsMemberProgress {
   percent: number
   name: string
   urlImg: string
+  achievements: IAchievementsProps[]
+  total_experience: string
 }
 interface IConquests {
   emoji: string
   title: string
 }
+
+export interface IAchievementsProps{
+  createdAt: string
+  description: string
+  emoji: string
+  id: string
+  published_at: string
+  reward: string
+  title: string
+  updatedAt: string
+}
+
 export interface IMembersStatistics extends IPropsMemberProgress {
   profession: string
   experiencePoints: number

src/pages/pontos.tsx

@@ -78,7 +78,7 @@ const Pontos: React.FC<IPointsProps> = ({ pointsList }) => {
             {pointsList.map(points => (
                 <tr>
                 <td>{points.description }</td>
-                <td>{points.points + points.is_multipliable}</td>
+                <td>{points.points} <h5 color="red"> {points.is_multipliable? "Multiplicador": ""} </h5></td>
                 </tr>
             ))}
             </SortableTable>

src/pages/ranking-de-membros/[slug].tsx → src/pages/ranking-de-membros/[[...slug]].tsx

@@ -1,6 +1,6 @@
 import SortableTable from '@/components/SortableTable'
 import MemberStatistics from '@/components/MemberStatistics'
-import { IMembersStatistics } from '@/components/MemberStatistics/interfaces'
+import { IAchievementsProps, IMembersStatistics } from '@/components/MemberStatistics/interfaces'
 import { Container } from '@/styles/pages/Ranking'
 import { GetServerSideProps, GetStaticPaths, GetStaticProps } from 'next'
 import api from '@/services/api'
@@ -11,6 +11,19 @@ interface IPosition {
   start_date_position: string
   end_date_position: string
 }
+interface ILevelProps{
+    level: number
+    maximum_points: string
+    minimum_points: string
+    _id: string
+    status: string
+    published_at: string
+    createdAt: string
+    updatedAt: string
+    __v: string,
+    id: string
+}
+
 interface IMember {
   _id: string
   course: 'CP' | 'ADS'
@@ -19,43 +32,58 @@ interface IMember {
   link_github: string
   name: string
   slug: string
+  level: ILevelProps
   output_date: string
   entry_date: string
   positions: IPosition[]
   photo: {
     url: string
   }
+  profession:string
+  achievements: IAchievementsProps[]
+  experiencePoints: number
 }
 interface IRankingProps {
   members: IMember[]
   currentMember?: IMember
 }
+
+
 const Ranking: React.FC<IRankingProps> = ({ members, currentMember }) => {
-  const memberExemple: IMembersStatistics = {
-    name: 'Jeferson Rosa de Souza',
-    profession: 'Diretor de Projetos',
-    urlImg: currentMember.photo.url,
-    level: 15,
-    conquests: [{ title: 'feliz', emoji: '🤫' }],
-    percent: 92,
-    experiencePoints: 1200,
-    ...currentMember
+
+  if(!(JSON.stringify(currentMember) === "{}")){
+    var memberStstisttic : IMembersStatistics = {
+      profession: currentMember.profession,
+      experiencePoints: currentMember.experiencePoints,
+      conquests: currentMember.achievements,
+      link_github: currentMember.link_github,
+      link_linkedin: currentMember.link_linkedin,
+      achievements: currentMember.achievements,
+      level: currentMember.level.level,
+      name: currentMember.name,
+      percent: 30,
+      total_experience: currentMember.experiencePoints?.toString(),
+      urlImg: currentMember.photo.url
+    }
   }
-  const router = useRouter()
-  console.log(currentMember)
+
+
 
   return (
     <Container>
       <main>
-        <MemberStatistics
-          member={memberExemple}
+        {!(JSON.stringify(currentMember) === "{}") && 
+          <MemberStatistics
+          member= {memberStstisttic}
           selectOptions={members.map(member => {
             return {
-              value: member.slug,
-              label: member.name
+              value: member?.slug,
+              label: member?.name
             }
           })}
-        />
+      />
+        }
+
         <h3>Placar Geral</h3>
         <SortableTable
           columnHeaders={[
@@ -86,10 +114,21 @@ interface IMebersSerialized {
   members: IMember[]
 }
 export const getServerSideProps: GetServerSideProps = async context => {
-  const { slug } = context.params
+  console.log(context.params);
+  console.log(JSON.stringify(context.params) === "{}");
+
+
   const { data } = await api.get<IMember[]>('/members')
-  const currentMember = data.find(member => member.slug === slug)
+  let currentMember = {} as IMember
+  if(!(JSON.stringify(context.params) === "{}")){
+    const { slug } = context.params
+    console.log("entrei");
+
+    currentMember = data.find(member => member.slug === slug[0])
+  }
+
   const members = data.filter(member => member.active)
+
   return {
     props: {
       members,