unresolve incidents

Author: bppr

ui/components/App.tsx

@@ -7,6 +7,7 @@ import _ from 'lodash';
 
 export type IncidentRecord = IncidentData & {
   resolved: boolean
+  tallied: boolean
 }
 
 type IncidentCounts = {
@@ -18,6 +19,7 @@ const INITIAL_INCIDENTS: IncidentRecord[] = [
   //   sessionNum: 0,
   //   sessionTime: 45.5016098234,
   //   resolved: false,
+  //   tallied: false,
   //   car: {
   //     index: 0,
   //     driverName: 'Brian Pratt2',
@@ -32,6 +34,7 @@ const INITIAL_INCIDENTS: IncidentRecord[] = [
   //   sessionNum: 0,
   //   sessionTime: 49.5016098234,
   //   resolved: false,
+  //   tallied: false,
   //   car: {
   //     index: 0,
   //     driverName: 'Brian Pratt2',
@@ -46,6 +49,7 @@ const INITIAL_INCIDENTS: IncidentRecord[] = [
   //   sessionNum: 0,
   //   sessionTime: 58.591304598,
   //   resolved: false,
+  //   tallied: false,
   //   car: {
   //     index: 1,
   //     driverName: 'Mike Racecar',
@@ -69,15 +73,15 @@ export function App() {
 
   function listen() {
     sdk.receive('incident', (message: IncidentData) => {
-      setIncidents(prev => [{ ...message, resolved: false }, ...prev]);
+      setIncidents(prev => [{ ...message, resolved: false, tallied: false }, ...prev]);
     });
   }
 
   function dismissIncident(index: number) {
-    return () => {
+    return (tallied: boolean = false) => {
       const incident = incidents[index];
       const newIncidents = _.clone(incidents);
-      newIncidents[index] = {...incident, resolved: true };
+      newIncidents[index] = {...incident, resolved: true, tallied };
 
       setIncidents(newIncidents);
     }
@@ -92,7 +96,24 @@ export function App() {
         return {...prev, [carNumber]: prevValue + 1 }
       });
 
-      dismissIncident(index)();
+      dismissIncident(index)(true);
+    }
+  }
+
+  function unresolveIncident(index: number) {
+    return () => {
+      const incident = incidents[index];
+      const newIncidents = [...incidents]
+      newIncidents[index] = {...incident, resolved: false, tallied: false };
+
+      setIncidents(newIncidents);
+
+      if (incident.tallied) {
+        setDriverIncidentCounts(prev => {
+          const prevValue = prev[incident.car.number] ?? 0
+          return {...prev, [incident.car.number]: prevValue - 1 }
+        });
+      }
     }
   }
 
@@ -108,7 +129,7 @@ export function App() {
   useEffect(listen, []);
 
   const displayIncidents = selectedCar
-    ? incidents.filter(i => i.car.number == selectedCar)
+    ? incidents.filter(i => i.car.number == selectedCar && i.tallied == true)
     : incidents;
 
   return <div className="app-main">
@@ -117,15 +138,16 @@ export function App() {
       <p>
         { 
           selectedCar && 
-            <span>{`Showing incidents for Car #${selectedCar} `}
+            <span>{`Showing only counted incidents for Car #${selectedCar} `}
             <button onClick={() => setSelectedCar(undefined)}>Show All</button></span>
         }
         { !selectedCar && 'Showing all incidents' }
       </p>
       { 
         displayIncidents.map((incident, idx) => <Incident
-          onDismiss={dismissIncident(idx)}
+          onDismiss={() => dismissIncident(idx)(false)}
           onAcknowledge={countIncident(idx)}
+          unresolve={unresolveIncident(idx)}
           key={keyFor(incident)} 
           incident={incident} />
         )

ui/components/Incident.tsx

@@ -15,7 +15,12 @@ function formatPct(lapPct: number, decimals: number = 2) {
 
 type IncidentHandler = () => void
 
-export default function Incident(props: { incident: IncidentRecord, onAcknowledge: IncidentHandler, onDismiss: IncidentHandler }) {
+export default function Incident(props: { 
+  incident: IncidentRecord, 
+  onAcknowledge: IncidentHandler, 
+  onDismiss: IncidentHandler,
+  unresolve: IncidentHandler
+}) {
   const car = props.incident.car;
 
   let incidentTypeStr = "";
@@ -28,10 +33,16 @@ export default function Incident(props: { incident: IncidentRecord, onAcknowledg
     sdk.replay(props.incident)
   }
 
-  return <div className={`incident ${props.incident.resolved ? 'resolved' : '' }`}>
+  const classNames = [
+    'incident', 
+    props.incident.resolved && 'resolved', 
+    props.incident.tallied && 'tallied'
+  ].filter(n => n).join(' ')
+
+  return <div className={classNames}>
     <div className="incident-header">
       <div className="incident-deets">
-        <h2>Car #{ car.number }{ incidentTypeStr }</h2>
+        <h2>Car #{ car.number } { incidentTypeStr }</h2>
         <h4 className="incident-count">{ car.incidentCount }x</h4>
         <h5>Lap { car.currentLap } / { formatPct(car.currentLapPct) }</h5>
       </div>
@@ -40,6 +51,7 @@ export default function Incident(props: { incident: IncidentRecord, onAcknowledg
         <a title="Show Replay" onClick={ showReplay }>🎥</a>
         { !props.incident.resolved && <a onClick={props.onAcknowledge} title="Tally Incident">➕</a> }
         { !props.incident.resolved && <a onClick={props.onDismiss} title="Dismiss Incident">🙈</a> }
+        { props.incident.resolved && <a onClick={props.unresolve} title="Unresolve Incident">👀</a>}
       </div>
     </div>
 

ui/styles/app.css

@@ -22,6 +22,11 @@ body {
 
 .incident.resolved {
   opacity: 0.5;
+  background-color: lightgray;
+}
+
+.incident.resolved.tallied {
+  background-color: lightcyan;
 }
 
 .incident-header {