Schedule Refactor (#60)

* log tidy * schedule tidy * update stylish * fix variable name * button! * error message to file upload, theme button * add empty files check, remove console .ogs * update control svgs
dmamills · Jun 29, 2022 · f85c81c · f85c81c
1 parent 3e66627
commit f85c81c
Show file tree

Hide file tree

Showing 21 changed files with 187 additions and 120 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@dmamills/stylish": "^1.2.2",
+    "@dmamills/stylish": "^1.4.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "classnames": "^2.2.6",

diff --git a/client/src/StreamPlayer/Controls.js b/client/src/StreamPlayer/Controls.js
@@ -2,29 +2,16 @@ import React from 'react';
 import stylish from '@dmamills/stylish';
 import cn from 'classnames';
 import Volume from './Volume';
-import { flex, p1, spaceBetween, alignItemsCenter } from '../styles';
+import { flex, p1, spaceBetween, alignItemsCenter, mr1 } from '../styles';
 
-const [btn, container, fullScreenBtn, svgIcon]  = stylish({
-  backgroundColor: 'rgba(0,0,0,0)',
-  border:'0',
-  minHeight: '40px',
-  margin: '0.5rem',
-  padding: '0 2rem',
-  borderRadius: '0.5rem',
-  color: '#FFF',
-  fontSize: '2.5rem',
-  transition: 'color 0.6s',
-  cursor: 'pointer',
-  ':hover': {
-    color: '#C8C8C8'
-  }
-}, {
+const [container, fullScreenBtn, svgIcon]  = stylish({
   backgroundColor: 'rgba(211,211,211, 0.2)'
 }, {
   border: 'none',
   background: 'none',
   cursor: 'pointer',
 }, {
+  width: '30px',
   transition: 'all 0.6s',
   stroke: 'white',
   fill: 'white',
@@ -37,16 +24,28 @@ const [btn, container, fullScreenBtn, svgIcon]  = stylish({
 const FullScreenButton = ({ onFullScreen }) => {
   return (
     <button className={fullScreenBtn} onClick={onFullScreen}>
-      <svg className={svgIcon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <path d="M24 9h-4v-5h-5v-4h9v9zm-9 15v-4h5v-5h4v9h-9zm-15-9h4v5h5v4h-9v-9zm9-15v4h-5v5h-4v-9h9z"/>
+      <svg className={svgIcon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 01-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 112 0v1.586l2.293-2.293a1 1 0 011.414 1.414L6.414 15H8a1 1 0 110 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 110-2h1.586l-2.293-2.293a1 1 0 011.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
       </svg>
     </button>
   );
 }
 
+const PlaySvg = () => {
+  return <svg className={svgIcon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+</svg>
+}
+
+const StopSvg = () => {
+  return <svg className={svgIcon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd" />
+  </svg>;
+}
+
 const Controls = ({ onPlay, onStop, onVolumeChange, onFullScreen, playing }) => {
-  const button = playing ? <button className={btn} onClick={onStop}>■</button>
-                         : <button className={btn} onClick={onPlay}>▶</button>;
+  const button = playing ? <button className={cn(fullScreenBtn, mr1)} onClick={onStop}><StopSvg /></button>
+                         : <button className={cn(fullScreenBtn, mr1)} onClick={onPlay}><PlaySvg /></button>;
   return (
     <div className={cn(flex, p1, spaceBetween, container)}>
       <div className={cn(flex, alignItemsCenter)}>

diff --git a/client/src/admin/Library/AudioUpload/index.js b/client/src/admin/Library/AudioUpload/index.js
@@ -15,6 +15,7 @@ class AudioUpload extends Component {
     isUploading: false,
     fileCount: 0,
     folderName: '',
+    error: null,
   }
 
   componentDidMount() {
@@ -71,12 +72,13 @@ class AudioUpload extends Component {
   }
 
   onError = error => {
-    console.log('error', error);
+    const message = JSON.parse(error.xhr.response).error
+    this.setState({ isUploading: false, error: message });
   }
 
   onUpload = () => {
     this.dropzone.processQueue();
-    this.setState({ isUploading: true });
+    this.setState({ isUploading: true, error: null });
   }
 
   onClear = () => {
@@ -89,7 +91,7 @@ class AudioUpload extends Component {
   }
 
   render() {
-    const { isUploading, fileCount, folderName } = this.state;
+    const { isUploading, fileCount, folderName, error } = this.state;
     const hasNoFiles = fileCount === 0;
     return (
       <div className={cn(p1)}>
@@ -115,6 +117,7 @@ class AudioUpload extends Component {
         </div>
 
         {isUploading && <div>CURRENTLY UPLOADING</div>}
+        {error && <div>Error: {error}</div>}
         <div id="dropzoneEl" className={cn(p1, dropzoneStyles, { flex: hasNoFiles }, { flexCenter: hasNoFiles })}>
           {(hasNoFiles) && <span>Drop files, or click here</span>}
         </div>

diff --git a/client/src/admin/News/index.js b/client/src/admin/News/index.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import stylish from '@dmamills/stylish';
 
-import { flex, flex1,  p1, ph1, alignSelfStart, column, spaceBetween, heavyText,alignItemsCenter, p05, flex2, ml1, pt05 } from '../../styles';
+import { flex, flex1,  p1, ph1, alignSelfStart, column, spaceBetween, heavyText,alignItemsCenter, p05, flex2, ml1 } from '../../styles';
 import { deleteNews, getNews, postNews } from '../api';
 import NewsBox from './NewsBox';
 

diff --git a/client/src/admin/Scheduling/EditSchedule.js b/client/src/admin/Scheduling/EditSchedule.js
@@ -11,25 +11,31 @@ import { flex, spaceBetween, p05, flex2, ml1, justifyEnd, textAreaHeight } from
 import Label from './Label';
 import Preview from './Preview';
 import Schedule from './Schedule';
+import Button from '../components/Button';
 
 const EditSchedule = (props) => {
   const [schedule, setSchedule] = useState(null);
 
   useEffect(() => {
-    if(props.schedule) {
-      let scheduleModel = new Schedule({...props.schedule});
-      scheduleModel.toDropdown().then(songs => {
-        scheduleModel.dropdown = songs;
-        setSchedule(scheduleModel);
-      })
-      .catch((err) => {
-        console.log(err);
-        alert('Something is wrong with this schedule. Aborting!');
-        props.back();
-      });
-    } else {
-      setSchedule(Schedule.defaultSchedule());
+    const fetchSchedule = async () => {
+      if(props.schedule) {
+        let scheduleModel = new Schedule({...props.schedule});
+        try {
+        const songs = await scheduleModel.toDropdown();
+          scheduleModel.dropdown = songs;
+          setSchedule(scheduleModel);
+
+        } catch(err) {
+          console.log(err);
+          alert('Something is wrong with this schedule. Aborting!');
+          props.back();
+        }
+      } else {
+        setSchedule(Schedule.defaultSchedule());
+      }
     }
+
+    fetchSchedule();
   }, [props.schedule]);
 
   const onChange = (field) => {
@@ -45,13 +51,14 @@ const EditSchedule = (props) => {
       setSchedule(new Schedule(updatedSchedule));
   }
 
-  const onSubmit = () => {
+  const onSubmit = async () => {
     if(!schedule.isValid()) return;
-    schedule.submit().then(() => {
+    try {
+      await schedule.submit();
       props.back();
-    }).catch(error => {
-      console.log('error', error);
-    });
+    } catch (err) {
+      console.log('error', err);
+    }
   }
 
   const fetchLibrary = input => {
@@ -140,7 +147,11 @@ const EditSchedule = (props) => {
         </Label>
 
         <div className={cn(flex, spaceBetween, justifyEnd, p05)}>
-          <button disabled={!schedule.isValid()} onClick={onSubmit}>Submit</button>
+          <Button
+            disabled={!schedule.isValid()}
+            onClick={onSubmit}
+            text="Submit"
+          />
         </div>
       </div>
     </div>

diff --git a/client/src/admin/Scheduling/NoScheduleBlocks.js b/client/src/admin/Scheduling/NoScheduleBlocks.js
@@ -1,25 +1,22 @@
 import React from 'react';
 import stylish from '@dmamills/stylish';
-
-import { width50px } from '../../styles';
+import cn from 'classnames';
+import { flex, column, pv05 } from '../../styles';
 
 const blockStyles = stylish({
-  height: '50px',
-  alignItems: 'center',
-  justifyContent: 'center',
   border: '1px solid black',
   margin: '0.5rem',
-  padding: '1rem',
-  display: 'flex',
-  flexDirection: 'column',
+  padding: '1rem'
 });
 
 const NoScheduleBlocks = () => {
   return (
     <div>
       <div className={blockStyles}>
+        <div className={cn(flex, column)}>
         <strong>No Scheduling Today</strong>
-        <span className={width50px}>random tunes 24hours straight!</span>
+        <span className={pv05}>random tunes!</span>
+        </div>
       </div>
     </div>
   );

diff --git a/client/src/admin/Scheduling/Preview/Runtime.js b/client/src/admin/Scheduling/Preview/Runtime.js
@@ -2,6 +2,13 @@ import React from 'react';
 
 import { humanDurationOfPlaylist } from '../../../utils';
 
-const Runtime = ({ playlist, isShuffle = false }) => <p>It will run for <strong>{humanDurationOfPlaylist(playlist)}</strong> {isShuffle? 'shuffling' : 'playing'} <strong>{playlist.length}</strong> songs.</p>
+const Runtime = ({ playlist, isShuffle = false }) => {
+  return (
+    <>
+      <p>Duration: <strong>{humanDurationOfPlaylist(playlist)}</strong> {isShuffle? 'shuffling' : 'playing'} </p>
+      <p>Length: <strong>{playlist.length}</strong> song{playlist.length > 1 ? 's':''}</p>
+    </>
+  );
+}
 
 export default Runtime;
diff --git a/client/src/admin/Scheduling/Preview/index.js b/client/src/admin/Scheduling/Preview/index.js
@@ -11,9 +11,9 @@ const Preview = ({ schedule }) => {
 
   return (
     <div>
-      <p>This schedule is scheduled to run every <strong>{dayOfWeek}</strong></p>
-      <p>Starting <strong>{startTime.format('dddd MMMM Do')}</strong></p>
-      <p>It will play from <strong>{startTime.format('hh:mm a')}</strong> until <strong>{endTime.format('hh:mm a')}</strong></p>
+      <p>This schedule will run every <strong>{dayOfWeek}</strong></p>
+      <p>Starting <strong>{startTime.format('MMMM Do')}</strong></p>
+      <p>Running from: <strong>{startTime.format('hh:mm a')}</strong> until <strong>{endTime.format('hh:mm a')}</strong></p>
       <Runtime playlist={schedule.dropdown} isShuffle={schedule.shuffle} />
     </div>
   );

diff --git a/client/src/admin/Scheduling/SingleBlock.js b/client/src/admin/Scheduling/SingleBlock.js
@@ -1,30 +1,37 @@
 import React from 'react';
 import moment from 'moment';
 import stylish from '@dmamills/stylish';
+import cn from 'classnames';
 
-import { pv05 } from '../../styles';
+import { p05, pv05, flex, column, ml1, cursorPointer } from '../../styles';
+import Button from '../components/Button';
 
 const blockStyles = stylish({
-  height: '50px',
-  alignItems: 'center',
-  justifyContent: 'center',
   border: '1px solid black',
   margin: '0.5rem',
   padding: '1rem',
-  display: 'flex',
-  flexDirection: 'column',
 });
 
 const SingleBlock = ({ schedule, onEdit, onDelete }) => {
   const start = moment(schedule.start_time).format('hh:mm a');
   const end = moment(schedule.start_time).add(schedule.length, 'h').format('hh:mm a');
   return (
     <div className={blockStyles}>
-      <strong >{schedule.name}</strong>
-      <span className={pv05}>{start} - {end}</span>
+      <div className={cn(flex, column)}>
+        <strong >{schedule.name}</strong>
+        <span className={pv05}>{start} - {end}</span>
+      </div>
       <div>
-        <button onClick={() => onEdit(schedule)}>Edit</button>
-        <button onClick={() => { onDelete(schedule)}}>Delete</button>
+        <Button
+          className={cn(cursorPointer, p05)}
+          onClick={() => onEdit(schedule)}
+          text="Edit"
+        />
+        <Button
+          className={cn(ml1, p05, cursorPointer)}
+          onClick={() => { onDelete(schedule)}}
+          text="Delete"
+        />
       </div>
     </div>
   );

diff --git a/client/src/admin/Scheduling/index.js b/client/src/admin/Scheduling/index.js
@@ -4,10 +4,11 @@ import moment from 'moment';
 
 import DayOfWeek from './DayOfWeek';
 import EditSchedule from './EditSchedule';
+import Button from '../components/Button';
 
 import { getSchedules, removeSchedule } from '../api';
 import { reduceByKey, DATE_FORMAT, DAYS_OF_WEEK } from '../../utils';
-import { p1, flex, column, spaceBetween, flexCenter, flexWrap } from '../../styles';
+import { ml1, p1, flex, column, spaceBetween, flexCenter, flexWrap } from '../../styles';
 
 const schedulesToDaysOfWeek = async () => {
   const schedules = await getSchedules();
@@ -55,14 +56,29 @@ const Scheduling = () => {
 
   useEffect(() => { fetchSchedules() }, [false]);
 
+  const editHandler = () => {
+    if(!showEdit) {
+      onEdit(null);
+    } else {
+      setShowEdit(false);
+    }
+  }
+
   return (
     <div className={cn(p1)}>
       <div className={cn(flex, column)}>
         <div className={cn(flex, spaceBetween, flexCenter)}>
         <h1>Scheduling</h1>
           <div>
-            <button onClick={() => { if(!showEdit) { onEdit(null);} else { setShowEdit(false);} }}>{showEdit ? 'Back': 'Create New Schedule'}</button>
-            <button onClick={() => { fetchSchedules(); }}>Refresh</button>
+            <Button
+              onClick={editHandler}
+              text={showEdit ? 'Back': 'Create New Schedule'}
+            />
+            <Button
+              onClick={() => { fetchSchedules(); }}
+              text="Refresh"
+              className={ml1}
+            />
           </div>
         </div>
         {showEdit ? <EditSchedule

diff --git a/client/src/admin/Stream/StreamControls.js b/client/src/admin/Stream/StreamControls.js
@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
 
 import StreamStat from './StreamStat';
+import Button from '../components/Button';
 import { getStreamStatus, postStartStream, postStopStream } from '../api';
+import { ml1 } from '../../styles';
 
 const StreamControls = () => {
   const [streamStatus, setStreamStatus] = useState(null);
@@ -35,8 +37,8 @@ const StreamControls = () => {
         <StreamStat label="Current Status" value={statusMessage} />
       </div>
       <div>
-        <button onClick={onStart}>Start</button>
-        <button onClick={onStop}>Stop</button>
+        <Button onClick={onStart} text="Start" />
+        <Button className={ml1} onClick={onStop} text="Stop" />
       </div>
     </>
   );