Only show "show closed" checkbox if open hours exist

Closes #3.
Also fixes an issue that caused the center map button to not be disabled when no user position was available.

assets/js/components/ButterflyMap.js

@@ -62,6 +62,7 @@ export const ButterflyMap = (props) => {
     const [centerMapDisabled, setCenterMapDisabled] = React.useState(true);
     const [paginationPage, setPaginationPage] = React.useState(1);
     const [hideMap, setHideMap] = React.useState(false);
+    const [hoursSet, setHoursSet] = React.useState(false);
 
     const [viewport, setViewport] = React.useState({
         ...props.center,
@@ -281,6 +282,7 @@ export const ButterflyMap = (props) => {
             setReduceMotion={setReduceMotion}
             hideMap={hideMap}
             setHideMap={setHideMap}
+            hoursSet={hoursSet}
         />
         {!hideMap && <>
             <ReactMapGL {...viewport}
@@ -289,8 +291,9 @@ export const ButterflyMap = (props) => {
                 <Markers doMapMove={doMapMove} displayPointTypes={displayPointTypes}/>
                 <AttributionControl compact={true}/>
             </ReactMapGL>
-            <CenterMapButton
-                onClick={handleCenterMapClick}>{props.localStrings?.centerMap ?? 'Center map on current location'}</CenterMapButton>
+            <CenterMapButton disabled={centerMapDisabled} onClick={handleCenterMapClick}>
+                {props.localStrings?.centerMap ?? 'Center map on current location'}
+            </CenterMapButton>
         </>}
         {typeOptions.length > 0 &&
         <PointBar pointTypes={displayPointTypes}
@@ -300,6 +303,7 @@ export const ButterflyMap = (props) => {
                   localStrings={props.localStrings}
                   page={paginationPage}
                   setPage={setPaginationPage}
+                  setHoursSet={setHoursSet}
         />}
     </ThemeProvider>;
 };

assets/js/components/ControlBar.js

@@ -253,6 +253,7 @@ const ControlBar = (props) => {
         setReduceMotion,
         hideMap,
         setHideMap,
+        hoursSet
     } = props;
 
     return <BarContainer>
@@ -267,14 +268,14 @@ const ControlBar = (props) => {
                             {localStrings?.showAll ?? 'Show all'}
                         </label>
                     </li>
-                    <li>
+                    {hoursSet && <li>
                         <label>
                             <ControlCheck type="checkbox"
                                           onChange={handleShowClosedRightNowClick}
                                           checked={showClosedRightNow}/>
                             {localStrings?.closedRightNow ?? 'Closed right now'}
                         </label>
-                    </li>
+                    </li>}
                     {options.map((option, index) => {
                             return <li key={index}>
                                 <label>
@@ -322,6 +323,7 @@ ControlBar.propTypes = {
     setReduceMotion: PropTypes.func.isRequired,
     hideMap: PropTypes.bool.isRequired,
     setHideMap: PropTypes.func.isRequired,
+    hoursSet: PropTypes.bool.isRequired,
     localStrings: PropTypes.shape(localStringsPropTypes),
     searchBackend: PropTypes.string,
 };

assets/js/components/PointBar.js

@@ -66,6 +66,7 @@ const PointBar = (props) => {
                     key={index}
                     selected={page === 1 && index === 0}
                     handleSidebarMarkerClick={handleSidebarMarkerClick}
+                    setHoursSet={props.setHoursSet}
                     userPosition={props.userPosition}
                     localStrings={props.localStrings}
                 />,
@@ -87,6 +88,7 @@ PointBar.propTypes = {
     position: PropTypes.shape({latitude: PropTypes.number, longitude: PropTypes.number}).isRequired,
     page: PropTypes.number.isRequired,
     setPage: PropTypes.func.isRequired,
+    setHoursSet: PropTypes.func.isRequired,
     userPosition: PropTypes.shape({latitude: PropTypes.number, longitude: PropTypes.number}),
     localStrings: PropTypes.shape(localStringsPropTypes),
 };

assets/js/components/PointCard.js

@@ -23,10 +23,17 @@ const SmallLink = styled(Link)`
   font-size: 0.8rem !important;
 `;
 
-const checkPointHours = (pointHours) => {
+const checkPointHours = (point, setHoursSet) => {
+    if (point.hasHours) {
+        return true;
+    }
+
+    const pointHours = point.hours;
     if (pointHours) {
         for (const index of weekdays) {
             if (pointHours[index]) {
+                setHoursSet(true);
+                point.hasHours = true;
                 return true;
             }
         }
@@ -35,7 +42,7 @@ const checkPointHours = (pointHours) => {
 };
 
 const PointCard = (props) => {
-    const {point, handleSidebarMarkerClick, selected} = props;
+    const {point, handleSidebarMarkerClick, selected, setHoursSet} = props;
 
     return <Card selected={selected}>
         <CardContent selected={selected}>
@@ -51,7 +58,8 @@ const PointCard = (props) => {
                 {props.localStrings?.directions ?? 'Directions (Google Maps)'}
             </SmallLink>
             <TypeText>{point.type}</TypeText>
-            {checkPointHours(point.hours) && <OpenHours hours={point.hours} until={point.valid?.until} localStrings={props.localStrings}/>}
+            {checkPointHours(point, setHoursSet) &&
+            <OpenHours hours={point.hours} until={point.valid?.until} localStrings={props.localStrings}/>}
         </CardContent>
     </Card>;
 };
@@ -60,6 +68,7 @@ PointCard.propTypes = {
     point: PropTypes.object.isRequired, // TODO: shape
     selected: PropTypes.bool.isRequired,
     handleSidebarMarkerClick: PropTypes.func.isRequired,
+    setHoursSet: PropTypes.func.isRequired,
     userPosition: PropTypes.object, // TODO: shape
     localStrings: PropTypes.shape(localStringsPropTypes),
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-butterfly-map",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "license": "MIT",
   "private": false,
   "main": "dist/react-butterfly-map.min.js",