[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 <accounts+github@wyattjoh.ca>

src/core/client/stream/constants.ts

@@ -0,0 +1 @@
+export const COMMENTS_ORDER_BY = "coral:localState:commentsOrderBy";

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(

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) {

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<TooltipTabProps> = ({
 export const StreamContainer: FunctionComponent<Props> = props => {
   const emitSetCommentsTabEvent = useViewerEvent(SetCommentsTabEvent);
   const emitSetCommentsOrderByEvent = useViewerEvent(SetCommentsOrderByEvent);
+  const { localStorage } = useCoralContext();
   const [local, setLocal] = useLocal<StreamContainerLocal>(
     graphql`
       fragment StreamContainerLocal on Local {
@@ -101,12 +104,13 @@ export const StreamContainer: FunctionComponent<Props> = props => {
     `
   );
   const onChangeOrder = useCallback(
-    (order: React.ChangeEvent<HTMLSelectElement>) => {
+    async (order: React.ChangeEvent<HTMLSelectElement>) => {
       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]
   );