Merge branch 'develop'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "amber_web",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "private": true,
     "dependencies": {
         "@types/jest": "^24.X",

src/actions/auth.ts

@@ -7,7 +7,8 @@ import { AuthAction } from "../typings/actions";
 import { serializeAuthData } from "../helpers/api";
 import { SuccessAction, FailAction } from "../typings/api";
 
-const tokenHeader = "X-Auth-Token";
+const tokenHeader = "Authorization";
+const tokenPrefix = "Bearer";
 
 /**
  * Redux action creator. Performs an HTTP request, if it succeeds, copies
@@ -78,7 +79,7 @@ export const signup = (
  * @param token Auth token in plain text.
  */
 export const setToken = (token: string) => {
-    req.defaults.headers.common[tokenHeader] = token;
+    req.defaults.headers.common[tokenHeader] = `${tokenPrefix} ${token}`;
 };
 
 /**

src/const.ts

@@ -1,7 +1,7 @@
 export const baseURI: string =
     process.env.REACT_APP_APIURI || "https://amber.h.tdem.in/api/v0";
 
-export const appVersion: string = "0.1.0";
+export const appVersion: string = "0.1.1";
 export const appFullName: string = "Amber Web";
 export const appName: string = "amber_web";
 export const appAuthor: string = "Timur Demin";

src/helpers/datetime.ts

@@ -1,8 +1,16 @@
+import format from "date-fns/format";
+
 export const DateFormat = "yyyy-MM-dd";
 export const TimeFormat = "HH:mm";
 
 /**
- * Converts a JS date to epoch timestamp.
+ * Converts a JS date to epoch timestamp. Returns `0` on error.
  * @param date Date in JS `Date` class
  */
-export const dateTimeToUnixTime = (date: Date) => date.getTime();
+export const dateTimeToUnixTime = (date: Date) => date.getTime() || 0;
+
+/**
+ * Expands a Unix epoch timestamp into a string that looks like this:
+ * "05/29/1453, 12:00 AM"
+ */
+export const fmtDate = (date: number) => format(new Date(date), "Pp");

src/views/assets/locales.ts

@@ -36,6 +36,7 @@ export default new LocalizedStrings({
         editor_parentNoParentVal: "No parent",
         editor_deadline: "Deadline:",
         editor_reminder: "Reminder:",
+        editor_unsetTp: "Unset",
         task_toggleBtnCompleted: "Completed",
         task_toggleBtnPending: "Pending",
         app_versionString: `${appFullName} v${appVersion} by ${appAuthor}`,

src/views/components/dateTimePicker.tsx

@@ -7,6 +7,10 @@ import {
     DateFormat,
     TimeFormat,
 } from "../../helpers/datetime";
+import strings from "../assets/locales";
+
+/** Helper for `new Date()`. */
+const FDate = (v: number | undefined) => new Date(v || 0);
 
 interface Props {
     dateRequired?: boolean;
@@ -19,14 +23,17 @@ interface State {
 }
 export class DateTimePicker extends React.Component<Props, State> {
     state = {
-        date: new Date(this.props.initialValue || 0),
+        date: FDate(this.props.initialValue),
     };
-    componentDidUpdate = (_p: Props, prevState: State) => {
+    componentDidUpdate = (prevProps: Props, prevState: State) => {
         if (this.props.onChange) {
             if (prevState.date !== this.state.date) {
                 this.props.onChange(dateTimeToUnixTime(this.state.date));
             }
         }
+        if (this.props.initialValue !== prevProps.initialValue) {
+            this.setState({ date: FDate(this.props.initialValue) });
+        }
     };
     updateDate = (e: React.FormEvent<HTMLInputElement>) => {
         // event input is a string of format like "2020-01-03"
@@ -40,29 +47,39 @@ export class DateTimePicker extends React.Component<Props, State> {
         const date = parse(e.currentTarget.value, TimeFormat, this.state.date);
         this.setState({ date });
     };
-    inputInitValue = (date: Date, fmt: string): string => {
-        if (date.getTime()) {
-            return format(date, fmt);
+    unsetDate = () => this.setState({ date: FDate(0) });
+    render = () => {
+        let date, time;
+        // date/time input sometimes reports weird values that are out of range
+        try {
+            date = format(this.state.date, DateFormat);
+            time = format(this.state.date, TimeFormat);
+        } catch {
+            date = "";
+            time = "";
         }
-        return "";
+        return (
+            <div>
+                <input
+                    type="date"
+                    onChange={this.updateDate}
+                    value={date}
+                    required={this.props.dateRequired}
+                />
+                <input
+                    type="time"
+                    onChange={this.updateTime}
+                    value={time}
+                    required={this.props.timeRequired}
+                />
+                <input
+                    type="button"
+                    value={strings.editor_unsetTp}
+                    onClick={this.unsetDate}
+                />
+            </div>
+        );
     };
-    // TODO: add an "Unset" button
-    render = () => (
-        <div>
-            <input
-                type="date"
-                onChange={this.updateDate}
-                value={this.inputInitValue(this.state.date, DateFormat)}
-                required={this.props.dateRequired}
-            />
-            <input
-                type="time"
-                onChange={this.updateTime}
-                value={this.inputInitValue(this.state.date, TimeFormat)}
-                required={this.props.timeRequired}
-            />
-        </div>
-    );
 }
 
 export default DateTimePicker;

src/views/components/taskLine.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter, RouteComponentProps as RCP } from "react-router";
-import format from "date-fns/format";
 
 import Level from "../components/bulma/level";
 import Button from "../components/bulma/button";
@@ -10,6 +9,7 @@ import { Task } from "../../typings/tasks";
 import { Dispatch } from "../../typings/react";
 
 import { updateTask } from "../../actions/tasks";
+import { fmtDate } from "../../helpers/datetime";
 
 import strings from "../assets/locales";
 
@@ -40,9 +40,6 @@ class TaskLine extends React.Component<Props, State> {
         task.Completed = !task.Completed;
         this.props.update(task);
     };
-    // Pp expands to a localized date string that looks like this:
-    // "05/29/1453, 12:00 AM"
-    fmtDate = (date: number) => format(new Date(date), "Pp");
     gotoEditor = () => this.props.history.push(`/task/${this.state.task.ID}`);
     render = () => {
         const {
@@ -75,12 +72,12 @@ class TaskLine extends React.Component<Props, State> {
                     </Level>
                     <Level levelItem className="taskDates">
                         <span className="taskDeadline">
-                            {`(D: ${this.fmtDate(Deadline)})`}
+                            {`(D: ${fmtDate(Deadline)})`}
                             {/* eslint-disable react/jsx-no-literals */}
                             &nbsp;
                         </span>
                         <span className="taskReminder">
-                            {`(R: ${this.fmtDate(Reminder)})`}
+                            {`(R: ${fmtDate(Reminder)})`}
                         </span>
                     </Level>
                 </Level>