urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2025-01-05 11:09:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: improve memoization and event listening of components

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-06-15 11:57:26 +10:00
parent 02632950be
commit 995a35cd76
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
3 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pkg/interface/src/views/components/GroupLink.tsx
View File

@ -1,5 +1,5 @@
import { Box, Col, Icon, Row, Text } from '@tlon/indigo-react';
import React, { ReactElement } from 'react';
import React, { ReactElement, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { useModal } from '~/logic/lib/useModal';
import useMetadataState, { usePreview } from '~/logic/state/metadata';
@ -15,9 +15,10 @@ export function GroupLink(
): ReactElement {
const { resource, ...rest } = props;
const name = resource.slice(6);
const associations = useMetadataState(state => state.associations);
const joined = useMetadataState(
useCallback(s => resource in s.associations.groups, [resource])
);
const history = useHistory();
const joined = resource in associations.groups;
const { modal, showModal } = useModal({
modal: <JoinGroup autojoin={name} />

10
pkg/interface/src/views/components/ProfileOverlay.tsx
View File

@ -9,6 +9,7 @@ import {
Text
} from '@tlon/indigo-react';
import { cite, uxToHex } from '@urbit/api';
import shallow from 'zustand/shallow';
import _ from 'lodash';
import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';
@ -20,7 +21,7 @@ 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 from '~/logic/state/settings';
import useSettingsState, { SettingsState } from '~/logic/state/settings';
import { Portal } from './Portal';
import { ProfileStatus } from './ProfileStatus';
import RichText from './RichText';
@ -40,6 +41,8 @@ type ProfileOverlayProps = BoxProps & {
color?: string;
};
const selSettings = (s: SettingsState) => [s.calm.hideAvatars, s.calm.hideNicknames];
const ProfileOverlay = (props: ProfileOverlayProps) => {
const {
ship,
@ -53,8 +56,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
const history = useHistory();
const outerRef = useRef<HTMLDivElement>(null);
const innerRef = useRef<HTMLDivElement>(null);
const hideAvatars = useSettingsState(state => state.calm.hideAvatars);
const hideNicknames = useSettingsState(state => state.calm.hideNicknames);
const [hideAvatars, hideNicknames] = useSettingsState(selSettings, shallow);
const isOwn = useMemo(() => window.ship === ship, [ship]);
const { copyDisplay, doCopy, didCopy } = useCopy(`~${ship}`);
@ -128,7 +130,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
return (
<Box ref={outerRef} {...rest} onClick={setOpen} cursor="pointer">
<VisibilitySensor onChange={setVisible}>
<VisibilitySensor active={open} onChange={setVisible}>
{children}
</VisibilitySensor>
{ open && (

5
pkg/interface/src/views/components/RemoteContent.tsx
View File

@ -47,6 +47,7 @@ class RemoteContent extends Component<RemoteContentProps, RemoteContentState> {
private fetchController: AbortController | undefined;
containerRef: HTMLDivElement | null = null;
private saving = false;
private isOembed = false;
constructor(props) {
super(props);
this.state = {
@ -60,6 +61,7 @@ class RemoteContent extends Component<RemoteContentProps, RemoteContentState> {
this.wrapInLink = this.wrapInLink.bind(this);
this.onError = this.onError.bind(this);
this.toggleArrow = this.toggleArrow.bind(this);
this.isOembed = hasProvider(props.url);
}
save = () => {
@ -204,7 +206,6 @@ return;
const isImage = IMAGE_REGEX.test(url);
const isAudio = AUDIO_REGEX.test(url);
const isVideo = VIDEO_REGEX.test(url);
const isOembed = hasProvider(url);
const isTranscluded = () => {
return transcluded;
@ -315,7 +316,7 @@ return;
: null}
</>
);
} else if (isOembed && remoteContentPolicy.oembedShown) {
} else if (this.isOembed && remoteContentPolicy.oembedShown) {
if (!this.state.embed || this.state.embed?.html === '') {
this.loadOembed();
}