first page load bug fixes

package.json

@@ -7,7 +7,9 @@
     "start": "vite --port 3000",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -41,6 +43,7 @@
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "gh-pages": "^6.2.0",
     "globals": "^15.11.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",

src/components/Layout/HeaderComponent.jsx

@@ -147,7 +147,7 @@ export const HeaderComponent = () => {
   }
 
   const renderProgression = () => {
-    return state.chordPianoSet.map((piano, i) => {
+    return state.chordPianoSet?.map((piano, i) => {
       return (
         <div key={"ci-" + piano.id}>
           <Link

src/components/PianoBoardComponent.jsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from "react"
-import "../styles/Piano.css"
+import React, { useEffect, useState, useLayoutEffect } from "react"
 import { useAppContext } from "../components/context/AppContext"
 import { getProgressionCode } from "../utils/chordCodeHandler"
 import { ChordPianoComponent } from "../components/ChordPianoComponent"
@@ -8,6 +7,25 @@ import { useHistory } from "react-router-dom"
 export const PianoBoardComponent = () => {
   const { state, dispatch } = useAppContext()
   const history = useHistory()
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [refresh, setRefresh] = useState(0)
+
+  // Handle initial load and URL changes
+  useLayoutEffect(() => {
+    const handleInitialLoad = () => {
+      const newParams = history.location.search + history.location.hash
+      if (!isInitialized && newParams) {
+        dispatch({
+          type: "BUILD_PROG_FROM_CODE",
+          payload: newParams
+        })
+        setIsInitialized(true)
+        setRefresh(prev => prev + 1)
+      }
+    }
+
+    handleInitialLoad()
+  }, [history.location.search, history.location.hash, isInitialized, dispatch])
 
   // Handle URL changes and chord building
   useEffect(() => {
@@ -19,10 +37,16 @@ export const PianoBoardComponent = () => {
         type: "BUILD_PROG_FROM_CODE",
         payload: newParams
       })
+      setRefresh(prev => prev + 1)
     }
   }, [history.location.search, history.location.hash, state.building, dispatch])
 
+  // Update URL when state changes
   useEffect(() => {
+    if (!state.chordPianoSet) {
+      return
+    }
+
     const currentCode = getProgressionCode(state)
     const newParams = history.location.search + history.location.hash
 
@@ -31,14 +55,14 @@ export const PianoBoardComponent = () => {
         search: currentCode
       })
     }
-  }, [state])
+  }, [state, history])
 
   const renderChordPianoSet = () => {
-    return state.chordPianoSet.map((chordPiano) => (
-      <div key={chordPiano.id}>
+    return state.chordPianoSet?.map((chordPiano) => (
+      <div key={`wrapper-${chordPiano.id}-${refresh}`}>
         <ChordPianoComponent
           id={`piano-${chordPiano.id}`}
-          key={`piano-${chordPiano.id}`}
+          key={`piano-${chordPiano.id}-${refresh}`}
           className="row chordPianoComponent"
           pianoComponentId={Number(chordPiano.id)}
           history={history}
@@ -49,8 +73,8 @@ export const PianoBoardComponent = () => {
   }
 
   return (
-    <div key="pianoBoard" className="pianoBoard">
-      {state.chordPianoSet.length > 0 ? (
+    <div key={`pianoBoard-${refresh}`} className="pianoBoard">
+      {state.chordPianoSet?.length ?? 0 > 0 ? (
         <> 
           {renderChordPianoSet()}   
           <div className="pianoBoardGutter" />

src/components/PianoComponent.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useEffect, useRef } from "react"
 import "../styles/Piano.css"
 import { Key } from "./Key"
 import { useAppContext, getPianoById, getProgKey } from "./context/AppContext"
@@ -8,17 +8,46 @@ import { getChordNumeral } from "../utils/numeralHelper"
 import { playPiano } from "../utils/synthPlayer"
 import PropTypes from "prop-types"
 
-export const PianoComponent = ({ pianoComponentId }) => {
+export const PianoComponent = ({ pianoComponentId, forceUpdate }) => {
   const { state, dispatch } = useAppContext()
   const pianoId = pianoComponentId
+  const mountedRef = useRef(false)
 
-  const handleClick = (note, noteNumber, octave) => {
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true
+      // Force a re-render of the piano keys on mount
+      const piano = getPianoById(state, pianoId)
+      if (piano) {
+        dispatch({
+          type: "REFRESH_PIANO",
+          id: pianoId,
+          payload: piano
+        })
+      }
+    }
+  }, [pianoId, state, dispatch])
 
-    const noteLetter = getNoteLetter("C", noteNumber)
+  // Force update when parent signals
+  useEffect(() => {
+    if (forceUpdate) {
+      const piano = getPianoById(state, pianoId)
+      if (piano) {
+        dispatch({
+          type: "REFRESH_PIANO",
+          id: pianoId,
+          payload: piano
+        })
+      }
+    }
+  }, [forceUpdate, pianoId, state, dispatch])
 
-    var selectedKey = {}
-    selectedKey.noteLetter = noteLetter
-    selectedKey.octave = octave
+  const handleClick = (note, noteNumber, octave) => {
+    const noteLetter = getNoteLetter("C", noteNumber)
+    const selectedKey = {
+      noteLetter,
+      octave
+    }
     dispatch({
       type: "UPDATE_KEY",
       id: pianoId,
@@ -37,28 +66,28 @@ export const PianoComponent = ({ pianoComponentId }) => {
     playPiano(dispatch, state, pianoId)
   }
 
-  const getNumeralChord = (chord) => {
-    let piano = getPianoById(state, pianoId)
-    let key = getProgKey(state);
+  const getNumeralChord = () => {
+    const piano = getPianoById(state, pianoId)
+    const key = getProgKey(state)
     return getChordNumeral(key, piano.selectedChord)
   }
 
   const renderPiano = () => {
-    let piano = getPianoById(state, pianoId).piano
-    return piano.map((octave, i) => {
-      return octave.map((pianoKey) => {
-        pianoKey.octave = i
-        return (
-          <Key
-            key={`${pianoKey.note}-${i}`}
-            pianoKey={pianoKey}
-            handleClick={() =>
-              handleClick(pianoKey.note, pianoKey.noteNumber, pianoKey.octave)
-            }
-          />
-        )
-      })
-    })
+    const piano = getPianoById(state, pianoId)?.piano || []
+    return piano.map((octave, i) => 
+      octave.map((pianoKey) => ({
+        ...pianoKey,
+        octave: i,
+        key: `${pianoKey.note}-${i}-${forceUpdate}`,
+        handleClick: () => handleClick(pianoKey.note, pianoKey.noteNumber, i)
+      }))
+    ).flat().map(pianoKey => (
+      <Key
+        key={pianoKey.key}
+        pianoKey={pianoKey}
+        handleClick={pianoKey.handleClick}
+      />
+    ))
   }
 
   return (
@@ -67,14 +96,14 @@ export const PianoComponent = ({ pianoComponentId }) => {
         <button
           type="button"
           className="piano-play-button"
-          onClick={() => handlePlayClick()}
-        ></button>
+          onClick={handlePlayClick}
+        />
         <div className="pianoBox">
           <button
             type="button"
             className="close pianoCloseButton"
             aria-label="Close"
-            onClick={() => handleClickRemovePiano()}
+            onClick={handleClickRemovePiano}
           >
             <span aria-hidden="true">&times;</span>
           </button>
@@ -85,19 +114,88 @@ export const PianoComponent = ({ pianoComponentId }) => {
             type="button"
             className="close pianoCloseButtonMobile"
             aria-label="Close"
-            onClick={() => handleClickRemovePiano()}
+            onClick={handleClickRemovePiano}
           >
             <span className="mobileClosedBtnText">&times;</span>
           </button>
-
         </div>
       </div> 
-      <div className="pianoRomanNumeral">{getNumeralChord(pianoId)}
+      <div className="pianoRomanNumeral">
+        {getNumeralChord()}
       </div>
     </>
   )
 }
 
 PianoComponent.propTypes = {
-  pianoComponentId: PropTypes.number.isRequired
+  pianoComponentId: PropTypes.number.isRequired,
+  forceUpdate: PropTypes.number
 }
+
+export const PianoBoardComponent = () => {
+  const { state, dispatch } = useAppContext()
+  const history = useHistory()
+  const [refresh, setRefresh] = useState(0)
+  const initialLoadRef = useRef(false)
+
+  // Handle initial load
+  useEffect(() => {
+    if (!initialLoadRef.current) {
+      initialLoadRef.current = true
+      const newParams = history.location.search + history.location.hash
+      if (newParams) {
+        dispatch({
+          type: "BUILD_PROG_FROM_CODE",
+          payload: newParams
+        })
+        setRefresh(prev => prev + 1)
+      }
+    }
+  }, [dispatch, history.location])
+
+  // Handle URL changes
+  useEffect(() => {
+    const currentCode = getProgressionCode(state)
+    const newParams = history.location.search + history.location.hash
+
+    if (!state.building && currentCode !== newParams) {
+      dispatch({
+        type: "BUILD_PROG_FROM_CODE",
+        payload: newParams
+      })
+      setRefresh(prev => prev + 1)
+    }
+  }, [history.location.search, history.location.hash, state.building, dispatch])
+
+  const renderChordPianoSet = () => {
+    return state.chordPianoSet?.map((chordPiano) => (
+      <div key={`wrapper-${chordPiano.id}-${refresh}`}>
+        <ChordPianoComponent
+          id={`piano-${chordPiano.id}`}
+          pianoComponentId={Number(chordPiano.id)}
+          forceUpdate={refresh}
+          history={history}
+        />
+        <div className="pianoStrip" />
+      </div>
+    ))
+  }
+
+  return (
+    <div className="pianoBoard">
+      {state.chordPianoSet?.length ? (
+        <> 
+          {renderChordPianoSet()}   
+          <div className="pianoBoardGutter" />
+        </>
+      ) : (
+        <div className="introBody">
+          <div className="introText">
+            welcome to chord buildr<br/>
+            use the controls above to get started
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}