4325 - Kiosk latest activities - Fetch data from google sheets (#4363)

* 4325 - Fetch kiosk latest activities from google sheets * 4325 - Extract new fields from csv * 4325 - Add sheet url env var * 4325 - Fit long country names
openforis · Feb 13, 2025 · cff6cca · cff6cca
1 parent ba32069
commit cff6cca
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 22 deletions.
diff --git a/.env.template b/.env.template
@@ -57,3 +57,6 @@ AWS_ACCESS_KEY_ID=your-access-key-id
 AWS_SECRET_ACCESS_KEY=your-secret-access-key
 AWS_REGION=eu-west-1
 S3_BUCKET_NAME=fra-platform-s3
+
+# Kiosk activities
+KIOSK_ACTIVITIES_SHEET_URL=https://docs.google.com/spreadsheets/d/<spreadsheet-id>/export?format=csv&gid=<google-sheet-id>
diff --git a/src/client/pages/Kiosk/LatestActivities/ActivityList/ActivityList.tsx b/src/client/pages/Kiosk/LatestActivities/ActivityList/ActivityList.tsx
@@ -23,7 +23,7 @@ const ActivityList: React.FC<Props> = (props: Props) => {
       <div className="kiosk-latest-activities__list-container">
         {activities?.map((activity) => (
           <ActivityListItem
-            key={activity.date}
+            key={activity.startDate}
             activity={activity}
             expanded={expandedActivity === activity.id}
             handleExpand={handleExpand}

diff --git a/src/client/pages/Kiosk/LatestActivities/ActivityListItem/ActivityListItem.scss b/src/client/pages/Kiosk/LatestActivities/ActivityListItem/ActivityListItem.scss
@@ -45,8 +45,10 @@
   border-radius: 10px;
   display: flex;
   font-size: min(0.89dvw, 1.5dvh);
-  height: 4dvh;
   justify-content: center;
+  line-height: unset;
+  min-height: 4dvh;
+  padding: min(0.6dvw, 0.85dvh);
   width: 75%;
 
   &:hover {

diff --git a/src/client/pages/Kiosk/LatestActivities/ActivityListItem/ActivityListItem.tsx b/src/client/pages/Kiosk/LatestActivities/ActivityListItem/ActivityListItem.tsx
@@ -30,7 +30,7 @@ const ActivityListItem: React.FC<Props> = (props: Props) => {
         <Button
           className="kiosk-latest-activities__list-item-button"
           inverse={!expanded}
-          label={_getActivityLabel(activity.date, activity.countryName)}
+          label={_getActivityLabel(activity.startDate, activity.countryName)}
           onClick={() => {
             handleExpand(activity, map)
           }}

diff --git a/src/meta/kiosk/latestActivities.ts b/src/meta/kiosk/latestActivities.ts
@@ -3,9 +3,12 @@ import { CountryIso } from 'meta/area'
 export type Activity = {
   countryIso: CountryIso
   countryName: string
-  date: string
   description: string
+  endDate: string
   id: string
   lat: number
+  link: string
   lng: number
+  startDate: string
+  title: string
 }
diff --git a/src/server/api/kiosk/getLatestActivities.ts b/src/server/api/kiosk/getLatestActivities.ts
@@ -1,15 +1,15 @@
-import * as fs from 'fs/promises'
-import * as path from 'path'
+import axios from 'axios'
 import { Request, Response } from 'express'
 
 import { KioskController } from 'server/controller/kiosk'
+import { ProcessEnv } from 'server/utils'
 import Requests from 'server/utils/requests'
 
 export const getLatestActivities = async (_req: Request, res: Response) => {
   try {
-    const localCsvFilePath = path.resolve(__dirname, '..', '..', 'static', 'kiosk', 'latestActivities.csv')
-
-    const csvData = await fs.readFile(localCsvFilePath, 'utf-8')
+    const sheetUrl = ProcessEnv.kioskActivitiesSheetUrl
+    const response = await axios.get(sheetUrl, { responseType: 'text' })
+    const csvData = response.data
 
     const latestActivities = await KioskController.getLatestActivitiesFromCsv({ csvData })
 

diff --git a/src/server/controller/kiosk/getLatestActivitiesFromCsv.ts b/src/server/controller/kiosk/getLatestActivitiesFromCsv.ts
@@ -18,17 +18,17 @@ export const getLatestActivitiesFromCsv = async (props: Props): Promise<Array<Ac
         reject(error)
       })
       .on('data', (row) => {
-        const date = row['Date (YYYY-MM-DD)']
-        const countryIso = row.ISO3
-
         const activity: Activity = {
-          countryIso,
+          countryIso: row.ISO3,
           countryName: row.Country,
-          date,
           description: row.Description,
+          endDate: row['End date (YYYY-MM-DD)'],
           id: rowIndex.toString(),
-          lat: parseFloat(row['Location (lat)']),
-          lng: parseFloat(row['Location (long)']),
+          lat: parseFloat(row['Location (latitude)']),
+          link: row.Link,
+          lng: parseFloat(row['Location (longitude)']),
+          startDate: row['Start date (YYYY-MM-DD)'],
+          title: row.Title,
         }
 
         activities.push(activity)

diff --git a/src/server/static/kiosk/latestActivities.csv b/src/server/static/kiosk/latestActivities.csv
diff --git a/src/server/utils/processEnv.ts b/src/server/utils/processEnv.ts
@@ -54,4 +54,7 @@ export const ProcessEnv = {
   // Redis
   redisDataUrl: process.env.REDISCLOUD_DATA_URL ?? process.env.REDIS_DATA_URL ?? 'redis://127.0.0.1:6389',
   redisQueueUrl: process.env.REDISCLOUD_URL ?? process.env.REDIS_QUEUE_URL ?? 'redis://127.0.0.1:6379',
+
+  // Kiosk
+  kioskActivitiesSheetUrl: process.env.KIOSK_ACTIVITIES_SHEET_URL,
 }