Add checks for daily activities

src/routes/Day.js

@@ -16,6 +16,7 @@ import { SIZES } from "styles/constants"
 
 import Seek from "components/Seek"
 import Icon from "components/Icon"
+import Checkbox from "components/Checkbox"
 import { resizeImage } from "../utils/file"
 
 const EntryHeading = styled.div`
@@ -76,8 +77,7 @@ const JournalEntryArea = styled(Editor)`
     background-color: transparent;
   }
   &::placeholder {
-    color: ${props => {
-      return props.theme.colors.tertiary}};
+    color: ${props => props.theme.colors.tertiary};
   }
   &:focus-within {
     box-shadow: 0 0 0 8px ${props => props.theme.colors.bodyBackground},
@@ -89,6 +89,7 @@ const Buttons = styled.div`
   flex-direction: row;
   margin-top: 20px;
 `
+
 const fadeKeyFrames = keyframes`
   from {
     opacity: 0;
@@ -101,6 +102,11 @@ const LoadingSpinner = styled(BeatLoader)`
   opacity: 0;
 `
 
+const Activities = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
 const AUTOSAVE_DELAY = 2000
 
 class Day extends React.Component {
@@ -110,6 +116,7 @@ class Day extends React.Component {
     saving: false,
     lastSavedAt: new Date(),
     lastEditedAt: new Date(),
+    activities: { },
   }
   timeout = 0
 
@@ -159,16 +166,16 @@ class Day extends React.Component {
       .then((doc) => {
         if (doc.data()) {
           console.log("I have data!", doc.data().text)
-          this.setState({ text: doc.data().text, loading: false })
+          this.setState({ text: doc.data().text, loading: false, activities: doc.data().activities })
         } else {
           console.log("I don't have data!")
-          this.setState({ text: "", loading: false })
+          this.setState({ text: "", loading: false, activities: { } })
         }
       })
       .catch((err) => {
         console.warn("entry not found in cache")
         // no doc was found, so reset the entry area to blank
-        this.setState({ loading: false, text: "" })
+        this.setState({ loading: false, text: "", activities: { } })
         // for cache first, server second fetching, dangerous with potential overwriting of data
         // docRef.get().then(doc => {
         //   if (doc.data()) {
@@ -244,14 +251,43 @@ class Day extends React.Component {
     });
   }
 
+  setActivityCheck = (activity, checked) => {
+    const { firebase, authUser, year, month, day } = this.props
+    this.setState({ activities: { [activity]: checked } });
+    firebase.db
+    .collection("entries")
+    .doc(`${year}${month}${day}-${authUser.uid}`)
+    .set(
+      {
+        activities: {
+          [activity]: checked,
+        }
+      },
+      {
+        merge: true,
+      }
+    );
+  }
+
   render() {
     const { year, month, day, theme } = this.props
     const online = this.context
-    const { text, loading, saving, lastSavedAt, lastEditedAt } = this.state
+    const { text, loading, saving, lastSavedAt, lastEditedAt, activities } = this.state
     const currentDay = new Date(year, month - 1, day)
     if (!currentDay) return
     const hasSavedChanges = lastSavedAt >= lastEditedAt
 
+    const activityChecks = ["physio", "yoga", "run", "piano"].map(activity =>
+      <Buttons
+        onClick={() => this.setActivityCheck(activity, !activities[activity])}
+      >
+        <Checkbox
+          checked={activities[activity]}
+          label={activity}
+        />{" "}
+      </Buttons>
+    );
+
     return (
       <>
         <Seek
@@ -260,6 +296,9 @@ class Day extends React.Component {
           next={format(addDays(currentDay, 1), "/YYYY/MM/DD")}
           disableNext={isAfter(currentDay, startOfYesterday())}
         />
+        <Activities>
+          {activityChecks}
+        </Activities>
         <EntryHeading>
           <JournalHeading>Record thoughts about the day</JournalHeading>
           <EntryInfo>