From 36b2b524a4119604b315d64253f7850509255a6d Mon Sep 17 00:00:00 2001
From: Lorenzo Corallo <66379281+lorenzocorallo@users.noreply.github.com>
Date: Mon, 25 Mar 2024 14:43:23 +0100
Subject: [PATCH] feat(About): change description and add project members roles
 (#135)

* fix: update telegram username of Nicolas Facchin and Elia Maggioni

* feat(About): change project description

* feat(About): implement project members roles

* fix(About): add authors
---
 src/components/pages/About.tsx | 72 ++++++++++++++++------------------
 src/locales/en.json            |  9 ++++-
 src/locales/it.json            |  9 ++++-
 src/utils/constants.ts         | 61 ++++++++++++++++++++--------
 4 files changed, 93 insertions(+), 58 deletions(-)

diff --git a/src/components/pages/About.tsx b/src/components/pages/About.tsx
index 9d1f70e..496783e 100644
--- 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
index 9a1e901..ceee884 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -15,8 +15,13 @@
     "dsaInfo": "Students with Specific Learning Disorders (SLD) taking the TOL are eligible for an additional 30 percent time, provided they disclose it when registering for the test. A certification stating the SLD diagnosis is also required. Selecting \"Student with SLD\" will apply the bonus time in this simulation as well."
   },
   "about": {
-    "main": "In order to be admitted to the Engineering school of Politecnico di Milano (PoliMi), the aspiring freshmen must pass the admission test (TOL). <br /> Among the resources that PoliMi offers for free to prepare, you can find: the Politest, a collection of commented and solved exercises, the DOL, an online demo with a limited number of questions, and two complete self-assessment tests (pdf with questions, xls with exact answers). <br /> <br /> Thus, we did not have a complete, web-based TOL simulation, that is, in the same environment in which the future freshmen will take the admission test. <br /> We have set ourself the goal of creating a complete and free TOL simulation, in order to provide aspiring freshmen with a familiar environment in which to practice, very similar to the one they will encounter at the admission test. <br /> The project is fully managed by students, from developing the web application to creating the TOL questions.",
-    "projectTeam": "Project team",
+    "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.",
+    "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
index 443e666..6f2ee23 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -15,8 +15,13 @@
     "dsaInfo": "Gli studenti con Disturbi Specifici dell'Apprendimento (DSA) che affrontano il TOL possono usufruire di un tempo supplementare pari al 30%, previa segnalazione in fase di iscrizione al test. È inoltre richiesta una certificazione attestante la diagnosi di DSA. Selezionando \"Studente con DSA\" verrà applicato il tempo bonus in questa simulazione."
   },
   "about": {
-    "main": "Per poter essere ammessi alla scuola di Ingegneria del Politecnico di Milano (PoliMi), le aspiranti matricole devono superare il test di ammissione (TOL). <br /> Tra le risorse che il PoliMi offre gratuitamente per prepararsi abbiamo: il Politest, una raccolta di esercizi commentati e risolti, la DOL, una demo online con un numero ridotto di domande, e due test di autovalutazione completi (pdf con domande, xls con risposte esatte). <br /> <br /> Non avevamo dunque una simulazione TOL completa e basata sul web, ovvero nello stesso ambiente in cui le future matricole sosterranno il test di ammissione. <br /> Ci siamo posti l'obiettivo di creare una simulazione TOL completa e gratuita, al fine di fornire alle aspiranti matricole un ambiente familiare dove esercitarsi, molto simile a quello che incontreranno al test di ammissione. <br /> Il progetto è completamente gestito dagli studenti, dallo sviluppo dell'applicazione web alla creazione delle domande TOL. ",
-    "projectTeam": "Team del progetto",
+    "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.",
+    "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
index fe1ae5c..4401590 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -89,75 +89,104 @@ 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, MemberRole.Author]
   },
   {
     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: 'SuperRollyNoka'
+    tg: 'Noka_la_Foka',
+    roles: [MemberRole.Author]
   },
   {
     name: 'Elia Maggioni',
-    tg: 'EliaMaggioni',
-    ah: true
+    tg: 'maggelia',
+    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]
+  },
+  {
+    name: 'Caleb Koomson',
+    tg: 'koomson1',
+    roles: [MemberRole.Author]
+  },
+  {
+    name: 'Lorenzo Matteo Salvatori',
+    tg: 'Lorenz02003',
+    roles: [MemberRole.Author]
   }
 ]