inputting pollen data spreadsheet

- form to input file & click preview (generating preview is seperate task)

- e2e tests for valid spreadsheet, invalid inputs and no input

cypress/e2e/cms/pollenData.cy.ts

@@ -0,0 +1,41 @@
+import { URLS } from "../consts"
+import { loginAttempt, mockValidCredentials, userIsLoggedIn } from "../authenticationUtils"
+
+describe("pollen data", () => {
+    describe("inputting excel file", () => {
+        beforeEach(() => {
+            cy.visit(URLS.EDIT_POLLEN_DATA)
+            mockValidCredentials()
+            loginAttempt()
+            userIsLoggedIn()
+            cy.visit(URLS.EDIT_POLLEN_DATA) // TODO: login should already redirect here!!!!
+        })
+
+        it("valid excel file", () => {
+            cy.contains("label", "Upload .xlsx spreadsheet file with pollen data")
+                .find("input[type='file']")
+                .selectFile("cypress/fixtures/AAPC dummy data.xlsx")
+
+            cy.contains("button", "Preview data").click()
+            cy.contains("Preview generated ✅")
+        })
+
+        it("no file", () => {
+            cy.contains("label", "Upload .xlsx spreadsheet file with pollen data").find("input[type='file']")
+
+            cy.contains("button", "Preview data").click()
+            cy.contains("No file uploaded")
+        })
+
+        it("invalid file", () => {
+            cy.contains("label", "Upload .xlsx spreadsheet file with pollen data")
+                .find("input[type='file']")
+                .selectFile("cypress/fixtures/authSuccessResponse.json")
+
+            cy.contains("button", "Preview data").click()
+            cy.contains(
+                "The file you have uploaded doesn't seem to be an Excel spreadsheet. The filename 'authSuccessResponse.json' doesn't have '.xlsx'"
+            )
+        })
+    })
+})

frontend/app/(cms)/pollen/edit/page.tsx

@@ -1,7 +1,53 @@
 "use client"
 
-import React from "react"
+import React, { useEffect, useState, useRef } from "react"
 
 export default function EditPollen() {
-    return <>Page for editing pollen data 🙂📉📊</>
+    const [errorMessage, setErrorMessage] = useState(null as string | null)
+    const fileInputReference = useRef(null)
+    const [validInputFile, setValidInputFile] = useState(null as null | File)
+
+    useEffect(() => {
+        if (errorMessage) setValidInputFile(null)
+    }, [errorMessage])
+
+    function validateInputFile(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+        e.preventDefault()
+
+        if (!fileInputReference.current) return
+
+        const fileInputElement: HTMLInputElement = fileInputReference.current
+
+        if (!fileInputElement.files?.length || !fileInputElement.files[0]) return setErrorMessage("No file uploaded")
+
+        const uploadedFile = fileInputElement.files[0]
+
+        console.log({ uploadedFile })
+
+        if (!uploadedFile.name.includes(".xlsx"))
+            return setErrorMessage(
+                `The file you have uploaded doesn't seem to be an Excel spreadsheet. The filename '${uploadedFile.name}' doesn't have '.xlsx'`
+            )
+
+        setErrorMessage(null)
+        setValidInputFile(uploadedFile)
+    }
+    return (
+        <>
+            <form>
+                <label>
+                    <span>Upload .xlsx spreadsheet file with pollen data</span>
+                    <input type="file" ref={fileInputReference} />
+                </label>
+
+                <button type="submit" onClick={validateInputFile}>
+                    Preview data
+                </button>
+                <button type="submit">Save data</button>
+                {errorMessage && <p className="form-error">{errorMessage}</p>}
+            </form>
+
+            {validInputFile && <div>Preview generated ✅</div>}
+        </>
+    )
 }

frontend/app/consts.ts

@@ -26,6 +26,8 @@ export const ROUTES = {
     FORGOT_PASSWORD: "/forgot-password",
 
     REDIRECT_AFTER_LOGIN: "/",
+
+    EDIT_POLLEN_DATA: "/pollen/edit",
 }
 
 export const OPEN_AUTH_ROUTES = [ROUTES.LOGIN, ROUTES.FORGOT_PASSWORD] // no auth required for these ones