Merge pull request #32 from asibs/as/constituency-page-additions

Constituency page additions

.github/workflows/update-googlesheet-data.yaml

@@ -45,7 +45,102 @@ jobs:
       - name: Write results
         run: |
           # Write the results to the data file
-          jq ".results[0].result.formatted" /tmp/gsheet_action_results.json > data/constituency.json
+          jq '.results[0].result.formatted | map({
+            constituencyIdentifiers: {
+              slug: ."STT Slug",
+              name: ."Name",
+              mySocietyCode: ."Short Code"
+            },
+            recommendation: {
+              partySlug: ."TV Advice",
+              reason: ."TV Explanation"
+            },
+            impliedPreviousResult: {
+              winningParty: ."Implied Vote Share: Winner",
+              biggestProgressiveParty: ."Implied Vote Share: Biggest Progressive Party",
+              partyVoteResults: [
+                {
+                  partySlug: "Con",
+                  votePercent: (."Implied Vote Share: Con" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "Lab",
+                  votePercent: (."Implied Vote Share: Lab" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "LD",
+                  votePercent: (."Implied Vote Share: LD" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "Green",
+                  votePercent: (."Implied Vote Share: Green" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "Reform",
+                  votePercent: (."Implied Vote Share: Reform" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "SNP",
+                  votePercent: (."Implied Vote Share: SNP" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "PC",
+                  votePercent: (."Implied Vote Share: PC" | gsub("%"; "") | tonumber)
+                }
+              ]
+            },
+            pollingResults: {
+              winningParty: ."MRP Vote Share Winner",
+              biggestProgressiveParty: ."MRP Vote Share Biggest Progressive Party",
+              partyVoteResults: [
+                {
+                  partySlug: "Con",
+                  votePercent: (."MRP Vote Share Con" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "Lab",
+                  votePercent: (."MRP Vote Share Lab" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "LD",
+                  votePercent: (."MRP Vote Share LD" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "Green",
+                  votePercent: (."MRP Vote Share Green" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "Reform",
+                  votePercent: (."MRP Vote Share Reform" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "SNP",
+                  votePercent: (."MRP Vote Share SNP" | gsub("%"; "") | tonumber)
+                },
+                {
+                  partySlug: "PC",
+                  votePercent: (."MRP Vote Share PC" | gsub("%"; "") | tonumber)
+                }
+              ]
+            },
+            otherVoteData: {
+              targetSeatData: [
+                {
+                  partySlug: "Lab",
+                  likelyTarget: (."Labour Non-Target" | (if . == "non-target" then "NO" else "UNKNOWN" end))
+                },
+                {
+                  partySlug: "LD",
+                  likelyTarget: (."Lib Dem Top 50 MRP" | (if . == "" then "NO" else "YES" end))
+                },
+                {
+                  partySlug: "Green",
+                  likelyTarget: (."Green Target" | (if . == "TRUE" then "YES" else "NO" end))
+                }
+              ],
+              conservativeWinUnlikely: (."Con Can'\''t Win" | (if . == "TRUE" then true else false end))
+            }
+          })' /tmp/gsheet_action_results.json > data/constituency.json
           # Add the updates to git
           git add data/constituency.json
       - name: Commit Changes and Create Pull Request

app/constituencies/[slug]/page.tsx

@@ -1,5 +1,9 @@
 import Header from "@/components/Header";
+import LocalTeamBox from "@/components/info_box/LocalTeamBox";
+import PlanToVoteBox from "@/components/info_box/PlanToVoteBox";
+import TacticalReasoningBox from "@/components/info_box/TacticalReasoningBox";
 import { rubik } from "@/utils/Fonts";
+import { partyCssClassFromSlug, partyNameFromSlug } from "@/utils/Party";
 import { readFileSync } from "fs";
 import { unstable_cache } from "next/cache";
 import getConfig from "next/config";
@@ -32,7 +36,7 @@ export async function generateStaticParams() {
   // TODO: Get constituencies from cached spreadsheet data
   // const constituencies = ["isle-of-wight-west", "isle-of-wight-east"];
 
-  const constituenciesData = await getConstituencyData();
+  const constituenciesData: ConstituencyData[] = await getConstituencyData();
 
   return constituenciesData.map((c: any) => ({
     slug: c["constituencySlug"],
@@ -46,9 +50,9 @@ export default async function ConstituencyPage({
 }: {
   params: { slug: string };
 }) {
-  const constituenciesData = await getConstituencyData();
+  const constituenciesData: ConstituencyData[] = await getConstituencyData();
   const constituencyData = constituenciesData.filter(
-    (c: any) => c["constituencySlug"] === params.slug,
+    (c: any) => c.constituencyIdentifiers.slug === params.slug,
   )[0];
 
   return (
@@ -58,7 +62,7 @@ export default async function ConstituencyPage({
           <Header backgroundImage="FESTIVAL_CROWD">
             <Container className="py-4 py-md-6">
               <h1 className={rubik.className}>
-                {constituencyData["constituencyName"]}
+                {constituencyData.constituencyIdentifiers.name}
               </h1>
               <p>
                 Bookmark this page and check back before the election for
@@ -80,12 +84,30 @@ export default async function ConstituencyPage({
                 <Row>
                   <Col>
                     <h3
-                      className={`${rubik.className} party party-${constituencyData["recommendedPartySlug"]}`}
+                      className={`${
+                        rubik.className
+                      } party ${partyCssClassFromSlug(
+                        constituencyData.recommendation.partySlug,
+                      )}`}
                     >
-                      {constituencyData["recommendedPartyName"]}
+                      {partyNameFromSlug(
+                        constituencyData.recommendation.partySlug,
+                      )}
                     </h3>
                   </Col>
                 </Row>
+
+                <Row xs={1} lg={3}>
+                  <Col md={7}>
+                    <TacticalReasoningBox constituencyData={constituencyData} />
+                  </Col>
+                  <Col md={7}>
+                    <LocalTeamBox />
+                  </Col>
+                  <Col md={7}>
+                    <PlanToVoteBox />
+                  </Col>
+                </Row>
               </Container>
             </section>
           </main>

app/globals.scss

@@ -90,11 +90,20 @@ $bs-link-hover-color-rgb: 238, 102, 238;
 
 /***** GLOBAL DEFAULT STYLES *****/
 
+/* TYPOGRAPHY */
+body {
+  font-size: 18px;
+}
+
+html,
+body {
+  background-color: var(--bs-gray-300);
+}
+
 /* HEADER */
 header {
   background-color: var(--bs-black);
   color: var(--bs-white);
-  font-size: 18px;
 }
 
 header h1 {
@@ -219,7 +228,7 @@ div.party-conservative {
   background-color: rgba(var(--bs-blue-rgb), 1);
 }
 
-// Add padding-y-6 classes
+/* EXTRA PADDING CLASSES (py-6 / py-sm-6 / etc) */
 .py-6 {
   padding-top: 6rem !important;
   padding-bottom: 6rem !important;
@@ -259,3 +268,23 @@ div.party-conservative {
     padding-bottom: 6rem !important;
   }
 }
+
+/* SECTIONS */
+section {
+  padding-top: 3rem;
+  padding-bottom: 2rem;
+}
+
+.section-light {
+  background-color: var(--bs-gray-200);
+  /*box-shadow: inset 0px -1px 0px 0px var(--bs-gray-300);*/
+  border-top: 2px solid var(--bs-gray-100);
+  border-bottom: 2px solid var(--bs-gray-400);
+}
+
+.section-dark {
+  background-color: var(--bs-gray-800);
+  /*box-shadow: inset 0px -2px 0px 0px var(--bs-gray-900);*/
+  border-top: 2px solid var(--bs-gray-700);
+  border-bottom: 2px solid var(--bs-gray-900);
+}

components/info_box/InfoBox.tsx

@@ -0,0 +1,15 @@
+const InfoBox = ({ children }: { children: React.ReactElement }) => {
+  return (
+    <div
+      className="rounded-4 p-3"
+      style={{
+        background: "linear-gradient(rgb(255, 243, 205), rgb(255, 230, 156))",
+        boxShadow: "0px 5px 10px 0px rgba(0, 0, 0, 0.075)",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default InfoBox;

components/info_box/LocalTeamBox.tsx

@@ -0,0 +1,29 @@
+import InfoBox from "./InfoBox";
+import { rubik } from "@/utils/Fonts";
+import { Button } from "react-bootstrap";
+
+import { FaUsers } from "react-icons/fa6";
+
+const LocalTeamBox = () => {
+  return (
+    <InfoBox>
+      <>
+        <h3 className={`${rubik.className} fs-5`}>Your Constituency Team</h3>
+        <p>
+          People in your local Movement Forward community are coming together to
+          use their voting power.
+        </p>
+        <p>
+          <Button variant="light" size="lg">
+            <FaUsers className="me-2" />
+            <span className={`${rubik.className} fw-bold`}>
+              Join and get involved
+            </span>
+          </Button>
+        </p>
+      </>
+    </InfoBox>
+  );
+};
+
+export default LocalTeamBox;

components/info_box/PlanToVoteBox.tsx

@@ -0,0 +1,61 @@
+import InfoBox from "./InfoBox";
+import { rubik } from "@/utils/Fonts";
+
+import {
+  FaPenClip,
+  FaRegIdCard,
+  FaEnvelopeOpenText,
+  FaFileImage,
+} from "react-icons/fa6";
+
+const PlanToVoteBox = () => {
+  return (
+    <InfoBox>
+      <>
+        <h3 className={`${rubik.className} fs-5`}>Your Plan</h3>
+        <p>
+          <a
+            href="https://www.gov.uk/register-to-vote"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaPenClip className="me-2" style={{ color: "var(--bs-purple)" }} />
+            Register to vote, it takes 5 minutes
+          </a>
+        </p>
+        <p>
+          <a
+            href="https://www.electoralcommission.org.uk/voting-and-elections/voter-id"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaRegIdCard
+              className="me-2"
+              style={{ color: "var(--bs-green)" }}
+            />
+            Don&apos;t forget your photo Voter ID
+          </a>
+        </p>
+        <p>
+          <a
+            href="https://www.gov.uk/apply-postal-vote"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaEnvelopeOpenText
+              className="me-2"
+              style={{ color: "var(--bs-blue)" }}
+            />
+            Vote in advance, privately, by post from home
+          </a>
+        </p>
+        <p>
+          <FaFileImage className="me-2 text-pink-strong" />
+          Download and put up some posters
+        </p>
+      </>
+    </InfoBox>
+  );
+};
+
+export default PlanToVoteBox;