feat(About): implement project members roles

PoliNetworkOrg · Mar 23, 2024 · ae64a2d · ae64a2d
1 parent 6d19b79
commit ae64a2d
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 55 deletions.
diff --git a/src/components/pages/About.tsx b/src/components/pages/About.tsx
@@ -1,4 +1,9 @@
-import { links, members } from '../../utils/constants'
+import {
+  MemberRole,
+  MemberRoleKeys,
+  links,
+  members
+} from '../../utils/constants'
 import { StyleSheet, theme } from '../../utils/style'
 import telegramLogo from '../../static/telegram_logo.svg'
 import Wrapper from '../Util/Wrapper'
@@ -25,6 +30,11 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     height: '100%',
     gap: 10,
+    textAlign: 'left',
+    flex: 1
+  },
+  fullWidth: {
+    width: '100%',
     textAlign: 'left'
   },
   link: {
@@ -64,13 +74,23 @@ export default function About() {
       </p>
       <div style={{ ...styles.grid, flexDirection: mobile ? 'column' : 'row' }}>
         <div style={styles.col}>
-          <ProjectTeam />
+          <MembersByRole
+            role={MemberRole.ProjectLeader}
+            titleKey="about.roles.projectLeader"
+          />
+          <MembersByRole
+            role={MemberRole.Author}
+            titleKey="about.roles.author"
+          />
         </div>
         <div style={styles.col}>
-          <AdHoc />
-          <TgGroups />
+          <MembersByRole role={MemberRole.Dev} titleKey="about.roles.dev" />
+          <MembersByRole role={MemberRole.AdHoc} titleKey="about.roles.adHoc" />
         </div>
       </div>
+      <div style={styles.fullWidth}>
+        <TgGroups />
+      </div>
     </Wrapper>
   )
 }
@@ -83,49 +103,25 @@ function TgLogo() {
   )
 }
 
