Merge pull request #9 from binary-butterfly/polishing

Polishing
binary-butterfly · Dec 21, 2021 · 2e33e0d · 2e33e0d
2 parents 544c926 + 091f289
commit 2e33e0d
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 29 deletions.
diff --git a/assets/js/Root.js b/assets/js/Root.js
@@ -8,7 +8,6 @@ import ExampleMarker2 from '../img/exampleMarker2.svg';
 import SpecialExampleMarker from '../img/specialExampleMarker.svg';
 
 const Main = styled.div`
-  box-sizing: border-box;
   width: 100%;
   height: 100%;
 `;
@@ -30,6 +29,7 @@ const Root = () => {
                             position: {latitude: 47.850670, longitude: 13.090983},
                             text: 'This is an example',
                             additionalInfo: 'Sportplatz',
+                            website: 'example.invalid.tld',
                             hours: {
                                 sunday: [{from: ['7', '0'], until: ['22', '0']}],
                                 monday: [{from: ['7', '0'], until: ['22', '0']}],
@@ -38,7 +38,6 @@ const Root = () => {
                                 thursday: [{from: ['7', '0'], until: ['22', '0']}],
                                 friday: [{from: ['7', '0'], until: ['22', '0']}],
                                 saturday: [{from: ['7', '0'], until: ['22', '0']}],
-
                             },
                         },
                         {
@@ -48,10 +47,10 @@ const Root = () => {
                             icon: SpecialExampleMarker,
                             hours: {
                                 sunday: false,
-                                monday: true,
+                                monday: false,
                                 tuesday: false,
-                                wednesday: [{from: ['9', '0'], until: ['23', '0']}],
-                                thursday: [{from: ['15', '0'], until: ['24', '0']}],
+                                wednesday: false,
+                                thursday: false,
                                 friday: false,
                                 saturday: false,
                             },

diff --git a/assets/js/components/ButterflyMap.js b/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>;
 };

diff --git a/assets/js/components/ControlBar.js b/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,
 };

diff --git a/assets/js/components/PointBar.js b/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),
 };

diff --git a/assets/js/components/PointCard.js b/assets/js/components/PointCard.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {weekdays} from '../data/helpers';
 import {localStringsPropTypes} from '../data/propTypes';
 import {Card, CardContent} from './Card';
 import OpenHours from './OpenHours';
@@ -14,30 +15,51 @@ const TypeText = styled.span`
 
 const Link = styled.a`
   display: block;
-  font-size: 1.2rem!important;
-`
+  font-size: 1.2rem !important;
+`;
+
+const SmallLink = styled(Link)`
+  line-height: 0.8rem;
+  font-size: 0.8rem !important;
+`;
 
-const SmallLink = styled.a`
-  font-size: 0.8rem!important;
-`
+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;
+            }
+        }
+    }
+    return false;
+};
 
 const PointCard = (props) => {
-    const {point, handleSidebarMarkerClick, selected} = props;
+    const {point, handleSidebarMarkerClick, selected, setHoursSet} = props;
 
     return <Card selected={selected}>
         <CardContent selected={selected}>
             <Link href={'#react-butterfly-map-pointer' + point.type + point.index}
-               onClick={(e) => handleSidebarMarkerClick(e, point)}>
+                  onClick={(e) => handleSidebarMarkerClick(e, point)}>
                 {point.text ? point.text : point.address}
             </Link>
             {!!point.address && !!point.text && <Small>{point.address}</Small>}
             {!!point.additionalInfo && <Small>{point.additionalInfo}</Small>}
             {!!point.website && <SmallLink href={point.website}>{props.localStrings?.website ?? 'Website'}</SmallLink>}
-            <SmallLink href={'https://google.com/maps/dir/' + ((props.userPosition !== null) ? props.userPosition.latitude + ',' + props.userPosition.longitude : ' ') + '/' + point.position.latitude + ',' + point.position.longitude}>
+            <SmallLink
+                href={'https://google.com/maps/dir/' + ((props.userPosition !== null) ? props.userPosition.latitude + ',' + props.userPosition.longitude : ' ') + '/' + point.position.latitude + ',' + point.position.longitude}>
                 {props.localStrings?.directions ?? 'Directions (Google Maps)'}
             </SmallLink>
             <TypeText>{point.type}</TypeText>
-            {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>;
 };
@@ -46,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),
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/rollup.config.js b/rollup.config.js
@@ -9,7 +9,6 @@ import svgr from '@svgr/rollup';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import {terser} from 'rollup-plugin-terser';
 
 const env = process.env.NODE_ENV;
@@ -42,12 +41,6 @@ const config = {
         }),
         commonjs({
             exclude: 'assets/**',
-            namedExports: {
-                'react': Object.keys(React),
-                'react-dom': Object.keys(ReactDOM),
-                'react-is': Object.keys(require('react-is')),
-                'prop-types': Object.keys(PropTypes),
-            },
         }),
         babel({
             'babelHelpers': 'runtime',
@@ -77,7 +70,10 @@ const config = {
             ],
         }),
         globals(),
-        replace({'process.env.NODE_ENV': JSON.stringify(env === 'production' ? 'production' : 'development')}),
+        replace({
+            'process.env.NODE_ENV': JSON.stringify(env === 'production' ? 'production' : 'development'),
+            'preventAssignment': true,
+        }),
     ],
 };