From 867f0993cccb929d1a66541ab80ea280e3cb39bd Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Tue, 17 Sep 2019 17:11:52 -0400 Subject: [PATCH] [CORL 581] toggleable timestamp (#2561) * toggle between relative and absolute timestamps * make one common timestamp component * remove unused timestamp component from /admin --- .../components/ModerateCard/ModerateCard.css | 4 + .../components/ModerateCard/ModerateCard.tsx | 4 +- .../components/ModerateCard/Timestamp.css | 4 - .../components/ModerateCard/Timestamp.tsx | 15 -- .../__snapshots__/ModerateCard.spec.tsx.snap | 35 +++- .../__snapshots__/Timestamp.spec.tsx.snap | 8 - .../__snapshots__/regularQueue.spec.tsx.snap | 161 +++++++++++---- .../__snapshots__/rejectedQueue.spec.tsx.snap | 92 ++++++--- .../__snapshots__/singleComment.spec.tsx.snap | 69 +++++-- .../common/Timestamp/Timestamp.spec.tsx | 15 -- .../stream/common/Timestamp/Timestamp.tsx | 20 -- .../__snapshots__/Timestamp.spec.tsx.snap | 8 - .../stream/tabs/Comments/Comment/Comment.tsx | 3 +- .../EditCommentForm/EditCommentForm.tsx | 2 +- .../tabs/Comments/Comment/RootParent.tsx | 3 +- .../__snapshots__/Comment.spec.tsx.snap | 1 + .../FeaturedCommentContainer.tsx | 3 +- .../Profile/CommentHistory/HistoryComment.tsx | 2 +- .../HistoryComment.spec.tsx.snap | 1 + .../renderFeaturedStream.spec.tsx.snap | 46 +++-- .../__snapshots__/permalinkView.spec.tsx.snap | 115 ++++++++--- ...permalinkViewLoadMoreParents.spec.tsx.snap | 115 ++++++++--- .../__snapshots__/editComment.spec.tsx.snap | 184 +++++++++++++----- .../__snapshots__/loadMore.spec.tsx.snap | 46 +++-- .../__snapshots__/postComment.spec.tsx.snap | 23 ++- .../postLocalReply.spec.tsx.snap | 184 +++++++++++++----- .../__snapshots__/postReply.spec.tsx.snap | 46 +++-- .../renderCommunityGuidelines.spec.tsx.snap | 46 +++-- .../__snapshots__/renderReplies.spec.tsx.snap | 92 ++++++--- .../__snapshots__/renderStream.spec.tsx.snap | 46 +++-- .../showAllReplies.spec.tsx.snap | 23 ++- .../showConversation.spec.tsx.snap | 23 ++- .../__snapshots__/sortStream.spec.tsx.snap | 46 +++-- .../__snapshots__/myComments.spec.tsx.snap | 46 +++-- .../components/AbsoluteTime/AbsoluteTime.css | 2 + .../components/AbsoluteTime/AbsoluteTime.tsx | 33 ++++ .../ui/components/AbsoluteTime/index.ts | 1 + .../components}/Timestamp/Timestamp.css | 4 + .../components/Timestamp}/Timestamp.spec.tsx | 0 .../ui/components/Timestamp/Timestamp.tsx | 42 ++++ .../__snapshots__/Timestamp.spec.tsx.snap | 13 ++ .../components}/Timestamp/index.ts | 0 src/core/client/ui/components/index.ts | 2 + 43 files changed, 1175 insertions(+), 453 deletions(-) delete mode 100644 src/core/client/admin/components/ModerateCard/Timestamp.css delete mode 100644 src/core/client/admin/components/ModerateCard/Timestamp.tsx delete mode 100644 src/core/client/admin/components/ModerateCard/__snapshots__/Timestamp.spec.tsx.snap delete mode 100644 src/core/client/stream/common/Timestamp/Timestamp.spec.tsx delete mode 100644 src/core/client/stream/common/Timestamp/Timestamp.tsx delete mode 100644 src/core/client/stream/common/Timestamp/__snapshots__/Timestamp.spec.tsx.snap create mode 100644 src/core/client/ui/components/AbsoluteTime/AbsoluteTime.css create mode 100644 src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx create mode 100644 src/core/client/ui/components/AbsoluteTime/index.ts rename src/core/client/{stream/common => ui/components}/Timestamp/Timestamp.css (70%) rename src/core/client/{admin/components/ModerateCard => ui/components/Timestamp}/Timestamp.spec.tsx (100%) create mode 100644 src/core/client/ui/components/Timestamp/Timestamp.tsx create mode 100644 src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap rename src/core/client/{stream/common => ui/components}/Timestamp/index.ts (100%) diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.css b/src/core/client/admin/components/ModerateCard/ModerateCard.css index b334acde3..2de706b24 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCard.css +++ b/src/core/client/admin/components/ModerateCard/ModerateCard.css @@ -156,3 +156,7 @@ .deleted { background: var(--palette-grey-lightest); } + +.timestamp { + color: var(--palette-grey-lighter); +} \ No newline at end of file diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx index b19c519a7..b2ddcec96 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx +++ b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx @@ -9,6 +9,7 @@ import { Flex, HorizontalGutter, TextLink, + Timestamp, Typography, } from "coral-ui/components"; @@ -18,7 +19,6 @@ import FeatureButton from "./FeatureButton"; import InReplyTo from "./InReplyTo"; import MarkersContainer from "./MarkersContainer"; import RejectButton from "./RejectButton"; -import Timestamp from "./Timestamp"; import Username from "./Username"; import styles from "./ModerateCard.css"; @@ -130,7 +130,7 @@ const ModerateCard: FunctionComponent = ({ {username} )} - {createdAt} + {createdAt} = props => ( - -); - -export default Timestamp; diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap index 3cac76e74..abb8e8283 100644 --- a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap +++ b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap @@ -23,7 +23,10 @@ exports[`renders approved correctly 1`] = ` Theon - + 2018-11-29T16:01:51.897Z - + 2018-11-29T16:01:51.897Z - + 2018-11-29T16:01:51.897Z - + 2018-11-29T16:01:51.897Z - + 2018-11-29T16:01:51.897Z - + 2018-11-29T16:01:51.897Z - + 2018-11-29T16:01:51.897Z -`; diff --git a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap index b30e03bbc..8c19904a5 100644 --- a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap +++ b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap @@ -46,13 +46,24 @@ exports[`approves comment in reported queue: dangling 1`] = ` Isabelle - + + - + + - + + - + + - + + - + + - + + - + + - + + - + + - + + - + + - + + - + +
- + +
- + +
@@ -385,13 +396,24 @@ exports[`renders permalink view 1`] = `
- + +
@@ -600,13 +622,24 @@ exports[`renders permalink view 1`] = `
- + +
@@ -811,13 +844,24 @@ exports[`renders permalink view 1`] = `
- + +
@@ -1038,13 +1082,24 @@ exports[`renders permalink view 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap index 92d7971bb..34164f9ec 100644 --- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap +++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap @@ -52,13 +52,24 @@ exports[`renders conversation thread 1`] = `
- + +
@@ -198,13 +209,24 @@ exports[`renders conversation thread 1`] = `
- + +
@@ -428,13 +450,24 @@ exports[`shows more of this conversation 1`] = `
- + +
@@ -650,13 +683,24 @@ exports[`shows more of this conversation 1`] = `
- + +
@@ -865,13 +909,24 @@ exports[`shows more of this conversation 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap index b1b97ac86..8120e0930 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap @@ -65,13 +65,24 @@ exports[`cancel edit 1`] = `
- + +
@@ -256,13 +267,24 @@ exports[`edit a comment and handle server error: edit form 1`] = ` Markus
- + +
- + +
- + +
- + +
@@ -1062,13 +1117,24 @@ exports[`edit a comment: server response 1`] = `
- + +
@@ -1304,13 +1370,24 @@ exports[`shows expiry message: edit form closed 1`] = `
- + +
@@ -1495,13 +1572,24 @@ exports[`shows expiry message: edit time expired 1`] = ` Markus
- + +
- + +
@@ -275,13 +286,24 @@ exports[`renders comment stream with load more button 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap index 3c14d5f36..df6b1ceac 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap @@ -65,13 +65,24 @@ exports[`post a comment: optimistic response 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap index 048f64349..3062c6e14 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap @@ -65,13 +65,24 @@ exports[`post a reply: open reply form 1`] = `
- + +
@@ -497,13 +508,24 @@ exports[`post a reply: optimistic response 1`] = `
- + +
@@ -750,13 +772,24 @@ exports[`renders comment stream 1`] = `
- + +
@@ -974,13 +1007,24 @@ exports[`renders comment stream 1`] = `
- + +
@@ -1225,13 +1269,24 @@ exports[`renders comment stream 1`] = `
- + +
@@ -1476,13 +1531,24 @@ exports[`renders comment stream 1`] = `
- + +
@@ -1727,13 +1793,24 @@ exports[`renders comment stream 1`] = `
- + +
@@ -1978,13 +2055,24 @@ exports[`renders comment stream 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap index 7d33769f7..52f492c02 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap @@ -65,13 +65,24 @@ exports[`post a reply: open reply form 1`] = `
- + +
@@ -453,13 +464,24 @@ exports[`post a reply: optimistic response 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap index 68d69afc3..708386fdb 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap @@ -342,13 +342,24 @@ exports[`renders comment stream with community guidelines 1`] = `
- + +
@@ -542,13 +553,24 @@ exports[`renders comment stream with community guidelines 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap index 92ccd8262..4be6a5625 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap @@ -74,13 +74,24 @@ exports[`renders reply list 1`] = `
- + +
@@ -306,13 +317,24 @@ exports[`renders reply list 1`] = `
- + +
@@ -533,13 +555,24 @@ exports[`renders reply list 1`] = `
- + +
@@ -762,13 +795,24 @@ exports[`renders reply list 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap index 990384f50..1f6be2991 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap @@ -358,13 +358,24 @@ exports[`renders comment stream 1`] = `
- + +
@@ -563,13 +574,24 @@ exports[`renders comment stream 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap index 3a35b03bd..a27b59809 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap @@ -74,13 +74,24 @@ exports[`renders comment stream 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap index f3ad1a7ed..8466368b7 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap @@ -65,13 +65,24 @@ exports[`renders deepest comment with link 1`] = `
- + +
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap index 66a23d510..3f1f1f5fc 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap @@ -75,13 +75,24 @@ exports[`renders app with comment stream 1`] = `
- + +
@@ -275,13 +286,24 @@ exports[`renders app with comment stream 1`] = `
- + +
diff --git a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap index e415be247..758a978a9 100644 --- a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap +++ b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap @@ -22,13 +22,24 @@ exports[`renders profile 1`] = `
- + +
@@ -72,13 +83,24 @@ exports[`renders profile 1`] = `
- + +
diff --git a/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.css b/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.css new file mode 100644 index 000000000..c6d429b97 --- /dev/null +++ b/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.css @@ -0,0 +1,2 @@ +.root { +} \ No newline at end of file diff --git a/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx b/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx new file mode 100644 index 000000000..8b2dae072 --- /dev/null +++ b/src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx @@ -0,0 +1,33 @@ +import { useCoralContext } from "coral-framework/lib/bootstrap"; +import { PropTypesOf } from "coral-ui/types"; +import React, { FunctionComponent, useMemo } from "react"; + +import { Typography } from "coral-ui/components"; + +interface Props { + date: string; + className?: string; +} + +const AbsoluteTime: FunctionComponent = ({ date, className }) => { + const { locales } = useCoralContext(); + const formatted = useMemo(() => { + const formatter = new Intl.DateTimeFormat(locales, { + year: "numeric", + month: "long", + day: "numeric", + hour: "numeric", + minute: "2-digit", + }); + return formatter.format(new Date(date)); + }, [locales, date]); + return ( + + {formatted} + + ); +}; + +export default AbsoluteTime; + +export type AbsoluteTimeProps = PropTypesOf; diff --git a/src/core/client/ui/components/AbsoluteTime/index.ts b/src/core/client/ui/components/AbsoluteTime/index.ts new file mode 100644 index 000000000..c533a3419 --- /dev/null +++ b/src/core/client/ui/components/AbsoluteTime/index.ts @@ -0,0 +1 @@ +export { default, AbsoluteTimeProps } from "./AbsoluteTime"; diff --git a/src/core/client/stream/common/Timestamp/Timestamp.css b/src/core/client/ui/components/Timestamp/Timestamp.css similarity index 70% rename from src/core/client/stream/common/Timestamp/Timestamp.css rename to src/core/client/ui/components/Timestamp/Timestamp.css index bf1e3bafe..9764a04e6 100644 --- a/src/core/client/stream/common/Timestamp/Timestamp.css +++ b/src/core/client/ui/components/Timestamp/Timestamp.css @@ -1,3 +1,7 @@ .root { + cursor: default; +} + +.text { composes: timestamp from "coral-ui/shared/typography.css"; } diff --git a/src/core/client/admin/components/ModerateCard/Timestamp.spec.tsx b/src/core/client/ui/components/Timestamp/Timestamp.spec.tsx similarity index 100% rename from src/core/client/admin/components/ModerateCard/Timestamp.spec.tsx rename to src/core/client/ui/components/Timestamp/Timestamp.spec.tsx diff --git a/src/core/client/ui/components/Timestamp/Timestamp.tsx b/src/core/client/ui/components/Timestamp/Timestamp.tsx new file mode 100644 index 000000000..151cfc427 --- /dev/null +++ b/src/core/client/ui/components/Timestamp/Timestamp.tsx @@ -0,0 +1,42 @@ +import cn from "classnames"; +import React, { FunctionComponent, useCallback, useState } from "react"; + +import { AbsoluteTime, BaseButton, RelativeTime } from "coral-ui/components"; + +import styles from "./Timestamp.css"; + +export interface TimestampProps { + className?: string; + children: string; + toggleAbsolute?: boolean; +} + +const Timestamp: FunctionComponent = props => { + const [showAbsolute, setShowAbsolute] = useState(false); + const toggleShowAbsolute = useCallback(() => { + if (props.toggleAbsolute) { + setShowAbsolute(!showAbsolute); + } + }, [showAbsolute, setShowAbsolute]); + return ( + + {showAbsolute ? ( + + ) : ( + + )} + + ); +}; + +Timestamp.defaultProps = { + toggleAbsolute: true, +}; + +export default Timestamp; diff --git a/src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap new file mode 100644 index 000000000..d317c931b --- /dev/null +++ b/src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + + +`; diff --git a/src/core/client/stream/common/Timestamp/index.ts b/src/core/client/ui/components/Timestamp/index.ts similarity index 100% rename from src/core/client/stream/common/Timestamp/index.ts rename to src/core/client/ui/components/Timestamp/index.ts diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index 24d9fbfff..e6c14b1e5 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -1,3 +1,4 @@ +export { default as AbsoluteTime } from "./AbsoluteTime"; export { default as BaseButton } from "./BaseButton"; export { default as Button } from "./Button"; export { default as Backdrop } from "./Backdrop"; @@ -27,6 +28,7 @@ export { Tab, TabBar, TabContent, TabPane } from "./Tabs"; export { StepBar, Step } from "./Steps"; export { SelectField, Option, OptGroup } from "./SelectField"; export { default as TextLink } from "./TextLink"; +export { default as Timestamp } from "./Timestamp"; export { default as CheckBox } from "./CheckBox"; export { default as RadioButton } from "./RadioButton"; export { default as Delay } from "./Delay";