From 08d399ba0ac8bd865e27b06374aa9bcc491f7e56 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Thu, 4 Nov 2021 11:30:50 -0500 Subject: [PATCH] interface: fix circular dependencies --- pkg/interface/src/logic/lib/util.tsx | 25 ------------------- pkg/interface/src/logic/state/contact.ts | 21 +++++++++++++++- pkg/interface/src/logic/state/settings.ts | 9 ++++++- .../apps/chat/components/ChatMessage.tsx | 4 +-- .../apps/publish/components/Notebook.tsx | 2 +- pkg/interface/src/views/components/Author.tsx | 4 +-- .../src/views/components/MentionText.tsx | 3 ++- .../src/views/components/ProfileOverlay.tsx | 3 +-- 8 files changed, 36 insertions(+), 35 deletions(-) diff --git a/pkg/interface/src/logic/lib/util.tsx b/pkg/interface/src/logic/lib/util.tsx index 2b03815875..70dec91922 100644 --- a/pkg/interface/src/logic/lib/util.tsx +++ b/pkg/interface/src/logic/lib/util.tsx @@ -4,14 +4,11 @@ import { patp2dec } from 'urbit-ob'; import f from 'lodash/fp'; import { Association, Contact, Patp } from '@urbit/api'; import { enableMapSet } from 'immer'; -import useSettingsState from '../state/settings'; /* eslint-disable max-lines */ import anyAscii from 'any-ascii'; import { sigil as sigiljs, stringRenderer } from '@tlon/sigil-js'; import bigInt, { BigInteger } from 'big-integer'; -import { foregroundFromBackground } from '~/logic/lib/sigil'; import { IconRef, Workspace } from '~/types'; -import useContactState from '../state/contact'; enableMapSet(); @@ -462,13 +459,6 @@ export function pluralize(text: string, isPlural = false, vowel = false) { return isPlural ? `${text}s` : `${vowel ? 'an' : 'a'} ${text}`; } -// Hide is an optional second parameter for when this function is used in class components -export function useShowNickname(contact: Contact | null, hide?: boolean): boolean { - const hideState = useSettingsState(state => state.calm.hideNicknames); - const hideNicknames = typeof hide !== 'undefined' ? hide : hideState; - return Boolean(contact && contact.nickname && !hideNicknames); -} - interface useHoveringInterface { hovering: boolean; bind: { @@ -513,21 +503,6 @@ export const svgDataURL = svg => 'data:image/svg+xml;base64,' + btoa(svg); export const svgBlobURL = svg => URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' })); -export const favicon = () => { - let background = '#ffffff'; - const contacts = useContactState.getState().contacts; - if (Object.prototype.hasOwnProperty.call(contacts, `~${window.ship}`)) { - background = `#${uxToHex(contacts[`~${window.ship}`].color)}`; - } - const foreground = foregroundFromBackground(background); - const svg = sigiljs({ - patp: window.ship, - renderer: stringRenderer, - size: 16, - colors: [background, foreground] - }); - return svg; -}; export function binaryIndexOf(arr: BigInteger[], target: BigInteger): number | undefined { let leftBound = 0; diff --git a/pkg/interface/src/logic/state/contact.ts b/pkg/interface/src/logic/state/contact.ts index 4646edab58..bf234ef32c 100644 --- a/pkg/interface/src/logic/state/contact.ts +++ b/pkg/interface/src/logic/state/contact.ts @@ -1,4 +1,4 @@ -import { Contact, deSig, Patp, Rolodex } from '@urbit/api'; +import { Contact, deSig, Patp, Rolodex, uxToHex } from '@urbit/api'; import { useCallback } from 'react'; import _ from 'lodash'; import { reduce, reduceNacks } from '../reducers/contact-update'; @@ -7,6 +7,8 @@ import { createSubscription, reduceStateN } from './base'; +import { sigil as sigiljs, stringRenderer } from '@tlon/sigil-js'; +import { foregroundFromBackground } from '~/logic/lib/sigil'; export interface ContactState { contacts: Rolodex; @@ -51,4 +53,21 @@ export function useOurContact() { return useContact(`~${window.ship}`); } +export const favicon = () => { + let background = '#ffffff'; + const contacts = useContactState.getState().contacts; + if (Object.prototype.hasOwnProperty.call(contacts, `~${window.ship}`)) { + background = `#${uxToHex(contacts[`~${window.ship}`].color)}`; + } + const foreground = foregroundFromBackground(background); + const svg = sigiljs({ + patp: window.ship, + renderer: stringRenderer, + size: 16, + colors: [background, foreground] + }); + return svg; +}; + + export default useContactState; diff --git a/pkg/interface/src/logic/state/settings.ts b/pkg/interface/src/logic/state/settings.ts index 9762a8bfdc..3a0ab1b3eb 100644 --- a/pkg/interface/src/logic/state/settings.ts +++ b/pkg/interface/src/logic/state/settings.ts @@ -16,7 +16,7 @@ import { import { useCallback } from 'react'; import { reduceUpdate } from '../reducers/settings-update'; import airlock from '~/logic/api'; -import { getDeskSettings, Value } from '@urbit/api'; +import { Contact, getDeskSettings, Value } from '@urbit/api'; import { putEntry } from '@urbit/api/settings'; export interface ShortcutMapping { @@ -139,4 +139,11 @@ export function useTheme() { return useSettingsState(selTheme); } +// Hide is an optional second parameter for when this function is used in class components +export function useShowNickname(contact: Contact | null, hide?: boolean): boolean { + const hideState = useSettingsState(state => state.calm.hideNicknames); + const hideNicknames = typeof hide !== 'undefined' ? hide : hideState; + return Boolean(contact && contact.nickname && !hideNicknames); +} + export default useSettingsState; diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index a321e39569..5e59b19d23 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -13,11 +13,11 @@ import { useIdlingState } from '~/logic/lib/idling'; import { Sigil } from '~/logic/lib/sigil'; import { useCopy } from '~/logic/lib/useCopy'; import { - cite, daToUnix, useHovering, useShowNickname, uxToHex + cite, daToUnix, useHovering, uxToHex } from '~/logic/lib/util'; import { useContact } from '~/logic/state/contact'; import { useDark } from '~/logic/state/join'; -import useSettingsState, { selectCalmState } from '~/logic/state/settings'; +import useSettingsState, { selectCalmState, useShowNickname } from '~/logic/state/settings'; import { Dropdown } from '~/views/components/Dropdown'; import ProfileOverlay from '~/views/components/ProfileOverlay'; import { GraphContent } from '~/views/landscape/components/Graph/GraphContent'; diff --git a/pkg/interface/src/views/apps/publish/components/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/Notebook.tsx index c997bb6a35..8a4cbb458d 100644 --- a/pkg/interface/src/views/apps/publish/components/Notebook.tsx +++ b/pkg/interface/src/views/apps/publish/components/Notebook.tsx @@ -2,9 +2,9 @@ import { Box, Button, Col, Row, Text } from '@tlon/indigo-react'; import { Association, Graph, readGraph } from '@urbit/api'; import React, { ReactElement, useCallback } from 'react'; import { RouteComponentProps } from 'react-router-dom'; -import { useShowNickname } from '~/logic/lib/util'; import useContactState from '~/logic/state/contact'; import useGroupState from '~/logic/state/group'; +import { useShowNickname } from '~/logic/state/settings'; import airlock from '~/logic/api'; import { NotebookPosts } from './NotebookPosts'; import useHarkState from '~/logic/state/hark'; diff --git a/pkg/interface/src/views/components/Author.tsx b/pkg/interface/src/views/components/Author.tsx index b9007c3ca7..c0f7231315 100644 --- a/pkg/interface/src/views/components/Author.tsx +++ b/pkg/interface/src/views/components/Author.tsx @@ -3,10 +3,10 @@ import moment from 'moment'; import React, { ReactElement, ReactNode } from 'react'; import { Sigil } from '~/logic/lib/sigil'; import { useCopy } from '~/logic/lib/useCopy'; -import { cite, useShowNickname, uxToHex } from '~/logic/lib/util'; +import { cite, uxToHex } from '~/logic/lib/util'; import { useContact } from '~/logic/state/contact'; import { useDark } from '~/logic/state/join'; -import useSettingsState, { selectCalmState } from '~/logic/state/settings'; +import useSettingsState, { selectCalmState, useShowNickname } from '~/logic/state/settings'; import { PropFunc } from '~/types'; import ProfileOverlay from './ProfileOverlay'; import Timestamp from './Timestamp'; diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx index ed8d2b2499..ea431485ac 100644 --- a/pkg/interface/src/views/components/MentionText.tsx +++ b/pkg/interface/src/views/components/MentionText.tsx @@ -2,8 +2,9 @@ import { Text } from '@tlon/indigo-react'; import { Contact, Content, Group } from '@urbit/api'; import React from 'react'; import { referenceToPermalink } from '~/logic/lib/permalinks'; -import { cite, deSig, useShowNickname } from '~/logic/lib/util'; +import { cite, deSig } from '~/logic/lib/util'; import { useContact } from '~/logic/state/contact'; +import { useShowNickname } from '~/logic/state/settings'; import { PropFunc } from '~/types'; import ProfileOverlay from '~/views/components/ProfileOverlay'; import RichText from '~/views/components/RichText'; diff --git a/pkg/interface/src/views/components/ProfileOverlay.tsx b/pkg/interface/src/views/components/ProfileOverlay.tsx index 803b124f9f..7e858ae322 100644 --- a/pkg/interface/src/views/components/ProfileOverlay.tsx +++ b/pkg/interface/src/views/components/ProfileOverlay.tsx @@ -19,9 +19,8 @@ import { getRelativePosition } from '~/logic/lib/relativePosition'; import { Sigil } from '~/logic/lib/sigil'; import { useCopy } from '~/logic/lib/useCopy'; import { useOutsideClick } from '~/logic/lib/useOutsideClick'; -import { useShowNickname } from '~/logic/lib/util'; import { useContact } from '~/logic/state/contact'; -import useSettingsState, { SettingsState } from '~/logic/state/settings'; +import useSettingsState, { SettingsState, useShowNickname } from '~/logic/state/settings'; import { Portal } from './Portal'; import { ProfileStatus } from './ProfileStatus'; import RichText from './RichText';