Add profile pic

Author: LMacPhail

.env

@@ -1,2 +1,2 @@
 REACT_APP_API_ENDPOINT=https://api.futurelabourmps.com/
-REACT_APP_API_COLS=A3:AO70
+REACT_APP_API_COLS=A3:AZ70

server/server.js

@@ -7,7 +7,7 @@ const app = express();
 app.use(cors());
 
 // Configuration for the proxy
-const API_SERVICE_URL = "https://api.futurelabourmps.com/A3:AT70";
+const API_SERVICE_URL = "https://api.futurelabourmps.com";
 
 app.use(
   "/api",

src/components/SearchInput.tsx

@@ -30,7 +30,7 @@ export const SearchInput: React.FC = () => {
           id="icon"
           name="icon"
           className="py-2 px-4 pl-11 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
-          placeholder="Search"
+          placeholder="Search by name or constituency"
           onChange={(e) => handleSearchChange(e.currentTarget.value)}
         />
       </div>

src/components/content/Accordion.tsx

@@ -23,6 +23,7 @@ export const Accordion: React.FC<{ mps: MP[] }> = ({ mps }) => {
                 socials={mp.socialMedia}
                 bio={mp.biography}
                 policyInterests={mp.policyInterests}
+                profile={mp.profilePic}
               />
             </label>
             <div className="accordion-content">

src/components/content/Profile.tsx

@@ -10,6 +10,7 @@ import {
   InstagramLogo,
   LinkedinLogo,
   TwitterLogo,
+  UserCircle,
 } from "@phosphor-icons/react";
 import { FormattedContent } from "./FormattedContent";
 import { PolicyCard } from "./PolicyCard";
@@ -21,9 +22,10 @@ export const ProfileHeader: React.FC<{
   name: string;
   bio: string;
   constituency: string;
+  profile?: string;
   socials: SocialMediaLinks;
   policyInterests: Record<PolicyType, Policy>;
-}> = ({ name, bio, constituency, socials, policyInterests }) => {
+}> = ({ name, bio, constituency, profile, socials, policyInterests }) => {
   const getLogo = (siteType: string) => {
     switch (siteType) {
       case "facebook":
@@ -38,12 +40,26 @@ export const ProfileHeader: React.FC<{
   };
   return (
     <div className="flex flex-row justify-between flex-wrap">
-      <div className="lg:w-2/3">
-        <h2 className="font-bold mb-2">{name}</h2>
+      <div className="flex flex-col md:flex-row gap-6">
         <span>
-          <p className="font-light text-sm mb-2">{bio}</p>
-          <p className="font-light text-sm italic">{constituency}</p>
+          {profile ? (
+            <img
+              className="rounded-md"
+              src={profile}
+              height={"100px"}
+              width={"100px"}
+            />
+          ) : (
+            <UserCircle size={100} />
+          )}
         </span>
+        <div className="lg:w-2/3">
+          <h2 className="font-bold mb-2">{name}</h2>
+          <span>
+            <p className="font-light text-sm mb-2">{bio}</p>
+            <p className="font-light text-sm italic">{constituency}</p>
+          </span>
+        </div>
       </div>
       <div className="flex flex-col justify-end h-full w-full gap-4 md:justify-between">
         <span className="flex flex-row gap-2 font-extralight text-sm italic justify-end">

src/data/test/rawResponse.js

@@ -9,20 +9,20 @@ export const values = [
     "TRUE",
     "james",
     "SNP",
-    "4,095",
+    "4095",
     "Yes. Councillor for Glasgow North East",
-    "Maureen Burke was picked to contest Glasgow North …asgow City Council, representing North East ward.",
+    "Maureen Burke was picked to contest Glasgow North East at the next election. She is a councillor on Glasgow City Council, representing North East ward.\n\nBorn & bred & lives in Easterhouse in the seat. First worked as packer in tie-factory. Worked for Margaret Curran when she was MSP, MP & Shadow Scottish secretary. - https://twitter.com/tomorrowsmps/status/1651337216784756739",
     "https://twitter.com/CllrBurke",
     "https://www.facebook.com/profile.php?id=100047615836936",
     "",
     "",
-    "Councillor Glasgow City Council, North East Ward",
-    "(possibly ex) Chair of the Seven Lochs Partnership. \nDirector - Glasgow East Women's Aid (source)",
-    "Provan Hall Community Management Trust (source) (a 15th Century historical building in Glasgow)",
-    "Director - Glasgow East Women's Aid (resigned)\nDir…ned)\nDirector - Scottish Events Campus (resigned)",
-    `Supported Glasgow's Climate Week in 2016. Was Chai…ts for local people and visitors alike." (source)`,
+    "Councillor Glasgow City Council, North East Ward - <https://labourlist.org/2023/08/our-rolling-list-of-labour-parliamentary-candidate-selections/>",
+    "(possibly ex) Chair of the Seven Lochs Partnership. \nDirector - Glasgow East Women's Aid - <https://labourlist.org/2023/08/our-rolling-list-of-labour-parliamentary-candidate-selections/>",
+    "Provan Hall Community Management Trust (a 15th Century historical building in Glasgow) - <https://www.glasgow.gov.uk/councillorsandcommittees/agenda.asp?meetingid=15465>",
+    "Director - Glasgow East Women's Aid (resigned)|\nDirector - Glasgow East Arts Company (resigned)|\nDirector - Culture and Sport Glasgow CIC (resigned)|\nDirector - Culture and Sport Glasgow (resigned)|\nDirector - Glasgow East Arts Company Ltd (resigned)|\nDirector - Jobs and Business Glasgow (resigned)|\nDirector - Clude Gateway URC (resigned)|\nDirector - Scottish Events Campus (resigned) - <https://find-and-update.company-information.service.gov.uk/officers/PQhWYXthUIbiNIdpZxTXs0hltjM/appointments>",
+    "Supported Glasgow's Climate Week in 2016. Was Chair of the Seven Lochs Partnership. She said :\"We all have a part to play in tackling the issues of climate change. The Seven Lochs Wetland Park project is a fitting example of what we are doing to make Glasgow a more beautiful, liveable and sustainable city. This will be the jewel in the crown of the region's green spaces, and will bring a host of benefits for local people and visitors alike.\" - <https://glasgow.gov.uk/article/20096/Time-for-action-as-Scotlands-first-national-Climate-Week-gets-underway>",
     "Positive",
-    'Anti-detention centres (from 2015; source) \n"Counc…asylum in Scotland and the wider United Kingdom."',
+    'Anti-detention centres (from 2015\n"Council therefore calls on the Chief Executive to write to the relevant UK Government to express our strong resolve that Dungavel, and all other UK detention centres, should be closed in favour of a community-based model of assessment for those seeking asylum in Scotland and the wider United Kingdom." - <https://www.glasgow.gov.uk/councillorsandcommittees/agenda.asp?meetingid=13813>',
     "Positive",
     "",
     "",
@@ -36,12 +36,22 @@ export const values = [
     "",
     "",
     "",
+    "In role as councillor, suggested approving the application of a conversion of townhouses to tourist short stay flats - <https://servicedapartmentnews.com/news/industry-news/glasgow-townhouse-conversion/> ",
     "",
     "",
     "",
+    "[email protected]",
     "",
+    "Embroiled in a conflict of interest scandal - <https://www.heraldscotland.com/news/15255963.secret-recording-leads-call-glasgow-labour-councillors-suspended/>",
     "",
+    "TRUE",
+    "James",
+    "TRUE",
+    "Andy",
     "",
+    "https://www.glasgow.gov.uk/media/image/t/d/Maureen_Burke.JPG",
+    "83%",
+    "<https://www.electoralcalculus.co.uk/fcgi-bin/calcwork23.py?seat=Glasgow+North+East>",
   ],
   [
     "Zubir Ahmed",

src/data/utils/utils.ts

@@ -54,14 +54,14 @@ const mpIdxLookup: Record<number, keyof MP> = {
   40: "contact",
   41: "educationType",
   42: "notes",
-  43: "profilePic",
-  44: "winningProbability",
-  45: "winningProbability",
+  49: "profilePic",
+  50: "winningProbability",
+  51: "winningProbability",
 };
 
 const winningLookupIdx: Record<number, keyof WinningProbability> = {
-  44: "percentage",
-  45: "source",
+  50: "percentage",
+  51: "source",
 };
 
 const policyLookupIdx: Record<number, keyof PolicyInterests> = {