Add checks for daily activities

src/components/Checkbox.js

@@ -0,0 +1,15 @@
+import React from "react"
+import Icon from "components/Icon"
+import { withTheme } from "@emotion/react"
+
+const Checkbox = ({ checked, name, tabindex, label, ...rest }) => (
+  <div tabIndex={tabindex} {...rest}>
+    <Icon
+      name={checked ? "Checked" : "Unchecked"}
+      label={label}
+      labelRight
+    />{" "}
+  </div>
+)
+
+export default withTheme(Checkbox)

src/components/Icon.js

@@ -20,6 +20,8 @@ import {
   Smartphone,
   Sun,
   User,
+  Square,
+  CheckSquare,
 } from "react-feather"
 import { withTheme } from "@emotion/react"
 
@@ -31,6 +33,7 @@ const IconBase = styled.div`
   border-radius: 12px;
   padding: 5px;
   transition: 0.1s all ease-in-out;
+  text-transform: capitalize;
   color: ${props => props.theme.colors.secondary};
   &:focus {
     outline: none;
@@ -69,6 +72,8 @@ const Icon = ({ name, tabindex, label, labelRight, size, ...rest }) => (
     {name === "Smartphone" && <Smartphone size={size} />}
     {name === "Sun" && <Sun size={size} />}
     {name === "User" && <User size={size} />}
+    {name === "Checked" && <CheckSquare size={size} />}
+    {name === "Unchecked" && <Square size={size} />}
     {label && labelRight && (
       <span
         style={{

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>