diff --git a/package.json b/package.json index ab135b7b4..ee06d022d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "@testing-library/react": "10.4.9", "@testing-library/user-event": "12.1.3", "@types/codemirror": "0.0.97", - "@types/deep-equal": "1.0.1", "@types/emoji-mart": "3.0.2", "@types/highlight.js": "9.12.4", "@types/jest": "26.0.10", @@ -31,7 +30,6 @@ "@typescript-eslint/parser": "3.10.1", "bootstrap": "4.5.2", "codemirror": "5.57.0", - "deep-equal": "2.0.3", "emoji-mart": "3.0.0", "eslint-config-react-app": "5.2.1", "eslint-config-standard": "14.1.1", @@ -41,6 +39,7 @@ "eslint-plugin-node": "11.1.0", "eslint-plugin-promise": "4.2.1", "eslint-plugin-standard": "4.0.1", + "fast-deep-equal": "^3.1.3", "flowchart.js": "1.14.0", "fork-awesome": "1.1.7", "github-markdown-css": "4.0.0", diff --git a/src/components/common/branding/branding.tsx b/src/components/common/branding/branding.tsx index 7829800ee..aabb7f126 100644 --- a/src/components/common/branding/branding.tsx +++ b/src/components/common/branding/branding.tsx @@ -1,3 +1,5 @@ + +import equal from 'fast-deep-equal' import React from 'react' import { useSelector } from 'react-redux' import { ApplicationState } from '../../../redux' @@ -9,7 +11,7 @@ export interface BrandingProps { } export const Branding: React.FC = ({ inline = false }) => { - const branding = useSelector((state: ApplicationState) => state.config.branding) + const branding = useSelector((state: ApplicationState) => state.config.branding, equal) const showBranding = !!branding.name || !!branding.logo return ( diff --git a/src/components/common/document-title/document-title.tsx b/src/components/common/document-title/document-title.tsx index 41d777900..cc69b4c36 100644 --- a/src/components/common/document-title/document-title.tsx +++ b/src/components/common/document-title/document-title.tsx @@ -7,11 +7,11 @@ export interface DocumentTitleProps { } export const DocumentTitle: React.FC = ({ title }) => { - const branding = useSelector((state: ApplicationState) => state.config.branding) + const brandingName = useSelector((state: ApplicationState) => state.config.branding.name) useEffect(() => { - document.title = `${title ? title + ' - ' : ''}CodiMD ${branding.name ? ` @ ${branding.name}` : ''}` - }, [branding, title]) + document.title = `${title ? title + ' - ' : ''}CodiMD ${brandingName ? ` @ ${brandingName}` : ''}` + }, [brandingName, title]) return null } diff --git a/src/components/common/motd-banner/motd-banner.tsx b/src/components/common/motd-banner/motd-banner.tsx index c5ed64370..210c96ff9 100644 --- a/src/components/common/motd-banner/motd-banner.tsx +++ b/src/components/common/motd-banner/motd-banner.tsx @@ -1,3 +1,4 @@ +import equal from 'fast-deep-equal' import React from 'react' import { useSelector } from 'react-redux' import { Link } from 'react-router-dom' @@ -8,7 +9,7 @@ import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon' import { ShowIf } from '../show-if/show-if' export const MotdBanner: React.FC = () => { - const bannerState = useSelector((state: ApplicationState) => state.banner) + const bannerState = useSelector((state: ApplicationState) => state.banner, equal) const dismissBanner = () => { setBanner({ ...bannerState, show: false }) diff --git a/src/components/editor/app-bar/app-bar.tsx b/src/components/editor/app-bar/app-bar.tsx index f0ae1e5ef..59a1f1660 100644 --- a/src/components/editor/app-bar/app-bar.tsx +++ b/src/components/editor/app-bar/app-bar.tsx @@ -19,7 +19,7 @@ import { NavbarBranding } from './navbar-branding' export const AppBar: React.FC = () => { const { t } = useTranslation() const { id } = useParams() - const user = useSelector((state: ApplicationState) => state.user) + const userExists = useSelector((state: ApplicationState) => !!state.user) return ( @@ -39,10 +39,10 @@ export const AppBar: React.FC = () => { - + - + diff --git a/src/components/editor/app-bar/editor-view-mode.tsx b/src/components/editor/app-bar/editor-view-mode.tsx index 483b7faec..92e1a1113 100644 --- a/src/components/editor/app-bar/editor-view-mode.tsx +++ b/src/components/editor/app-bar/editor-view-mode.tsx @@ -14,12 +14,12 @@ export enum EditorMode { export const EditorViewMode: React.FC = () => { const { t } = useTranslation() - const editorConfig = useSelector((state: ApplicationState) => state.editorConfig) + const editorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode) return ( { setEditorMode(value) }}> diff --git a/src/components/history-page/history-page.tsx b/src/components/history-page/history-page.tsx index 066751081..2b0f58d4e 100644 --- a/src/components/history-page/history-page.tsx +++ b/src/components/history-page/history-page.tsx @@ -5,6 +5,7 @@ import { useSelector } from 'react-redux' import { deleteHistory, deleteHistoryEntry, getHistory, setHistory, updateHistoryEntry } from '../../api/history' import { deleteNote } from '../../api/notes' import { ApplicationState } from '../../redux' + import { collectEntries, downloadHistory, @@ -46,7 +47,7 @@ export const HistoryPage: React.FC = () => { const [localHistoryEntries, setLocalHistoryEntries] = useState(loadHistoryFromLocalStore) const [remoteHistoryEntries, setRemoteHistoryEntries] = useState([]) const [toolbarState, setToolbarState] = useState(toolbarInitState) - const user = useSelector((state: ApplicationState) => state.user) + const userExists = useSelector((state: ApplicationState) => !!state.user) const [error, setError] = useState('') const historyWrite = useCallback((entries: HistoryEntry[]) => { @@ -61,24 +62,24 @@ export const HistoryPage: React.FC = () => { }, [historyWrite, localHistoryEntries]) const importHistory = useCallback((entries: HistoryEntry[]): void => { - if (user) { + if (userExists) { setHistory(entries) .then(() => setRemoteHistoryEntries(entries)) .catch(() => setError('setHistory')) } else { setLocalHistoryEntries(entries) } - }, [user]) + }, [userExists]) const refreshHistory = useCallback(() => { const localHistory = loadHistoryFromLocalStore() setLocalHistoryEntries(localHistory) - if (user) { + if (userExists) { getHistory() .then((remoteHistory) => setRemoteHistoryEntries(remoteHistory)) .catch(() => setError('getHistory')) } - }, [user]) + }, [userExists]) useEffect(() => { refreshHistory() @@ -94,17 +95,17 @@ export const HistoryPage: React.FC = () => { const clearHistory = useCallback(() => { setLocalHistoryEntries([]) - if (user) { + if (userExists) { deleteHistory() .then(() => setRemoteHistoryEntries([])) .catch(() => setError('deleteHistory')) } historyWrite([]) - }, [historyWrite, user]) + }, [historyWrite, userExists]) const uploadAll = useCallback((): void => { const newHistory = mergeEntryArrays(localHistoryEntries, remoteHistoryEntries) - if (user) { + if (userExists) { setHistory(newHistory) .then(() => { setRemoteHistoryEntries(newHistory) @@ -113,7 +114,7 @@ export const HistoryPage: React.FC = () => { }) .catch(() => setError('setHistory')) } - }, [historyWrite, localHistoryEntries, remoteHistoryEntries, user]) + }, [historyWrite, localHistoryEntries, remoteHistoryEntries, userExists]) const removeFromHistoryClick = useCallback((entryId: string, location: HistoryEntryOrigin): void => { if (location === HistoryEntryOrigin.LOCAL) { @@ -126,14 +127,14 @@ export const HistoryPage: React.FC = () => { }, []) const deleteNoteClick = useCallback((entryId: string, location: HistoryEntryOrigin): void => { - if (user) { + if (userExists) { deleteNote(entryId) .then(() => { removeFromHistoryClick(entryId, location) }) .catch(() => setError('deleteNote')) } - }, [user, removeFromHistoryClick]) + }, [userExists, removeFromHistoryClick]) const pinClick = useCallback((entryId: string, location: HistoryEntryOrigin): void => { if (location === HistoryEntryOrigin.LOCAL) { diff --git a/src/components/history-page/history-toolbar/history-toolbar.tsx b/src/components/history-page/history-toolbar/history-toolbar.tsx index de8b6fdb1..2fad11f6f 100644 --- a/src/components/history-page/history-toolbar/history-toolbar.tsx +++ b/src/components/history-page/history-toolbar/history-toolbar.tsx @@ -49,7 +49,7 @@ export const initState: HistoryToolbarState = { export const HistoryToolbar: React.FC = ({ onSettingsChange, tags, onClearHistory, onRefreshHistory, onExportHistory, onImportHistory, onUploadAll }) => { const [t] = useTranslation() const [state, setState] = useState(initState) - const user = useSelector((state: ApplicationState) => state.user) + const userExists = useSelector((state: ApplicationState) => !!state.user) const titleSortChanged = (direction: SortModeEnum) => { setState(prevState => ({ @@ -118,7 +118,7 @@ export const HistoryToolbar: React.FC = ({ onSettingsChange - +