basic filter

Author: marcoacierno

frontend/src/components/blocks/dynamic-content-display-section/accepted-proposals-content.tsx

@@ -1,19 +1,24 @@
 import {
   CardPart,
+  Grid,
   Heading,
   HorizontalStack,
   MultiplePartsCard,
   MultiplePartsCardCollection,
   Section,
+  Text,
+  VerticalStack,
 } from "@python-italia/pycon-styleguide";
+import React from "react";
 import { FormattedMessage } from "react-intl";
 import { VotingCard } from "~/components/voting-card";
 import { useCurrentLanguage } from "~/locale/context";
 import { useAcceptedProposalsQuery } from "~/types";
 
 export const AcceptedProposalsContent = () => {
+  const [filterBy, setFilterBy] = React.useState(null);
   const language = useCurrentLanguage();
-  const {
+  let {
     data: {
       submissions: { items: submissions },
     },
@@ -24,6 +29,16 @@ export const AcceptedProposalsContent = () => {
     },
   });
 
+  if (filterBy === "talks") {
+    submissions = submissions.filter(
+      (submission) => submission.type.name.toLowerCase() === "talk",
+    );
+  } else if (filterBy === "workshops") {
+    submissions = submissions.filter(
+      (submission) => submission.type.name.toLowerCase() === "workshop",
+    );
+  }
+
   return (
     <Section>
       <MultiplePartsCardCollection>
@@ -33,6 +48,38 @@ export const AcceptedProposalsContent = () => {
               <Heading size={2}>
                 <FormattedMessage id="voting.proposals" />
               </Heading>
+              <VerticalStack alignItems="center" gap="small">
+                <Text weight="strong" size="label3">
+                  <FormattedMessage id="voting.filterBy" />
+                </Text>
+
+                <div className="divide-x divide-black">
+                  <Text
+                    weight={filterBy === null ? "strong" : null}
+                    size="label3"
+                    className="pr-2"
+                    onClick={() => setFilterBy(null)}
+                  >
+                    <FormattedMessage id="voting.all" />
+                  </Text>
+                  <Text
+                    weight={filterBy === "talks" ? "strong" : null}
+                    size="label3"
+                    className="pl-2 pr-2"
+                    onClick={() => setFilterBy("talks")}
+                  >
+                    <FormattedMessage id="voting.talks" />
+                  </Text>
+                  <Text
+                    weight={filterBy === "workshops" ? "strong" : null}
+                    size="label3"
+                    className="pl-2"
+                    onClick={() => setFilterBy("workshops")}
+                  >
+                    <FormattedMessage id="voting.workshops" />
+                  </Text>
+                </div>
+              </VerticalStack>
             </HorizontalStack>
           </CardPart>
         </MultiplePartsCard>

frontend/src/components/blocks/dynamic-content-display-section/speakers-content.tsx

@@ -35,21 +35,17 @@ export const SpeakersContent = () => {
     <Section>
       <Grid cols={3}>
         {Object.entries(submissionsBySpeaker).map(
-          ([speakerId, submissions]) => {
-            let title = submissions[0].title;
-            if (submissions.length > 1) {
-              title = `${title} (+${submissions.length - 1})`;
-            }
-            return (
-              <Link noHover href={`/profile/${speakerId}`} key={speakerId}>
-                <SpeakerCard
-                  speakerName={submissions[0].speaker.fullname}
-                  portraitUrl={submissions[0].speaker.photo}
-                  sessions={title}
-                />
-              </Link>
-            );
-          },
+          ([speakerId, submissions]) => (
+            <Link noHover href={`/profile/${speakerId}`} key={speakerId}>
+              <SpeakerCard
+                speakerName={submissions[0].speaker.fullname}
+                portraitUrl={submissions[0].speaker.photo}
+                sessions={submissions
+                  .map((submission) => submission.title)
+                  .join(",")}
+              />
+            </Link>
+          ),
         )}
       </Grid>
     </Section>

frontend/src/locale/index.ts

@@ -26,6 +26,11 @@ export const messages = {
     "checkout.billing.businessInvoice.description":
       "Turn this option on if your company, university or similar is paying for you or if you need an invoice.",
 
+    "voting.talks": "Talks",
+    "voting.workshops": "Workshops",
+    "voting.filterBy": "Filter by",
+    "voting.all": "All",
+
     "sponsorLeadModal.title": "Download our brochure",
     "sponsorLeadModal.submit": "Submit",
     "sponsorLeadModal.body": `Our packages gives you an idea of what we offer and how you can optimize your presence at PyCon Italia, but are not set in stone!
@@ -1939,6 +1944,8 @@ Affrettati a comprare il biglietto!`,
     "scheduleEventDetail.materials.download": "Scarica ({mimeType})",
 
     "voting.speaker": "Speaker",
+    "voting.talks": "Talks",
+    "voting.workshops": "Workshops",
 
     "global.sessions": "Sessioni",
 
@@ -2279,6 +2286,9 @@ Clicca sulla casella per cambiare. Se lasciato vuoto, presumeremo che tu sia dis
       "Il form aprirà il {date}. Segui i nostri socials per aggiornamenti e cambiamenti.",
     "requestInvitationLetter.formClosed":
       "Il form è chiuso. Se hai domande, contattaci.",
+
+    "voting.filterBy": "Filtra per",
+    "voting.all": "Tutti",
   },
 };