From 494793ba3cdad5c7c4135c6280438e5c07687cb5 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@tlon.io>
Date: Thu, 21 Oct 2021 15:38:52 -0500
Subject: [PATCH] interface: fix reactivity in SidebarList

Fixes urbit/landscape#1262
---
 .../views/landscape/components/Sidebar/SidebarList.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarList.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarList.tsx
index 3763fdcf2..ce9b24345 100644
--- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarList.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarList.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback } from 'react';
-import { Associations, Graph } from '@urbit/api';
+import { Associations, Graph, Unreads } from '@urbit/api';
 import { patp, patp2dec } from 'urbit-ob';
 import _ from 'lodash';
 
@@ -13,9 +13,8 @@ import useMetadataState from '~/logic/state/metadata';
 import { useHistory } from 'react-router';
 import { useShortcut } from '~/logic/state/settings';
 
-function sidebarSort(pending: Set<string>): Record<SidebarSort, (a: string, b: string) => number> {
+function sidebarSort(unreads: Unreads, pending: Set<string>): Record<SidebarSort, (a: string, b: string) => number> {
   const { associations } = useMetadataState.getState();
-  const { unreads } = useHarkState.getState();
   const alphabetical = (a: string, b: string) => {
     const aAssoc = associations[a];
     const bAssoc = associations[b];
@@ -102,9 +101,10 @@ export function SidebarList(props: {
   const inbox = useInbox();
   const graphKeys = useGraphState(s => s.graphKeys);
   const pending = useGraphState(s => s.pendingDms);
+  const unreads = useHarkState(s => s.unreads);
 
   const ordered = getItems(associations, workspace, inbox, pending)
-    .sort(sidebarSort(pending)[config.sortBy]);
+    .sort(sidebarSort(unreads, pending)[config.sortBy]);
 
   const history = useHistory();