Merge pull request #24 from Iteam1337/feat/eppGroups

When in EU mode- lets use the groups in the parliament instead

k8s/deployment-eu.yaml

@@ -31,7 +31,7 @@ spec:
           command:
             - /bin/sh
             - -c
-            - 'VITE_PARLIAMENT_SEATS=21 npm run build && npm run start'
+            - 'VITE_EU=true npm run build && npm run start'
           ports:
             - containerPort: 80
           readinessProbe:

src/components/App.css

@@ -37,7 +37,6 @@ body {
   }
 }
 
-
 .App {
   text-align: center;
 }
@@ -64,7 +63,7 @@ body {
   margin: auto;
 }
 
-.App-sliders {
+.App-sliders span {
   align-items: center;
   color: #fff;
   margin-left: auto;
@@ -150,7 +149,7 @@ body {
   display: flex;
 }
 
-.App-sliders {
+.App-sliders span {
   background: #333;
   flex: 1;
   display: flex;
@@ -220,6 +219,14 @@ body {
   position: relative;
 }
 
+.EU .wide {
+  display: none;
+}
+
+.EU .small {
+  display: block;
+}
+
 .party h1,
 .party h2 {
   color: #fff;
@@ -291,7 +298,7 @@ body {
     display: block;
   }
 
-  .App-sliders {
+  .App-sliders span {
     padding: 0;
   }
 }
@@ -343,7 +350,7 @@ body {
 }
 
 @media only screen and (max-width: 850px) {
-  .App-sliders {
+  .App-sliders span {
     flex-direction: row;
     margin-left: 0;
     margin-right: 0;

src/components/App.jsx

@@ -13,64 +13,44 @@ import Seating from './Seating'
 import Sliders from './Sliders'
 import Polls from './Polls'
 import Footer from './Footer'
+const EU = import.meta.env.VITE_EU === 'true'
 
 class App extends Component {
-  sumGroups(parties) {
-    const regering = parties
-      .filter((a) => a.affiliation === 'regering')
-      .sort((a, b) => b.seats - a.seats)
-    const opposition = parties
-      .filter((a) => a.affiliation === 'opposition')
-      .sort((a, b) => b.seats - a.seats)
-    const stod = parties
-      .filter((a) => a.affiliation === 'stod')
-      .sort((a, b) => b.seats - a.seats)
-
-    return [
-      {
-        name: 'regering',
-        parties: regering,
-        title: `Regering`,
-        seats: regering.reduce((t, party) => t + party.seats, 0),
-        percentage:
-          Math.round(
-            regering.reduce((t, party) => t + party.seatPercentage, 0) * 1000
-          ) / 10,
-      },
+  sumGroups(parties, groups) {
+    const partiesByGroup = Object.entries(groups).reduce(
+      (acc, [key, group]) => [
+        ...acc,
+        {
+          ...group,
+          name: key,
+          parties: parties
+            .filter((a) => (EU ? a.eu === key : a.affiliation === key))
+            .sort((a, b) => b.seats - a.seats),
+        },
+      ],
+      []
+    )
 
-      {
-        name: 'stod',
-        parties: stod,
-        title: `Stödpartier`,
-        seats: stod.reduce((t, party) => t + party.seats, 0),
-        percentage:
-          Math.round(
-            stod.reduce((t, party) => t + party.seatPercentage, 0) * 1000
-          ) / 10,
-      },
-      {
-        name: 'opposition',
-        parties: opposition,
-        title: `Opposition`,
-        percentage:
-          Math.round(
-            opposition.reduce((t, party) => t + party.seatPercentage, 0) * 1000
-          ) / 10,
-        seats: opposition.reduce((t, party) => t + party.seats, 0),
-      },
-    ]
+    return partiesByGroup.map((group) => ({
+      ...group,
+      seats: group.parties.reduce((t, party) => t + party.seats, 0),
+      percentage:
+        Math.round(
+          group.parties.reduce((t, party) => t + party.seatPercentage, 0) * 1000
+        ) / 10,
+    }))
   }
 
   render() {
     const { parties, coalitions, groups, polls } = this.props
-    const legendGroups = this.sumGroups(parties)
-    const allParties = legendGroups.reduce((a, b) => a.concat(b.parties), [])
+    const legendGroups = this.sumGroups(parties, groups)
+    const allParties = legendGroups.reduce((a, b) => [...a, ...b.parties], [])
     const totalPercentage = Math.round(
       parties.reduce((t, party) => t + party.percentage, 0)
     )
 
     return (
-      <div className="App">
+      <div className={`App ${EU ? 'EU' : 'Riksdag'}`}>
         <div className="App-header">
           <header className="App-header-inner">
             <img alt="Mandatkollen logotyp" src="/images/icon.png" />
@@ -139,7 +119,8 @@ class App extends Component {
           <br />
           <h2>Eller experimentera själv %</h2>
           <Sliders
-            parties={parties}
+            groups={groups}
+            parties={allParties}
             editCoalitions={coalitions.editCoalitions}
           />
           {totalPercentage < 99.6 || totalPercentage > 100.4 ? (

src/components/Seating.jsx

@@ -9,7 +9,6 @@ const obj = (parties) =>
   )
 
 const Seating = ({ parties, seatCount = true }) => {
-  console.log('seating', parties, seatCount)
   return parliamentSVG(obj(parties), seatCount)
 }
 

src/components/Sliders.jsx

@@ -4,41 +4,21 @@ import pureact from 'pureact'
 import Mixer from './Mixer.jsx'
 import { dragOver, dropUpdate, dragEnter } from '../lib/draganddrop'
 
-const Sliders = ({ parties, editCoalitions }) => (
+const Sliders = ({ groups, parties, editCoalitions }) => (
   <div className="App-sliders" id="sliders">
-    <section
-      ondragenter={dragEnter}
-      ondragover={dragOver}
-      ondrop={dropUpdate('regering')}
-    >
-      {parties
-        .filter((x) => x.affiliation === 'regering')
-        .map((party) => (
-          <Mixer party={party} editCoalitions={editCoalitions} />
-        ))}
-    </section>
-    <section
-      ondragenter={dragEnter}
-      ondragover={dragOver}
-      ondrop={dropUpdate('stod')}
-    >
-      {parties
-        .filter((x) => x.affiliation === 'stod')
-        .map((party) => (
-          <Mixer party={party} editCoalitions={editCoalitions} />
-        ))}
-    </section>
-    <section
-      ondragenter={dragEnter}
-      ondragover={dragOver}
-      ondrop={dropUpdate('opposition')}
-    >
-      {parties
-        .filter((x) => x.affiliation === 'opposition')
-        .map((party) => (
-          <Mixer party={party} editCoalitions={editCoalitions} />
-        ))}
-    </section>
+    {Object.entries(groups).map(([group, { title }]) => (
+      <section
+        ondragenter={dragEnter}
+        ondragover={dragOver}
+        ondrop={dropUpdate(group)}
+      >
+        {parties
+          .filter((x) => x.affiliation === group || x.eu === group)
+          .map((party) => (
+            <Mixer party={party} editCoalitions={editCoalitions} />
+          ))}
+      </section>
+    ))}
   </div>
 )
 

src/lib/draganddrop.mjs

@@ -26,13 +26,11 @@ const dropUpdate = (affiliation) => (event) => {
 
 const dragEnter = (group) => (event) => {
   event.preventDefault()
-  console.log('dropenter', group)
   groupEnter(group)
 }
 
 const dragLeave = (group) => (event) => {
   event.preventDefault()
-  console.log('dropleave', group)
   groupLeave(group)
 }
 

src/reducers/groups.mjs

@@ -1,25 +1,35 @@
-const initialState = {
-  regering: { hover: false, count: 0 },
-  opposition: { hover: false, count: 0 },
-  stod: { hover: false, count: 0 },
-}
+const EU = import.meta.env.VITE_EU === 'true'
+const initialState = EU
+  ? {
+      epp: { title: 'EPP', hover: false, count: 0 },
+      social: { title: 'S&D', hover: false, count: 0 },
+      renew: { title: 'Renew', hover: false, count: 0 },
+      greens: { title: 'Greens/EFA', hover: false, count: 0 },
+      ecr: { title: 'ECR', hover: false, count: 0 },
+      left: { title: 'The Left', hover: false, count: 0 },
+    }
+  : {
+      regering: { title: 'Regering', hover: false, count: 0 },
+      stod: { title: 'Stödpartier', hover: false, count: 0 },
+      opposition: { title: 'Opposition', hover: false, count: 0 },
+    }
 
 export default function (state = initialState, action) {
-  console.log('action', action)
+  const group = state[action.group]
   switch (action.type) {
     case 'GROUP_ENTER': {
-      const count = state[action.group].count + 1
+      const count = group.count + 1
       const newState = {
         ...state,
-        [action.group]: { hover: count > 0, count },
+        [action.group]: { ...group, hover: count > 0, count },
       }
       return newState
     }
     case 'GROUP_LEAVE': {
-      const count = state[action.group].count - 1
+      const count = group.count - 1
       return {
         ...state,
-        [action.group]: { hover: count > 0, count },
+        [action.group]: { ...group, hover: count > 0, count },
       }
     }
     default:

src/reducers/parties.mjs

@@ -1,13 +1,14 @@
 import { Parliament } from '../lib/parliament.mjs'
-
-const SEATS = parseFloat(import.meta.env.VITE_PARLIAMENT_SEATS || 349)
+const EU = import.meta.env.VITE_EU === 'true'
+const SEATS = EU ? 21 : 349
 const parties = [
   {
     id: 1,
     name: 'Kristdemokraterna',
     percentage: 5.34,
     seats: 19,
     affiliation: 'regering',
+    eu: 'epp',
     colour: '#3163A6',
     abbreviation: 'KD',
   },
@@ -17,6 +18,7 @@ const parties = [
     percentage: 19.1,
     seats: 68,
     affiliation: 'regering',
+    eu: 'ecr',
     colour: '#2F80ED',
     abbreviation: 'M',
   },
@@ -26,6 +28,7 @@ const parties = [
     percentage: 4.61,
     seats: 16,
     affiliation: 'regering',
+    eu: 'renew',
     colour: '#56CCF2',
     abbreviation: 'L',
   },
@@ -35,6 +38,7 @@ const parties = [
     percentage: 6.71,
     seats: 24,
     affiliation: 'opposition',
+    eu: 'renew',
     colour: '#27AE60',
     abbreviation: 'C',
   },
@@ -44,6 +48,7 @@ const parties = [
     percentage: 20.54,
     seats: 73,
     affiliation: 'stod',
+    eu: 'ecr',
     colour: '#F2C94C',
     abbreviation: 'SD',
   },
@@ -53,6 +58,7 @@ const parties = [
     percentage: 30.33,
     seats: 107,
     affiliation: 'opposition',
+    eu: 'social',
     colour: '#E04B49',
     abbreviation: 'S',
   },
@@ -62,6 +68,7 @@ const parties = [
     percentage: 5.08,
     seats: 18,
     affiliation: 'opposition',
+    eu: 'greens',
     colour: '#219653',
     abbreviation: 'MP',
   },
@@ -71,6 +78,7 @@ const parties = [
     percentage: 6.75,
     seats: 24,
     affiliation: 'opposition',
+    eu: 'left',
     colour: '#B12827',
     abbreviation: 'V',
   },
@@ -94,7 +102,11 @@ export default function (state = initialState, action) {
       const updatedParties = state
         .map((party) =>
           party.abbreviation === action.abbreviation
-            ? { ...party, affiliation: action.affiliation }
+            ? {
+                ...party,
+                affiliation: action.affiliation,
+                eu: action.affiliation,
+              }
             : party
         )
         .sort(parliament.sort)