From fd9b755dee1d08fcc753a43047e90e98551907ed Mon Sep 17 00:00:00 2001 From: Timur Demin Date: Thu, 16 Jan 2020 15:39:59 +0500 Subject: [PATCH 1/4] Update auth token header format --- src/actions/auth.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/actions/auth.ts b/src/actions/auth.ts index d41b8eb..63f5bb7 100644 --- a/src/actions/auth.ts +++ b/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}`; }; /** From b66248d21d92c7ab41c8a1151819cfbefbe2655f Mon Sep 17 00:00:00 2001 From: Timur Demin Date: Thu, 16 Jan 2020 16:14:00 +0500 Subject: [PATCH 2/4] Fix #24 & #22 --- src/helpers/datetime.ts | 12 +++++- src/views/components/dateTimePicker.tsx | 56 +++++++++++++++---------- src/views/components/taskLine.tsx | 9 ++-- 3 files changed, 46 insertions(+), 31 deletions(-) diff --git a/src/helpers/datetime.ts b/src/helpers/datetime.ts index 19644c7..7ee5aba 100644 --- a/src/helpers/datetime.ts +++ b/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"); diff --git a/src/views/components/dateTimePicker.tsx b/src/views/components/dateTimePicker.tsx index 826b9fc..89aacf8 100644 --- a/src/views/components/dateTimePicker.tsx +++ b/src/views/components/dateTimePicker.tsx @@ -8,6 +8,9 @@ import { TimeFormat, } from "../../helpers/datetime"; +/** Helper for `new Date()`. */ +const FDate = (v: number | undefined) => new Date(v || 0); + interface Props { dateRequired?: boolean; timeRequired?: boolean; @@ -19,14 +22,17 @@ interface State { } export class DateTimePicker extends React.Component { 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) => { // event input is a string of format like "2020-01-03" @@ -40,29 +46,33 @@ export class DateTimePicker extends React.Component { 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); + // TODO: add an "Unset" button + render = () => { + let date, time; + try { + date = format(this.state.date, DateFormat); + time = format(this.state.date, TimeFormat); + } catch { + date = ""; + time = ""; } - return ""; + return ( +
+ + +
+ ); }; - // TODO: add an "Unset" button - render = () => ( -
- - -
- ); } export default DateTimePicker; diff --git a/src/views/components/taskLine.tsx b/src/views/components/taskLine.tsx index e0eec3e..cf80e88 100644 --- a/src/views/components/taskLine.tsx +++ b/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 { 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 { - {`(D: ${this.fmtDate(Deadline)})`} + {`(D: ${fmtDate(Deadline)})`} {/* eslint-disable react/jsx-no-literals */}   - {`(R: ${this.fmtDate(Reminder)})`} + {`(R: ${fmtDate(Reminder)})`} From 9c21b62ff21d17911293c469168238e974f46219 Mon Sep 17 00:00:00 2001 From: Timur Demin Date: Thu, 16 Jan 2020 16:23:36 +0500 Subject: [PATCH 3/4] Add an unset button to datetime picker --- src/views/assets/locales.ts | 1 + src/views/components/dateTimePicker.tsx | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/views/assets/locales.ts b/src/views/assets/locales.ts index abd5276..d23bf58 100644 --- a/src/views/assets/locales.ts +++ b/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}`, diff --git a/src/views/components/dateTimePicker.tsx b/src/views/components/dateTimePicker.tsx index 89aacf8..7539e96 100644 --- a/src/views/components/dateTimePicker.tsx +++ b/src/views/components/dateTimePicker.tsx @@ -7,6 +7,7 @@ import { DateFormat, TimeFormat, } from "../../helpers/datetime"; +import strings from "../assets/locales"; /** Helper for `new Date()`. */ const FDate = (v: number | undefined) => new Date(v || 0); @@ -46,9 +47,10 @@ export class DateTimePicker extends React.Component { const date = parse(e.currentTarget.value, TimeFormat, this.state.date); this.setState({ date }); }; - // TODO: add an "Unset" button + 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); @@ -70,6 +72,11 @@ export class DateTimePicker extends React.Component { value={time} required={this.props.timeRequired} /> + ); }; From f42d494c91e4e852165153db3c9890b03f6ced64 Mon Sep 17 00:00:00 2001 From: Timur Demin Date: Thu, 16 Jan 2020 19:28:35 +0500 Subject: [PATCH 4/4] Bump v0.1.1 --- package.json | 2 +- src/const.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c6bc4dc..e37d49c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "amber_web", - "version": "0.1.0", + "version": "0.1.1", "private": true, "dependencies": { "@types/jest": "^24.X", diff --git a/src/const.ts b/src/const.ts index beb2044..900543c 100644 --- a/src/const.ts +++ b/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";