Order Actions by Index; #55

BCIT-SSD-2020-21 · Apr 16, 2021 · d308cbd · d308cbd
1 parent ea7becc
commit d308cbd
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/src/components/atoms/Action.js b/src/components/atoms/Action.js
@@ -69,7 +69,7 @@ export default function SessionAction({action, authUser, dataUser}) {
                 <TextField className={classes.actionTitle} disabled={!actionEditMode} id="Name" label="name" value={name} onChange={(e) => setName(e.target.value)} />
                 <TextField className={classes.notes} disabled={!actionEditMode} id="notes" label="Notes" value={notes} onChange={(e) => setNotes(e.target.value)} multiline />
             </Box>
-            <Box className={classes.actionData}>
+            <Box className={classes.targetData}>
                 <Typography>{'target'}</Typography>
                 <TextField className={classes.qtyTarget} disabled={!actionEditMode} id="qtyTarget" label={action.qtyType} value={qtyTarget} onChange={(e) => setQtyTarget(e.target.value)} />
                 <TextField className={classes.stressTarget} disabled={!actionEditMode} id="stressTarget" label={action.stressType} value={stressTarget} onChange={(e) => setStressTarget(e.target.value)} />

diff --git a/src/components/forms/NewActionForm.js b/src/components/forms/NewActionForm.js
@@ -41,7 +41,7 @@ export default function NewActionForm({ dataUser, action, sessionId, toggleAddAc
             stressType: stressType,
             timestamp: Date.now()
         }
-        console.log(data)
+        console.log("data added:", data)
         actionsRef
             .add(data).then(docRef => {
                 actionsRef.doc(docRef.id).update({
@@ -80,7 +80,7 @@ export default function NewActionForm({ dataUser, action, sessionId, toggleAddAc
             <Box className={classes.actionButtons}>
                 {/* Coach Only */}
                 <Typography>{'New Set'}</Typography>
-                <TextField className={classes.orderIndex} id="orderIndex" label="order index" value={orderIndex} onChange={(e) => setOrderIndex(e.target.value)} />
+                <TextField className={classes.orderIndex} id="orderIndex" label="order index" value={orderIndex > 0 ? orderIndex : 0} onChange={(e) => setOrderIndex(parseInt(e.target.value))} />
                 <Button className={classes.buttonPrimary} onClick={(e) => saveAction(e)} >SAVE</Button>
             </Box>
         </Card>

diff --git a/src/containers/SessionDetails.js b/src/containers/SessionDetails.js
@@ -6,41 +6,22 @@ import { sessionDetailStyles } from '../styles/sessionStyles';
 import firebase from '../firebase/config';
 
 
-export default function SessionDetails({authUser, dataUser, session, exitSession, cancelSession}) {
+export default function SessionDetails({authUser, dataUser, session, exitSession, cancelSession, changeTab}) {
     const classes = sessionDetailStyles();
 
     // Initialize - GET Session Actions 
     const usersRef = firebase.firestore().collection('users');
     const actionsRef = firebase.firestore().collection('actions')
     const sessionsRef = firebase.firestore().collection('sessions');
 
-    const [actions, setActions] = useState([])
-    useEffect(() => {
-        actionsRef
-            .where("sessionId", "==", session.id)
-            .orderBy("orderIndex")
-            .onSnapshot(
-                querySnapshot => {
-                    const sessionActions = []
-                    querySnapshot.forEach(doc => {
-                        sessionActions.push(doc.data())
-                    })
-                    setActions(sessionActions)
-                },
-                error => {
-                    console.log(error)
-                }
-            )
-    }, [session])
-
     // Session Functions 
     const [sessionInProgress, setSessionInProgress] = useState(session.status)
     const startSession = () => {
         setSessionInProgress(true)
         // 
         console.log("startSession clicked")
     }
-    const publishSession = () => {
+    const publishSession = (e) => {
         // update Session status to 'upcoming'
         sessionsRef.doc(session.id).update({
             status: 'upcoming',
@@ -52,7 +33,7 @@ export default function SessionDetails({authUser, dataUser, session, exitSession
         // update participant's sessions array
         usersRef.doc(session.participantUserId).update({
             sessions: firebase.firestore.FieldValue.arrayUnion(session.id),
-        })
+        }).then(() => changeTab(e, 0))
     }
     const completeSession = () => {
         setSessionInProgress(false)
@@ -65,8 +46,27 @@ export default function SessionDetails({authUser, dataUser, session, exitSession
     const toggleAddAction = () => {
         setAddingAction(!addingAction)
     }
+    const [actions, setActions] = useState([])
+    useEffect(() => {
+        actionsRef
+            .where("sessionId", "==", session.id)
+            .orderBy("orderIndex")
+            .onSnapshot(
+                querySnapshot => {
+                    const sessionActions = []
+                    querySnapshot.forEach(doc => {
+                        sessionActions.push(doc.data())
+                    })
+                    setActions(sessionActions)
+                },
+                error => {
+                    console.log(error)
+                }
+            )
+    }, [addingAction])
 
-    console.log('SessionDetails, session: ', actions[actions.length-1])
+    console.log("actions", actions)
+    // console.log('SessionDetails, session: ', actions[actions.length-1])
     return (
         <Paper className={classes.sessionContainer}>
             {/* Session Info */}
@@ -76,11 +76,10 @@ export default function SessionDetails({authUser, dataUser, session, exitSession
                     <Typography>{'Coach: ' + session.coachUsername}</Typography>
                     <Typography>{'Participant: ' + session.participantUsername}</Typography> 
                     <Typography>{session.notes}</Typography>
-
                 </Box>
 
                 <Box className={classes.sessionButtons}>
-                    <Button className={classes.buttonPrimary} onClick={() => publishSession()}>Publish Session</Button>
+                    {session.status === "draft" && <Button className={classes.buttonPrimary} onClick={(e) => publishSession(e)}>Publish Session</Button>}
                     <Button className={classes.buttonPrimary} onClick={() => startSession()}>Start Session</Button>
                 </Box>
 

diff --git a/src/styles/sessionStyles.js b/src/styles/sessionStyles.js
@@ -176,13 +176,20 @@ const sessionActionStyles = makeStyles(() => ({
     actionTitle: {
         textAlign: 'center',
     },
-    actionData: {
+    targetData: {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
         // alignItems: 'center',
         width: '20%',
     },
+    actionData: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        // alignItems: 'center',
+        width: '30%',
+    },
     actionButtons: {
         display: 'flex',
         flexDirection: 'column',