-function ProjectTeam() {
-  const { t } = useTranslation()
-  const team = members
-    .filter((m) => !m.ah)
-    .sort((a, b) => (a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1))
-
-  return (
-    <div>
-      <b>{t('about.projectTeam')}</b>
-      <ul style={styles.list}>
-        {team.map((m, i) => (
-          <li key={i}>
-            <p style={styles.liP}>
-              {(m.prefix || '') + ' ' + m.name}{' '}
-              <a
-                href={`https://t.me/${m.tg}`}
-                target="_blank"
-                rel="noreferrer noopener"
-                style={styles.telegramLink}
-              >
-                <TgLogo />
-              </a>
-            </p>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
+interface MembersByRoleProps {
+  role: MemberRoleKeys
+  titleKey: string
 }
 
-function AdHoc() {
-  const ah = members
-    .filter((m) => !!m.ah)
+function MembersByRole({ role, titleKey }: MembersByRoleProps) {
+  const { t } = useTranslation()
+  const filteredByRole = members
+    .filter((m) => m.roles.includes(role))
     .sort((a, b) => (a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1))
 
   return (
     <div>
-      <span>Ad hoc</span>
+      <b>{t(titleKey)}</b>
       <ul style={styles.list}>
-        {ah.map((m, i) => (
+        {filteredByRole.map((m, i) => (
           <li key={i}>
             <p style={styles.liP}>
-              {m.name}{' '}
+              {(m.prefix || '') + ' ' + m.name}{' '}
               <a
                 href={`https://t.me/${m.tg}`}
                 target="_blank"

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -16,7 +16,12 @@
   },
   "about": {
     "main": "We have developed a comprehensive, open source and free TOL simulator to provide aspiring Engineering freshmen with a familiar environment in which to practice, very similar to what they will encounter on the official admission test of Politecnico di Milano. <br/><br/>It is the only one fully compliant with the TOL training requirements of the Politecnico di Milano and completely managed by students, from the development of the web application to the creation of the TOL questions.",
-    "projectTeam": "Project team",
+    "roles": {
+      "projectLeader": "Creator & Project Leader",
+      "dev": "Developers",
+      "author": "Authors",
+      "adHoc": "Ad Hoc"
+    },
     "supportGroups": {
       "head": "Support groups",
       "1": "Project feedback & info: <tgProject>$t(tg.project) <tgLogo /></tgProject>",

diff --git a/src/locales/it.json b/src/locales/it.json
@@ -16,7 +16,12 @@
   },
   "about": {
     "main": "Abbiamo sviluppato un simulatore TOL completo, open source e gratuito per fornire alle aspiranti matricole di Ingegneria un ambiente familiare in cui esercitarsi, molto simile a quello che incontreranno al test di ammissione ufficiale del Politecnico di Milano. <br /><br /> È l'unico totalmente conforme ai requisiti formativi del TOL del Politecnico di Milano e completamente gestito da studenti, dallo sviluppo dell'applicazione web alla creazione dei quesiti TOL.",
-    "projectTeam": "Team del progetto",
+    "roles": {
+      "projectLeader": "Ideatore e Responsabile del Progetto",
+      "dev": "Sviluppatori",
+      "author": "Autori",
+      "adHoc": "Ad Hoc"
+    },
     "supportGroups": {
       "head": "Gruppi di supporto",
       "1": "Segnalazioni e informazioni sul progetto: <tgProject>$t(tg.project) <tgLogo /></tgProject>",

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -89,75 +89,94 @@ export function getNextSection(currentSection: Section): Section | undefined {
   return (sortedInfo[i + 1] || [])[0]
 }
 
+export const MemberRole = {
+  ProjectLeader: 'PROJECT_LEADER',
+  Author: 'AUTHOR',
+  Dev: 'DEVELOPER',
+  AdHoc: 'AD_HOC'
+} as const
+
+export type MemberRoleKeys = (typeof MemberRole)[keyof typeof MemberRole]
+
 interface Member {
   name: string
   tg: string
-  ah?: boolean
+  roles: MemberRoleKeys[]
   prefix?: string
 }
 
 export const members: Member[] = [
   {
     name: 'Gabriele Zanini',
-    tg: 'zagbc'
+    tg: 'zagbc',
+    roles: [MemberRole.ProjectLeader]
   },
   {
     name: 'Federico Grandi',
-    tg: 'federico_grandi'
+    tg: 'federico_grandi',
+    roles: [MemberRole.Author, MemberRole.Dev]
   },
   {
     name: 'Ilaria Corcelli',
-    tg: 'iilaria01'
+    tg: 'iilaria01',
+    roles: [MemberRole.Author]
   },
   {
     name: 'Matteo Salicandro',
-    tg: 'Mattysal'
+    tg: 'Mattysal',
+    roles: [MemberRole.Author]
   },
   {
     name: 'Nicolas Facchin',
-    tg: 'Noka_la_Foka'
+    tg: 'Noka_la_Foka',
+    roles: [MemberRole.Author]
   },
   {
     name: 'Elia Maggioni',
     tg: 'maggelia',
-    ah: true
+    roles: [MemberRole.AdHoc]
   },
   {
     name: 'Diego Aldarese',
     tg: 'diegoaldarese',
-    ah: true
+    roles: [MemberRole.AdHoc]
   },
   {
     name: 'Tommaso Morganti',
-    tg: 'toto04_1'
+    tg: 'toto04_1',
+    roles: [MemberRole.Dev]
   },
   {
     name: 'Giovanni Menicucci',
-    tg: 'giova1211'
+    tg: 'giova1211',
+    roles: [MemberRole.Author]
   },
   {
     name: 'Nadia Scappini',
     tg: 'nscapp',
-    prefix: 'Prof.ssa'
+    prefix: 'Prof.ssa',
+    roles: [MemberRole.Author]
   },
   {
     name: '@spyarect',
     tg: 'spyarect',
-    ah: true
+    roles: [MemberRole.AdHoc]
   },
   {
     name: 'Clelia Di Leo',
     tg: 'cloelia',
-    prefix: 'Prof.ssa'
+    prefix: 'Prof.ssa',
+    roles: [MemberRole.Author]
   },
   {
     name: 'Raif Muhammad',
     tg: 'Raif9',
-    ah: true
+    roles: [MemberRole.AdHoc]
   },
   {
     name: 'Lorenzo Corallo',
-    tg: 'lorenzocorallo'
+    tg: 'lorenzocorallo',
+    roles: [MemberRole.Dev]
   }
 ]