feat: quick add time

2019-04-15 11:53:08 -06:00
parent 9ee52689ff
commit 691ba0865f
10 changed files with 150 additions and 91 deletions
--- a/src/components/Icon/Icon.js
+++ b/src/components/Icon/Icon.js
@@ -8,6 +8,7 @@ import {
  ChevronLeft,
  ChevronRight,
  Circle,
+  Clock,
  Edit2,
  LogIn,
  Moon,
@@ -37,9 +38,9 @@ const IconBase = styled.div`
  }
 `

-const Icon = ({ name, tabindex, label, ...rest }) => (
+const Icon = ({ name, tabindex, label, labelRight, ...rest }) => (
  <IconBase tabIndex={tabindex} {...rest}>
-    {label && (
+    {label && !labelRight && (
      <span style={{ margin: "3px -3px 3px 3px", fontWeight: 700 }}>
        {label}
      </span>
@@ -51,12 +52,23 @@ const Icon = ({ name, tabindex, label, ...rest }) => (
    {name === "ChevronLeft" && <ChevronLeft />}
    {name === "ChevronRight" && <ChevronRight />}
    {name === "Circle" && <Circle />}
+    {name === "Clock" && <Clock />}
    {name === "Edit2" && <Edit2 />}
    {name === "LogIn" && <LogIn />}
    {name === "Moon" && <Moon />}
    {name === "Search" && <Search />}
    {name === "Sun" && <Sun />}
    {name === "User" && <User />}
+    {label && labelRight && (
+      <span
+        style={{
+          margin: "3px -3px 3px 3px",
+          fontWeight: 700,
+        }}
+      >
+        {label}
+      </span>
+    )}
  </IconBase>
 )

--- a/src/components/Logo/index.js
+++ b/src/components/Logo/index.js
@@ -3,9 +3,9 @@ import React from "react"
 const Logo = ({ color }) => {
  return (
    <svg
-      width="40"
-      height="40"
-      viewBox="0 0 40 40"
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
@@ -13,113 +13,113 @@ const Logo = ({ color }) => {
        <path
          fillRule="evenodd"
          clipRule="evenodd"
-          d="M20.0748 5.81108C12.1972 5.81108 5.81108 12.1972 5.81108 20.0748C5.81108 27.9524 12.1972 34.3385 20.0748 34.3385C27.9524 34.3385 34.3385 27.9524 34.3385 20.0748C34.3385 12.1972 27.9524 5.81108 20.0748 5.81108ZM20.0748 8.60185C17.0981 8.60185 14.6174 13.7385 14.6174 20.0748C14.6174 26.4112 17.2841 31.5478 20.0748 31.5478C26.4112 31.5478 31.5478 26.4112 31.5478 20.0748C31.5478 13.7385 26.4112 8.60185 20.0748 8.60185Z"
+          d="M15.0546 4.63124C9.29788 4.63124 4.63112 9.29801 4.63112 15.0548C4.63112 20.8115 9.29789 25.4783 15.0546 25.4783C20.8114 25.4783 25.4781 20.8115 25.4781 15.0548C25.4781 9.29801 20.8114 4.63124 15.0546 4.63124ZM15.0548 6.67064C12.8794 6.67064 11.0666 10.4243 11.0666 15.0548C11.0666 19.6852 13.0154 23.4389 15.0548 23.4389C19.6852 23.4389 23.4389 19.6852 23.4389 15.0548C23.4389 10.4243 19.6852 6.67064 15.0548 6.67064Z"
          fill={color}
        />
-        <circle cx="2.47249" cy="20" r="2.33699" fill={color} />
-        <circle cx="37.5274" cy="20" r="2.33699" fill={color} />
+        <circle cx="2.19157" cy="15.0001" r="1.70781" fill={color} />
+        <circle cx="27.8086" cy="15.0001" r="1.70781" fill={color} />
        <circle
-          cx="20"
-          cy="2.47261"
-          r="2.33699"
-          transform="rotate(90 20 2.47261)"
+          cx="15.0001"
+          cy="2.19157"
+          r="1.70781"
+          transform="rotate(90 15.0001 2.19157)"
          fill={color}
        />
        <circle
-          cx="20"
-          cy="37.5274"
-          r="2.33699"
-          transform="rotate(90 20 37.5274)"
+          cx="15.0001"
+          cy="27.8086"
+          r="1.70781"
+          transform="rotate(90 15.0001 27.8086)"
          fill={color}
        />
        <circle
-          cx="7.60615"
-          cy="32.3938"
-          r="2.33699"
-          transform="rotate(-45 7.60615 32.3938)"
+          cx="5.94291"
+          cy="24.0571"
+          r="1.70781"
+          transform="rotate(-45 5.94291 24.0571)"
          fill={color}
        />
        <circle
-          cx="32.3936"
-          cy="7.6062"
-          r="2.33699"
-          transform="rotate(-45 32.3936 7.6062)"
+          cx="24.0569"
+          cy="5.94305"
+          r="1.70781"
+          transform="rotate(-45 24.0569 5.94305)"
          fill={color}
        />
        <circle
-          cx="7.6062"
-          cy="7.60622"
-          r="2.33699"
-          transform="rotate(45 7.6062 7.60622)"
+          cx="5.94312"
+          cy="5.9431"
+          r="1.70781"
+          transform="rotate(45 5.94312 5.9431)"
          fill={color}
        />
        <circle
-          cx="32.3938"
-          cy="32.3938"
-          r="2.33699"
-          transform="rotate(45 32.3938 32.3938)"
+          cx="24.057"
+          cy="24.0572"
+          r="1.70781"
+          transform="rotate(45 24.057 24.0572)"
          fill={color}
        />
        <circle
-          cx="3.83556"
-          cy="26.7768"
-          r="2.33699"
-          transform="rotate(-22.7457 3.83556 26.7768)"
+          cx="3.18757"
+          cy="19.9524"
+          r="1.70781"
+          transform="rotate(-22.7457 3.18757 19.9524)"
          fill={color}
        />
        <circle
-          cx="36.1642"
-          cy="13.2232"
-          r="2.33699"
-          transform="rotate(-22.7457 36.1642 13.2232)"
+          cx="26.8123"
+          cy="10.0478"
+          r="1.70781"
+          transform="rotate(-22.7457 26.8123 10.0478)"
          fill={color}
        />
        <circle
-          cx="13.2231"
-          cy="3.83568"
-          r="2.33699"
-          transform="rotate(67.2543 13.2231 3.83568)"
+          cx="10.0477"
+          cy="3.18769"
+          r="1.70781"
+          transform="rotate(67.2543 10.0477 3.18769)"
          fill={color}
        />
        <circle
-          cx="26.7768"
-          cy="36.1644"
-          r="2.33699"
-          transform="rotate(67.2543 26.7768 36.1644)"
+          cx="19.9523"
+          cy="26.8125"
+          r="1.70781"
+          transform="rotate(67.2543 19.9523 26.8125)"
          fill={color}
        />
        <circle
-          cx="13.3619"
-          cy="36.2218"
-          r="2.33699"
-          transform="rotate(-67.7457 13.3619 36.2218)"
+          cx="10.1491"
+          cy="26.8546"
+          r="1.70781"
+          transform="rotate(-67.7457 10.1491 26.8546)"
          fill={color}
        />
        <circle
-          cx="26.6379"
-          cy="3.77818"
-          r="2.33699"
-          transform="rotate(-67.7457 26.6379 3.77818)"
+          cx="19.8509"
+          cy="3.14565"
+          r="1.70781"
+          transform="rotate(-67.7457 19.8509 3.14565)"
          fill={color}
        />
        <circle
-          cx="3.7781"
-          cy="13.3621"
-          r="2.33699"
-          transform="rotate(22.2543 3.7781 13.3621)"
+          cx="3.14561"
+          cy="10.1493"
+          r="1.70781"
+          transform="rotate(22.2543 3.14561 10.1493)"
          fill={color}
        />
        <circle
-          cx="36.2218"
-          cy="26.6379"
-          r="2.33699"
-          transform="rotate(22.2543 36.2218 26.6379)"
+          cx="26.8546"
+          cy="19.851"
+          r="1.70781"
+          transform="rotate(22.2543 26.8546 19.851)"
          fill={color}
        />
      </g>
      <defs>
        <clipPath id="clip0">
-          <rect width="40" height="40" fill="white" />
+          <rect width="30" height="30" fill="white" />
        </clipPath>
      </defs>
    </svg>
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -45,6 +45,9 @@ const LogoSection = styled.div`
 const LogoText = styled.span`
  color: ${props => props.color};
  margin-left: 5px;
+  @media (max-width: 400px) {
+    display: none;
+  }
 `
 const NavIcons = styled.div`
  display: flex;
--- a/src/components/screens/Day/Day.js
+++ b/src/components/screens/Day/Day.js
@@ -13,6 +13,7 @@ import { BeatLoader } from "react-spinners"
 import { SIZES } from "../../../styles/constants"

 import Seek from "../../Seek"
+import Icon from "../../Icon"

 const JournalHeading = styled.h2`
  font-weight: 700;
@@ -48,6 +49,11 @@ const JournalEntryArea = styled.textarea`
      0 0 0 10px ${props => props.theme.colors.hover};
  }
 `
+const Buttons = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: 20px;
+`
 const fadeKeyFrames = keyframes`
  from {
    opacity: 0;
@@ -133,6 +139,20 @@ class Day extends React.Component {
    }, AUTOSAVE_DELAY)
  }

+  onInsertTime = () => {
+    const entryTextArea = document.getElementById("entry-text-area")
+    const cursorIndex = entryTextArea.selectionStart
+    const { text } = this.state
+    const insertAt = (str, sub, pos) =>
+      `${str.slice(0, pos)}${sub}${str.slice(pos)}`
+    const newText = insertAt(text, format(new Date(), "h:mma "), cursorIndex)
+    this.setState({
+      text: newText,
+    })
+    entryTextArea.focus()
+    this.saveText(newText)
+  }
+
  saveText = text => {
    const {
      match: {
@@ -172,7 +192,7 @@ class Day extends React.Component {
    return (
      <>
        <Seek
-          title={format(currentDay, "YYYY MMM DD")}
+          title={format(currentDay, "YYYY MMM DD - dddd")}
          prev={format(subDays(currentDay, 1), "/YYYY/MM/DD")}
          next={format(addDays(currentDay, 1), "/YYYY/MM/DD")}
          disableNext={isAfter(currentDay, startOfYesterday())}
@@ -190,14 +210,25 @@ class Day extends React.Component {
            />
          </div>
        ) : (
-          <JournalEntryArea
-            placeholder="Start writing..."
-            onChange={e => this.onChangeText(e)}
-            value={text}
-            css={css`
-              animation: ${fadeKeyFrames} 0.2s ease-in;
-            `}
-          />
+          <>
+            <JournalEntryArea
+              id="entry-text-area"
+              placeholder="Start writing..."
+              onChange={e => this.onChangeText(e)}
+              value={text}
+              css={css`
+                animation: ${fadeKeyFrames} 0.2s ease-in;
+              `}
+            />
+            <Buttons>
+              <Icon
+                name="Clock"
+                label="Quick Add Time"
+                labelRight
+                onClick={() => this.onInsertTime()}
+              />{" "}
+            </Buttons>
+          </>
        )}
      </>
    )
--- a/src/components/screens/Search/Search.js
+++ b/src/components/screens/Search/Search.js
@@ -85,7 +85,7 @@ class Search extends Component {
      .collection("entries")
      .where("userId", "==", authUser.uid)
      .get()
-    const entries = entriesRef.docs.map(doc => doc.data())
+    const entries = entriesRef.docs.map(doc => doc.data()).reverse()
    // const sortedEntries = entries.sort((a, b) => {
    //   return (
    //     new Date(b.year, b.month - 1, b.day) -
--- a/src/components/screens/Start/Start.js
+++ b/src/components/screens/Start/Start.js
@@ -23,12 +23,15 @@ class Start extends Component {
      <StartGrid>
        <div style={{ margin: 10 }}>
          Use your journal as a place to record thoughts and events from the
-          day. Your journal works offline and from any device. You can add it to
-          your homescreen for faster access and write from a mobile device or
-          type up your entries from your computer.
+          day.
+        </div>
+        <div style={{ margin: 10 }}>
+          Your journal works offline and from any device. You can add it to your
+          homescreen for faster access and write from a mobile device or type up
+          your entries from your computer.
        </div>
        <Link to={todayUrl()} style={{ textDecoration: "none" }}>
-          <Button colors={theme.colors}>Begin Writing</Button>
+          <Button colors={theme.colors}>Write Today</Button>
        </Link>
      </StartGrid>
    )