Letting GuessPane and street view get state from store

client/src/components/screens/GamePanel/GamePanel.jsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import Loading from '../../util/Loading';
 import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
-import { dispatch, useCurrentRound, useTargetPoint } from '../../../domain/gameStore';
+import { dispatch, useCurrentRound } from '../../../domain/gameStore';
 import usePreventNavigation from '../../../hooks/usePreventNavigation';
 
 const Container = styled.div`
@@ -32,41 +32,23 @@ const StreetViewWrapper = styled.div`
 export default () => {
   // warn the user if they navigate away
   usePreventNavigation();
-
-  const [submitDisabled, setSubmitDisabled] = useState(false);
-  const [selectedPoint, setSelectedPoint] = useState(null);
   const finished = useCurrentRound() === null;
-  const targetPoint = useTargetPoint();
   useEffect(() => { 
     if (finished) {
       dispatch.goToSummary();
     }
   }, [finished]);
 
-  if (finished) {
-    return <Loading/>
-  }
-
-  const handleSubmitGuess = async () => {
-    setSubmitDisabled(true);
-    await dispatch.submitGuess(selectedPoint);
-  }
-
-  return (
-    <Container>
-      <StreetViewWrapper>
-        <PositionedStreetView 
-          startPosition={targetPoint}
-          resetPosition={targetPoint}
-          onPanoMoved={(lat, lng, head, pitch) => console.log(`${lat}, ${lng}, ${head}, ${pitch}`)}
-        />
-      </StreetViewWrapper>
-      <GuessPane
-        onTimeout={handleSubmitGuess}
-        onSelectPoint={setSelectedPoint}
-        onSubmitGuess={handleSubmitGuess}
-        submitDisabled={submitDisabled || selectedPoint === null}
-      />
-    </Container>
-  );
+  return finished
+    ? <Loading />
+    : (
+      <Container>
+        <StreetViewWrapper>
+          <PositionedStreetView
+            onPanoMoved={(lat, lng, head, pitch) => console.log(`${lat}, ${lng}, ${head}, ${pitch}`)}
+          />
+        </StreetViewWrapper>
+        <GuessPane />
+      </Container>
+    );
 }

client/src/components/screens/GamePanel/GuessPane.jsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import ClickMarkerMap from "./ClickMarkerMap";
 import RoundTimer from "./RoundTimer";
 import Button from "../../util/Button";
+import { dispatch } from "../../../domain/gameStore";
 
 const Container = styled.div`
   height: 100%;
@@ -87,21 +88,28 @@ const SubmitButton = styled(Button)`
   }
 `
 
-export default ({
-  onTimeout,
-  onSelectPoint,
-  onSubmitGuess,
-  submitDisabled,
-}) => (
-  <Container>
-    <MapWrapper>
-      <ClickMarkerMap onMarkerMoved={onSelectPoint} />
-    </MapWrapper>
-    <SubmitWrapper>
-      <RoundTimer onTimeout={onTimeout} />
-      <SubmitButton onClick={onSubmitGuess} disabled={submitDisabled}>
-        Submit Guess
-      </SubmitButton>
-    </SubmitWrapper>
-  </Container>
-);
+export default () => {
+  const [selectedPoint, setSelectedPoint] = useState(null);
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmitGuess = async () => {
+    setSubmitted(true);
+    if (!submitted) {
+      await dispatch.submitGuess(selectedPoint);
+    }
+  }
+
+  return (
+    <Container>
+      <MapWrapper>
+        <ClickMarkerMap onMarkerMoved={setSelectedPoint} />
+      </MapWrapper>
+      <SubmitWrapper>
+        <RoundTimer onTimeout={handleSubmitGuess} />
+        <SubmitButton onClick={handleSubmitGuess} disabled={submitted || selectedPoint === null}>
+          Submit Guess
+        </SubmitButton>
+      </SubmitWrapper>
+    </Container>
+  );
+};

client/src/components/screens/GamePanel/PositionedStreetView.jsx

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useCallback } from "react";
 import styled from "styled-components";
 import usePano from "./usePano";
+import { useTargetPoint } from "../../../domain/gameStore";
 
 const Container = styled.div`
   position: relative;
@@ -32,14 +33,11 @@ const ResetButton = styled.div`
   }
 `
 
-export default ({ startPosition, resetPosition, onPanoMoved }) => {
+export default ({ onPanoMoved }) => {
+  const resetPosition = useTargetPoint();
+  const startPosition = resetPosition; // TODO swap this out later
   const panoDivRef = useRef(null);
-  const panoRef = usePano(panoDivRef, { lat: 0, lng: 0 });
-  useEffect(() => {
-    if (panoRef.current) {
-      panoRef.current.setPosition(startPosition);
-    }
-  }, [panoRef, startPosition]);
+  const panoRef = usePano(panoDivRef, startPosition);
   const panoChangeCallback = useCallback(() => {
     const pos = panoRef.current.getPosition();
     const pov = panoRef.current.getPov();