urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-24 13:06:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: replacing manual persistence with middleware

Browse Source
This commit is contained in:
Hunter Miller 2021-07-02 18:52:59 -05:00
parent ab8e2fd8d5
commit 85e3f5d8bd
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
pkg/interface/src/views/apps/chat/components/ChatPane.tsx
View File

@ -3,8 +3,8 @@ import { Content, Graph, Post } from '@urbit/api';
import bigInt, { BigInteger } from 'big-integer';
import React, { ReactElement, useCallback, useEffect, useState } from 'react';
import create from 'zustand';
import { persist } from 'zustand/middleware';
import { useFileUpload } from '~/logic/lib/useFileUpload';
import { retrieve } from '~/logic/lib/useLocalStorageState';
import { useOurContact } from '~/logic/state/contact';
import { useGraphTimesent } from '~/logic/state/graph';
import ShareProfile from '~/views/apps/chat/components/ShareProfile';
@ -17,22 +17,32 @@ interface useChatStoreType {
id: string;
message: string;
messageStore: Record<string, string>;
restore: (id: string) => void;
setMessage: (message: string) => void;
}
const unsentKey = 'chat-unsent';
export const useChatStore = create<useChatStoreType>((set, get) => ({
export const useChatStore = create<useChatStoreType>(persist((set, get) => ({
id: '',
message: '',
messageStore: retrieve(unsentKey, {}),
messageStore: {},
restore: (id: string) => {
const store = get().messageStore;
set({
id,
messageStore: store,
message: store[id] || ''
});
},
setMessage: (message: string) => {
const store = get().messageStore;
store[get().id] = message;
localStorage.setItem(unsentKey, JSON.stringify(store));
set({ message });
set({ message, messageStore: store });
}
}), {
name: unsentKey,
whitelist: ['messageStore']
}));
interface ChatPaneProps {
@ -101,18 +111,13 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
} = props;
const graphTimesentMap = useGraphTimesent(id);
const ourContact = useOurContact();
const setMessage = useChatStore(s => s.setMessage);
const { restore, setMessage } = useChatStore(s => ({ setMessage: s.setMessage, restore: s.restore }));
const { canUpload, drag } = useFileUpload({
onSuccess: url => onSubmit([{ url }])
});
useEffect(() => {
const messageStore = retrieve(unsentKey, {});
useChatStore.setState({
id,
messageStore,
message: messageStore[id] || ''
});
restore(id);
}, [id]);
const scrollTo = new URLSearchParams(location.search).get('msg');