Merge pull request #390 from ArendPeter/landing-page

Feature Flags & Query Featured Elections
Equal-Vote · Dec 3, 2023 · baa8dd0 · baa8dd0
2 parents 8a84257 + 24ff5b7
commit baa8dd0
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 37 deletions.
diff --git a/backend/src/Models/ElectionRolls.ts b/backend/src/Models/ElectionRolls.ts
@@ -61,7 +61,7 @@ export default class ElectionRollDB implements IElectionRollStore {
             }))
     }
     getByEmail(email: string, ctx: ILoggingContext): Promise<ElectionRoll[] | null> {
-        Logger.debug(ctx, `${tableName}.getByEmail email:${email}`);
+        Logger.debug(ctx, `${tableName}.getByEmail`);
 
         return this._postgresClient
             .selectFrom(tableName)

diff --git a/backend/src/Models/Elections.ts b/backend/src/Models/Elections.ts
@@ -69,7 +69,7 @@ export default class ElectionsDB {
 
     getElections(id: string, email: string, ctx: ILoggingContext): Promise<Election[] | null> {
         // When I filter in trello it adds "filter=member:arendpetercastelein,overdue:true" to the URL, I'm following the same pattern here
-        Logger.debug(ctx, `${tableName}.getAll ${id} ${email}`);
+        Logger.debug(ctx, `${tableName}.getAll ${id}`);
 
         let querry = this._postgresClient
             .selectFrom(tableName)

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
@@ -24,14 +24,12 @@ const LandingPage = () => {
             paddingBottom: '8rem',
         }}>
             <LandingPageHero />
-            <LandingPageFeatureElections electionIds={[
-                '52c2b793-bdfe-49e8-b4cf-f448108c39af',
-                'e45e93b1-9e4e-4a87-bb80-e7dbbd6e4721',
-                '5c84e93b-b01c-4ab0-82ee-7181cb7ac995'
-            ]} />
-            <LandingPageFeatures />
+            <LandingPageFeatureElections electionIds={
+                (process.env.REACT_APP_FEATURED_ELECTIONS ?? '').split(',')
+            }/>
+            <LandingPageFeatures/>
             <LandingPageSignUpBar />
-            <LandingPageTestimonials testimonials={[
+            {process.env.REACT_APP_FF_ELECTION_TESTIMONIALS === 'true' && <LandingPageTestimonials testimonials={[
                 {
                     quote: 'STAR Voting is Awesome!',
                     name: 'John Doe',
@@ -47,7 +45,7 @@ const LandingPage = () => {
                     name: 'Equal Vote',
                     url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj'
                 },
-            ]} />
+            ]} />}
             <LandingPagePricing options={[
                 {
                     title: 'Free Tier',

diff --git a/frontend/src/components/LandingPage/FeaturedElection.tsx b/frontend/src/components/LandingPage/FeaturedElection.tsx
@@ -1,10 +1,24 @@
-import { Card, CardActionArea, CardContent, Paper, Typography } from "@mui/material";
-import React from 'react';
+import { Box, Card, CardActionArea, CardContent, Paper, Typography } from "@mui/material";
+import React, { useEffect } from 'react';
 import { useNavigate } from "react-router";
+import useElection from "../ElectionContextProvider";
+import { useGetElection } from "../../hooks/useAPI";
 
+declare namespace Intl {
+  class ListFormat {
+    constructor(locales?: string | string[], options?: {});
+    public format: (items: string[]) => string;
+  }
+}
+const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
 
 export default ({electionId}) => {
     const navigate = useNavigate();
+    const { data, isPending, error, makeRequest: fetchElections } = useGetElection(electionId);
+
+    useEffect(() => {
+        fetchElections()
+    }, []);
 
     return <Card className='featuredElection' onClick={() => navigate(`/Election/${electionId}`)} elevation={8} sx={{
         width: '100%',
@@ -15,9 +29,8 @@ export default ({electionId}) => {
     }}>
         <CardActionArea sx={{p: { xs: 2, md: 2 }}}>
             <CardContent>
-                <Typography variant='h5'>Election Title</Typography>
-                <Typography variant='h6'>election info</Typography>
-                <Typography variant='h6'>election info</Typography>
+                <Typography variant='h5'>{data == null ? 'null' : data.election.title}</Typography>
+                <Typography sx={{textAlign: 'right', color: '#808080'}}>{data == null ? 'null' : formatter.format(data.election.races.map((race) => race.voting_method))}</Typography>
             </CardContent>
         </CardActionArea>
     </Card>

diff --git a/frontend/src/components/LandingPage/LandingPageHero.tsx b/frontend/src/components/LandingPage/LandingPageHero.tsx
@@ -34,32 +34,34 @@ export default ({}) => {
                     }}>
                         Voting methods approved by the <a target="_blank" href={'https://www.equal.vote'} style={{ color: 'inherit', textDecoration: 'underline' }}>Equal Vote Coalition</a>
                     </Typography>
-                    <Box sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        width: '70%',
-                        marginLeft: '20px',
-                        background: 'var(--brand-gray-2)',
-                        p: { xs: 3, md: 3 },
-                        gap: '40px',
-                    }}>
-                        <Box sx={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                        }}>
-                            <Typography variant='h5' sx={{margin: 0}}>Elections Created</Typography>
-                            <Typography variant='h5' sx={{margin: 0}}>10001</Typography>
-                        </Box>
+                    {process.env.REACT_APP_FF_ELECTION_TALLY === 'true' && 
                         <Box sx={{
                             display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
+                            flexDirection: 'column',
+                            width: '70%',
+                            marginLeft: '20px',
+                            background: 'var(--brand-gray-2)',
+                            p: { xs: 3, md: 3 },
+                            gap: '40px',
                         }}>
-                            <Typography variant='h5' sx={{margin: 0}}>Votes Cast</Typography>
-                            <Typography variant='h5' sx={{margin: 0}}>10001</Typography>
+                            <Box sx={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                            }}>
+                                <Typography variant='h5' sx={{margin: 0}}>Elections Created</Typography>
+                                <Typography variant='h5' sx={{margin: 0}}>10001</Typography>
+                            </Box>
+                            <Box sx={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                            }}>
+                                <Typography variant='h5' sx={{margin: 0}}>Votes Cast</Typography>
+                                <Typography variant='h5' sx={{margin: 0}}>10001</Typography>
+                            </Box>
                         </Box>
-                    </Box>
+                    }
                 </Grid>
                 <Grid item xs={12} md={5}>
                     <Box sx={{paddingTop: {xs: 10, md: 0}}}>