update UI

pusher · Jan 19, 2021 · b7c1c5c · b7c1c5c
1 parent 3fb3be7
commit b7c1c5c
Show file tree

Hide file tree

Showing 14 changed files with 486 additions and 186 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,91 +1,185 @@
-import {useState, useEffect} from "react"
-import States from "./userComponents/states/index"
-import * as PusherPushNotifications from "@pusher/push-notifications-web"
-import Pusher from 'pusher-js';
+import { useState, useEffect } from "react";
+import * as PusherPushNotifications from "@pusher/push-notifications-web";
+import Pusher from "pusher-js";
+
+import states from "./userComponents/states/states";
+
 import Nav from "./userComponents/header/nav/nav";
+import States from "./userComponents/states/index";
+import Details from "./userComponents/details";
 import Footer from "./userComponents/footer/footer";
-import icon from "./Blue icon.png"
+
+import icon from "./images/pusher-logo.svg";
+
 function App() {
   const sampleData = [
-    [ 1, 'Alabama', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
-    [ 1, 'Delaware', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
-    [ 1, 'Florida', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
-    [ 1, 'Hawaii', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
-    [ 1, 'Idaho', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ],
-    [ 1, 'Kentucky', 0, 0, 0, 0, 0, 0, 0, 0, 'inprogress' ]
-  ]
-  const [data, updateData] = useState(sampleData)
-  const [total, updateTotal] = useState({message: sampleData[0]})
-  const [subStatus, updateSubStatus] = useState("subscribe")
+    [1, "Alabama", 0, 0, 0, 0, 0, 0, 0, 0, "inprogress"],
+    [1, "Delaware", 0, 0, 0, 0, 0, 0, 0, 0, "inprogress"],
+    [1, "Florida", 0, 0, 0, 0, 0, 0, 0, 0, "inprogress"],
+    [1, "Hawaii", 0, 0, 0, 0, 0, 0, 0, 0, "inprogress"],
+    [1, "Idaho", 0, 0, 0, 0, 0, 0, 0, 0, "inprogress"],
+    [1, "Kentucky", 0, 0, 0, 0, 0, 0, 0, 0, "inprogress"],
+  ];
+  const [data, updateData] = useState(sampleData);
+  const [total, updateTotal] = useState({ message: sampleData[0] });
+  const [subStatus, updateSubStatus] = useState("subscribe");
 
-  const pusher = new Pusher(process.env.REACT_APP_KEY, {//
-    cluster: process.env.REACT_APP_CLUSTER
+  const pusher = new Pusher(process.env.REACT_APP_KEY, {
+    //
+    cluster: process.env.REACT_APP_CLUSTER,
   });
-  const channel = pusher.subscribe('votes');
-  
-  channel.bind('vote-event', function(dataFromServer) {
-    updateData(data =>{
-
-      data.splice(Number(dataFromServer.message[11]), 1, dataFromServer.message)
-      const arr = [...data]
-      return arr
-    }
-    )
-
-    updateTotal(dataFromServer)
-    
-
+  const channel = pusher.subscribe("votes");
+
+  channel.bind("vote-event", function (dataFromServer) {
+    updateData((data) => {
+      data.splice(
+        Number(dataFromServer.message[11]),
+        1,
+        dataFromServer.message
+      );
+      const arr = [...data];
+      return arr;
+    });
+
+    updateTotal(dataFromServer);
   });
-  useEffect(async ()=>{
-    const res = await fetch("https://cryptic-lake-12063.herokuapp.com/")//https://cryptic-lake-12063.herokuapp.com/
-    const json = await res.json()
-    updateTotal(json)
-    updateData(data =>{
-      data.splice(Number(json.message[11]), 1, json.message)
-      const arr = [...data]
-      return arr
-    }
-    )
-  }, [])
+  useEffect(async () => {
+    const res = await fetch("https://cryptic-lake-12063.herokuapp.com/"); //https://cryptic-lake-12063.herokuapp.com/
+    const json = await res.json();
+    updateTotal(json);
+    updateData((data) => {
+      data.splice(Number(json.message[11]), 1, json.message);
+      const arr = [...data];
+      return arr;
+    });
+  }, []);
   const beamsClient = new PusherPushNotifications.Client({
-    instanceId:  process.env.REACT_APP_INSTANCEID,
-  })
+    instanceId: process.env.REACT_APP_INSTANCEID,
+  });
+
+  beamsClient
+    .start()
+    .then(() => beamsClient.getDeviceId())
+    .then((deviceId) => {
+      console.log(deviceId); // Will log something like web-1234-1234-1234-1234
+    })
+    .catch((e) => console.error("Could not get device id", e));
 
-  beamsClient.start()
-  .then(() => beamsClient.getDeviceId())
-  .then(deviceId => {
-    console.log(deviceId) // Will log something like web-1234-1234-1234-1234
-  }).catch(e => console.error('Could not get device id', e));
-
-  function sub(){
-    if(subStatus === "unsubscribe"){
-      beamsClient.start()
-      .then(() => beamsClient.removeDeviceInterest('hello'))
+  function sub() {
+    if (subStatus === "unsubscribe") {
+      beamsClient
+        .start()
+        .then(() => beamsClient.removeDeviceInterest("hello"))
+        .then(() => {
+          // Build something beatiful 🌈
+          alert("You will not be notified when voting is completed");
+          updateSubStatus("subscribe");
+        });
+    }
+    beamsClient
+      .start()
+      .then(() => beamsClient.addDeviceInterest("vote-event"))
       .then(() => {
         // Build something beatiful 🌈
-        alert("You will not be notified when voting is completed")
-        updateSubStatus("subscribe")
+        alert("You will notified when voting is completed");
+        updateSubStatus("unsubscribe");
       });
-    }
-    beamsClient.start()
-    .then(() => beamsClient.addDeviceInterest('vote-event'))
-    .then(() => {
-      // Build something beatiful 🌈
-      alert("You will notified when voting is completed")
-      updateSubStatus("unsubscribe")
-    });
   }
 
+  const [showDetails, setShowDetails] = useState(false);
+
   return (
-    <div style={{display:" flex", flexDirection: "row"}}>
-      <div style={{display:"flex", flexDirection:"row", justifyContent:"center",height:"840px", width: "104px", backgroundColor: "#F2F1F9", paddingTop:"5px"}}>
-            <img src={icon} width="30px" height="40px" />
+    <div style={{ display: " flex", flexDirection: "row", minHeight: "100vh" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "104px",
+          backgroundColor: "#F2F1F9",
+          paddingTop: "32px",
+          flexShrink: "0",
+        }}
+      >
+        <img
+          src={icon}
+          alt="Pusher"
+          width="40px"
+          height="40px"
+          style={{ width: "40px", height: "40px" }}
+        />
+      </div>
+      <div
+        style={{
+          width: "100%",
+          marginLeft: "65px",
+          marginRight: "65px",
+          maxWidth: "1208px",
+          paddingRight: "24px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            backgroundColor: "",
+            marginTop: "100px",
+            minWidth: "539px",
+          }}
+        >
+          <Nav />
+          <button
+            onClick={() => sub()}
+            style={{
+              color: "white",
+              backgroundColor: "#7F7FA3",
+              borderRadius: "4px",
+              fontSize: "16px",
+              lineHeight: "28px",
+              fontWeight: 600,
+              padding: "4px 16px",
+              border: "none",
+              alignSelf: "flex-end",
+              cursor: "pointer",
+              marginBottom: "12px",
+            }}
+          >
+            {subStatus}
+          </button>
+        </div>
+        <div
+          style={{
+            width: "100%",
+            height: "2px",
+            marginTop: "12px",
+            backgroundColor: "#EEEBFF",
+            minWidth: "539px",
+          }}
+        />
+        <div>
+          {showDetails !== false ? (
+            <Details
+              index={showDetails}
+              regions={data}
+              src={states[showDetails].src}
+              col={states[showDetails].color}
+              candidate={states[showDetails].name}
+              setShowDetails={setShowDetails}
+            />
+          ) : (
+            <>
+              <States
+                total={total}
+                data={data}
+                states={states}
+                setShowDetails={setShowDetails}
+              />
+              <div>
+                <Footer />
+              </div>
+            </>
+          )}
         </div>
-      <div style={{marginLeft:"65px"}}>
-      <div style={{display:"flex", justifyContent: "space-between", backgroundColor:"", marginTop:"100px"}}><Nav /><button onClick={()=> sub()} style={{height:"30px", color:"#300D4F", backgroundColor:"", fontFamily:"Maison Neue", borderRadius:"5px", marginRight:"10%"}}>{subStatus}</button></div>
-      <hr style={{width:"80em", borderColor:"#EEEBFF"}}/>
-      <div><States total={total} data={data} /></div>
-      <div><Footer/></div>
       </div>
     </div>
   );

diff --git a/src/Blue icon.png b/src/Blue icon.png
diff --git a/src/images/arrow-left.svg b/src/images/arrow-left.svg
diff --git a/src/images/pusher-logo.svg b/src/images/pusher-logo.svg
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/userComponents/details/index.js b/src/userComponents/details/index.js
@@ -0,0 +1,109 @@
+import arrow from "../../images/arrow-left.svg";
+
+export default function Modal(props) {
+  return (
+    <div style={{ display: "flex", flexDirection: "row", width: "100%" }}>
+      <div style={{}}>
+        <button
+          style={{
+            color: "white",
+            backgroundColor: "#7F7FA3",
+            borderRadius: "4px",
+            fontSize: "16px",
+            lineHeight: "28px",
+            fontWeight: 600,
+            padding: "4px 16px",
+            border: "none",
+            cursor: "pointer",
+            marginBottom: "12px",
+            marginTop: "16px",
+          }}
+          onClick={() => props.setShowDetails(false)}
+        >
+          <img src={arrow} alt="" /> Back
+        </button>
+        <h3
+          style={{
+            position: "relative",
+            fontWeight: 500,
+            fontSize: "34px",
+            lineHeight: "48px",
+            fontFamily: "Maison Neue",
+            color: "#300D4F",
+            marginTop: "40px",
+            marginBottom: "32px",
+            paddingLeft: "16px",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              left: "0px",
+              top: "0px",
+              backgroundColor: props.col,
+              height: "48px",
+              width: "4px",
+            }}
+          />
+          {props.candidate}
+        </h3>
+
+        <table
+          style={{
+            textAlign: "left",
+            width: "727px",
+            borderCollapse: "collapse",
+            marginBottom: "24px",
+          }}
+        >
+          <thead
+            style={{
+              color: "#300D4F",
+              fontSize: "20px",
+              lineHeight: "34px",
+              fontFamily: "Maison Neue",
+            }}
+          >
+            <tr
+              style={{
+                backgroundColor: "#F7F5FF",
+                padding: "11px 16px",
+                height: "56px",
+              }}
+            >
+              <th
+                style={{ paddingLeft: "16px", fontWeight: 500, width: "241px" }}
+              >
+                Region Name
+              </th>
+              <th style={{ fontWeight: 500, width: "250px" }}>Votes</th>
+              <th style={{ fontWeight: 500 }}>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.regions.map((region, i) => {
+              return (
+                <tr
+                  style={{
+                    backgroundColor: i % 2 === 0 ? "white" : "#F7F5FF",
+                    color: "#6A52FF",
+                    height: "40px",
+                    fontFamily: "Maison Neue",
+                    fontSize: "20px",
+                    lineHeight: "34px",
+                  }}
+                >
+                  <td style={{ paddingLeft: "16px", fontWeight: 500 }}>
+                    {region[1]}
+                  </td>
+                  <td style={{ fontWeight: 500 }}>{region[props.index + 2]}</td>
+                  <td style={{ fontWeight: 500 }}>{region[10]}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}