From 6aa6345c22841311c8a5166f66098ab041d18e3a Mon Sep 17 00:00:00 2001
From: Victor Benedict <69704239+vibenedict@users.noreply.github.com>
Date: Sat, 1 Jun 2024 07:36:37 +0000
Subject: [PATCH] chore: another pixel placement control flow

---
 frontend/src/App.js                  |  9 +++++++++
 frontend/src/footer/PixelSelector.js | 16 +++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 5a035421..03abf5c3 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -173,6 +173,8 @@ function App() {
   const [isEraserMode, setIsEraserMode] = React.useState(false);
   const [isExtraDeleteMode, setIsExtraDeleteMode] = React.useState(false);
 
+  const [placementTimer, setPlacementTimer] = useState('XX:XX');
+
   useEffect(() => {
     const getLastPlacedPixel = `get-last-placed-time?address=${queryAddress}`;
     async function fetchGetLastPlacedPixel() {
@@ -303,6 +305,11 @@ function App() {
     setSelectedPositionX(x);
     setSelectedPositionY(y);
     setPixelSelectedMode(true);
+
+    if (placementTimer == 'Place Pixel') {
+      setSelectorMode(true);
+      setIsEraserMode(false);
+    }
     // TODO: move http fetch for pixel data here?
   };
 
@@ -536,6 +543,8 @@ function App() {
           basePixelTimer={basePixelTimer}
           queryAddress={queryAddress}
           setActiveTab={setActiveTab}
+          placementTimer={placementTimer}
+          setPlacementTimer={setPlacementTimer}
         />
         <TabsFooter
           tabs={tabs}
diff --git a/frontend/src/footer/PixelSelector.js b/frontend/src/footer/PixelSelector.js
index e954cf06..2783df60 100644
--- a/frontend/src/footer/PixelSelector.js
+++ b/frontend/src/footer/PixelSelector.js
@@ -1,31 +1,29 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import './PixelSelector.css';
 import '../utils/Styles.css';
 
 const PixelSelector = (props) => {
   // Track when a placement is available
 
-  const [placementTimer, setPlacementTimer] = useState('XX:XX');
-
   useEffect(() => {
     if (props.queryAddress === '0') {
-      setPlacementTimer('Connect Wallet');
+      props.setPlacementTimer('Connect Wallet');
       return;
     }
     if (props.availablePixels > 0) {
       let amountAvailable = props.availablePixels - props.availablePixelsUsed;
       if (amountAvailable > 1) {
-        setPlacementTimer('Place Pixels');
+        props.setPlacementTimer('Place Pixels');
         return;
       } else if (amountAvailable === 1) {
-        setPlacementTimer('Place Pixel');
+        props.setPlacementTimer('Place Pixel');
         return;
       } else {
-        setPlacementTimer('Out of Pixels');
+        props.setPlacementTimer('Out of Pixels');
         return;
       }
     } else {
-      setPlacementTimer(props.basePixelTimer);
+      props.setPlacementTimer(props.basePixelTimer);
     }
   }, [
     props.availablePixels,
@@ -93,7 +91,7 @@ const PixelSelector = (props) => {
           }
           onClick={toSelectorMode}
         >
-          <p className='PixelSelector__text'>{placementTimer}</p>
+          <p className='PixelSelector__text'>{props.placementTimer}</p>
           {props.availablePixels > (props.basePixelUp ? 1 : 0) && (
             <div className='PixelSelector__extras'>
               <div