From 2478e9a2502d43bb336634b5e8c09b94d9fc8fea Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Thu, 27 Feb 2020 18:28:07 -0500 Subject: [PATCH] [CORL-770] save comment sort order preference in local storage (#2854) * save comment sort order preference in local storage * await async localstorage operation Co-authored-by: Wyatt Johnson --- src/core/client/stream/constants.ts | 1 + src/core/client/stream/local/initLocalState.ts | 7 ++++++- src/core/client/stream/mutations/SignOutMutation.ts | 3 ++- .../client/stream/tabs/Comments/Stream/StreamContainer.tsx | 6 +++++- 4 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 src/core/client/stream/constants.ts diff --git a/src/core/client/stream/constants.ts b/src/core/client/stream/constants.ts new file mode 100644 index 000000000..d02f367da --- /dev/null +++ b/src/core/client/stream/constants.ts @@ -0,0 +1 @@ +export const COMMENTS_ORDER_BY = "coral:localState:commentsOrderBy"; diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts index 0d1906156..0490242aa 100644 --- a/src/core/client/stream/local/initLocalState.ts +++ b/src/core/client/stream/local/initLocalState.ts @@ -5,6 +5,7 @@ import { CoralContext } from "coral-framework/lib/bootstrap"; import { getExternalConfig } from "coral-framework/lib/externalConfig"; import { createAndRetain, initLocalBaseState } from "coral-framework/lib/relay"; +import { COMMENTS_ORDER_BY } from "../constants"; import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "./constants"; /** @@ -21,6 +22,10 @@ export default async function initLocalState( config ? config.accessToken : undefined ); + const commentsOrderBy = + (await context.localStorage.getItem(COMMENTS_ORDER_BY)) || + "CREATED_AT_DESC"; + commitLocalUpdate(environment, s => { const root = s.getRoot(); const localRecord = root.getLinkedRecord("local")!; @@ -40,7 +45,7 @@ export default async function initLocalState( localRecord.setValue(query.commentID, "commentID"); } // Set sort - localRecord.setValue("CREATED_AT_DESC", "commentsOrderBy"); + localRecord.setValue(commentsOrderBy, "commentsOrderBy"); // Create authPopup Record const authPopupRecord = createAndRetain( diff --git a/src/core/client/stream/mutations/SignOutMutation.ts b/src/core/client/stream/mutations/SignOutMutation.ts index f39d1dc1d..ddbded697 100644 --- a/src/core/client/stream/mutations/SignOutMutation.ts +++ b/src/core/client/stream/mutations/SignOutMutation.ts @@ -2,8 +2,8 @@ import { Environment } from "relay-runtime"; import { CoralContext } from "coral-framework/lib/bootstrap"; import { createMutation } from "coral-framework/lib/relay"; - import { commit as signOut } from "coral-framework/mutations/SignOutMutation"; +import { COMMENTS_ORDER_BY } from "coral-stream/constants"; import { SignOutEvent } from "coral-stream/events"; const SignOutMutation = createMutation( @@ -11,6 +11,7 @@ const SignOutMutation = createMutation( async (environment: Environment, input: undefined, ctx: CoralContext) => { const signOutEvent = SignOutEvent.begin(ctx.eventEmitter); try { + await ctx.localStorage.removeItem(COMMENTS_ORDER_BY); await signOut(environment, input, ctx); signOutEvent.success(); } catch (error) { diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx index 41c49017c..b358741e4 100644 --- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx @@ -3,12 +3,14 @@ import cn from "classnames"; import React, { FunctionComponent, useCallback, useEffect } from "react"; import { graphql } from "react-relay"; +import { useCoralContext } from "coral-framework/lib/bootstrap"; import { useViewerEvent } from "coral-framework/lib/events"; import { useLocal, withFragmentContainer } from "coral-framework/lib/relay"; import { GQLSTORY_MODE, GQLUSER_STATUS } from "coral-framework/schema"; import CLASSES from "coral-stream/classes"; import Counter from "coral-stream/common/Counter"; import { UserBoxContainer } from "coral-stream/common/UserBox"; +import { COMMENTS_ORDER_BY } from "coral-stream/constants"; import { SetCommentsOrderByEvent, SetCommentsTabEvent, @@ -91,6 +93,7 @@ const TabWithFeaturedTooltip: FunctionComponent = ({ export const StreamContainer: FunctionComponent = props => { const emitSetCommentsTabEvent = useViewerEvent(SetCommentsTabEvent); const emitSetCommentsOrderByEvent = useViewerEvent(SetCommentsOrderByEvent); + const { localStorage } = useCoralContext(); const [local, setLocal] = useLocal( graphql` fragment StreamContainerLocal on Local { @@ -101,12 +104,13 @@ export const StreamContainer: FunctionComponent = props => { ` ); const onChangeOrder = useCallback( - (order: React.ChangeEvent) => { + async (order: React.ChangeEvent) => { if (local.commentsOrderBy === order.target.value) { return; } setLocal({ commentsOrderBy: order.target.value as any }); emitSetCommentsOrderByEvent({ orderBy: order.target.value }); + await localStorage.setItem(COMMENTS_ORDER_BY, order.target.value); }, [setLocal, local.commentsOrderBy] );