ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-09-21 07:28:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface/views: ts lint

Browse Source
This commit is contained in:
Matilde Park 2021-05-13 18:39:54 -04:00
parent 0ec0aa4f82
commit ec632c7b17
46 changed files with 142 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/views/apps/chat/components/ChatInput.tsx
View File

@ -226,7 +226,9 @@ export class ChatInput extends Component<ChatInputProps, ChatInputState> {
}
}
// @ts-ignore withLocalState prop passing weirdness
export default withLocalState<Omit<ChatInputProps, keyof IuseStorage>, 'hideAvatars', ChatInput>(
// @ts-ignore withLocalState prop passing weirdness
withStorage<ChatInputProps, ChatInput>(ChatInput, { accept: 'image/*' }),
['hideAvatars']
);

3
pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
View File

@ -251,8 +251,7 @@ function ChatMessage(props: ChatMessageProps) {
let onDelete = props?.onDelete ?? (() => {});
const transcluded = props?.transcluded ?? 0;
const renderSigil = props.renderSigil ?? (Boolean(nextMsg && msg.author !== nextMsg.author) ||
!nextMsg ||
msg.number === 1
!nextMsg
);
const ourMention = msg?.contents?.some((e: MentionContent) => {

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

@ -136,6 +136,7 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
}
return (
// @ts-ignore
<Col {...bind} height="100%" overflow="hidden" position="relative">
<ShareProfile
our={ourContact}

2
pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
View File

@ -239,6 +239,7 @@ class ChatWindow extends Component<
};
return (
// @ts-ignore
<ChatMessage
key={index.toString()}
ref={ref}
@ -281,6 +282,7 @@ class ChatWindow extends Component<
origin='bottom'
style={virtScrollerStyle}
onBottomLoaded={this.onBottomLoaded}
// @ts-ignore paging @liam-fitzgerald on virtualscroller props
onScroll={this.onScroll}
data={graph}
size={graph.size}

3
pkg/interface/src/views/apps/launch/components/Groups.tsx
View File

@ -64,7 +64,6 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
unreads={unreadCount}
path={group?.group}
title={group.metadata.title}
picture={group.metadata.picture}
/>
);
})}
@ -96,7 +95,7 @@ function Group(props: GroupProps) {
.diff(moment()))
.as('days'))) || 0;
return (
<Tile ref={anchorRef} position="relative" bg={isTutorialGroup ? 'lightBlue' : undefined} to={`/~landscape${path}`} gridColumnStart={first ? '1' : null}>
<Tile ref={anchorRef} position="relative" bg={isTutorialGroup ? 'lightBlue' : undefined} to={`/~landscape${path}`} gridColumnStart={first ? 1 : null}>
<Col height="100%" justifyContent="space-between">
<Text>{title}</Text>
{!hideUnreads && (<Col>

1
pkg/interface/src/views/apps/launch/components/tiles.tsx
View File

@ -35,6 +35,7 @@ const Tiles = (props: TileProps): ReactElement => {
return (
<WeatherTile
key={key}
// @ts-ignore withState not passing props
api={props.api}
/>
);

2
pkg/interface/src/views/apps/launch/components/tiles/weather.tsx
View File

@ -135,7 +135,7 @@ class WeatherTile extends React.Component<WeatherTileProps, WeatherTileState> {
{locationName ? ` Current location is near ${locationName}.` : ''}
</Text>
{error}
<Box mt='auto' display='flex' marginBlockEnd={0}>
<Box mt='auto' display='flex' style={{ marginBlockEnd: '0' }}>
<BaseInput
id="location"
size={10}

10
pkg/interface/src/views/apps/links/LinkResource.tsx
View File

@ -1,4 +1,5 @@
import { Box, Center, Col, LoadingSpinner, Text } from '@tlon/indigo-react';
import { Group } from '@urbit/api';
import { Association } from '@urbit/api/metadata';
import bigInt from 'big-integer';
import React, { useEffect } from 'react';
@ -35,7 +36,7 @@ export function LinkResource(props: LinkResourceProps) {
const [, , ship, name] = rid.split('/');
const resourcePath = `${ship.slice(1)}/${name}`;
const resource = associations.graph[rid]
const resource: any = associations.graph[rid]
? associations.graph[rid]
: { metadata: {} };
const groups = useGroupState(state => state.groups);
@ -62,13 +63,14 @@ export function LinkResource(props: LinkResourceProps) {
path={relativePath('')}
render={(props) => {
return (
// @ts-ignore
<LinkWindow
key={rid}
association={resource}
resource={resourcePath}
graph={graph}
baseUrl={resourceUrl}
group={group}
group={group as Group}
path={resource.group}
pendingSize={Object.keys(graphTimesentMap[resourcePath] || {}).length}
api={api}
@ -110,7 +112,7 @@ export function LinkResource(props: LinkResourceProps) {
node={node}
baseUrl={resourceUrl}
association={association}
group={group}
group={group as Group}
path={resource?.group}
api={api}
mt={3}
@ -126,7 +128,7 @@ export function LinkResource(props: LinkResourceProps) {
editCommentId={editCommentId}
history={props.history}
baseUrl={`${resourceUrl}/index/${props.match.params.index}`}
group={group}
group={group as Group}
px={3}
/>
</Col>

4
pkg/interface/src/views/apps/links/LinkWindow.tsx
View File

@ -21,6 +21,7 @@ interface LinkWindowProps {
path: string;
api: GlobalApi;
pendingSize: number;
mb?: number;
}
const style = {
@ -48,6 +49,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
const { props } = this;
const { association, graph, api } = props;
const [, , ship, name] = association.resource.split('/');
// @ts-ignore Uint8Array vs. BigInt mismatch?
const node = graph.get(index);
const first = graph.peekLargest()?.[0];
const post = node?.post;
@ -58,6 +60,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
...props,
node
};
{/* @ts-ignore calling @liam-fitzgerald on Uint8Array props */}
if (this.canWrite() && index.eq(first ?? bigInt.zero)) {
return (
<React.Fragment key={index.toString()}>
@ -125,6 +128,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
return (
<Col width="100%" height="100%" position="relative">
{/* @ts-ignore calling @liam-fitzgerald on virtualscroller */}
<VirtualScroller
origin="top"
offset={0}

6
pkg/interface/src/views/apps/links/components/LinkItem.tsx
View File

@ -20,6 +20,8 @@ interface LinkItemProps {
group: Group;
path: string;
baseUrl: string;
mt?: number;
measure?: any;
}
export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<HTMLDivElement>): ReactElement => {
const {
@ -49,6 +51,7 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<H
setTimeout(() => {
console.log(remoteRef.current);
if(document.activeElement instanceof HTMLIFrameElement
// @ts-ignore forwardref prop passing
&& remoteRef?.current?.containerRef?.contains(document.activeElement)) {
markRead();
}
@ -100,6 +103,7 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<H
const appPath = `/ship/~${resource}`;
const unreads = useHarkState(state => state.unreads);
const commColor = (unreads.graph?.[appPath]?.[`/${index}`]?.unreads ?? 0) > 0 ? 'blue' : 'gray';
// @ts-ignore hark will have to choose between sets and numbers
const isUnread = unreads.graph?.[appPath]?.['/']?.unreads?.has(node.post.index);
return (
@ -135,8 +139,10 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<H
<>
<RemoteContent
ref={(r) => {
// @ts-ignore RemoteContent weirdness
remoteRef.current = r;
}}
// @ts-ignore RemoteContent weirdness
renderUrl={false}
url={href}
text={contents[0].text}

3
pkg/interface/src/views/apps/links/components/LinkSubmit.tsx
View File

@ -12,6 +12,7 @@ interface LinkSubmitProps {
api: GlobalApi;
name: string;
ship: string;
parentIndex?: any;
}
const LinkSubmit = (props: LinkSubmitProps) => {
@ -157,6 +158,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
return (
<>
{/* @ts-ignore archaic event type mismatch */}
<Box
flexShrink={0}
position='relative'
@ -194,6 +196,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
onBlur={() => [setUrlFocused(false), setSubmitFocused(false)]}
onFocus={() => [setUrlFocused(true), setSubmitFocused(true)]}
spellCheck="false"
// @ts-ignore archaic event type mismatch error
onPaste={onPaste}
onKeyPress={onKeyPress}
value={linkValue}

11
pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
View File

@ -49,7 +49,7 @@ function TranscludedLinkNode(props: {
<Author
pt='12px'
pl='12px'
size='24'
size={24}
sigilPadding='6'
showImage
ship={node.post.author}
@ -121,7 +121,7 @@ function TranscludedComment(props: {
<Author
pt='12px'
pl='12px'
size='24'
size={24}
sigilPadding='6'
showImage
ship={comment.post.author}
@ -175,7 +175,7 @@ function TranscludedPublishNode(props: {
<Author
pl='12px'
pt='12px'
size='24'
size={24}
sigilPadding='6'
showImage
ship={post.post.author}
@ -235,7 +235,7 @@ export function TranscludedPost(props: {
<Author
pt='12px'
pl='12px'
size='24'
size={24}
sigilPadding='6'
showImage
ship={post.author}
@ -273,7 +273,7 @@ export function TranscludedNode(props: {
if (
typeof node?.post === "string" &&
assoc.metadata.config.graph === "chat"
(assoc.metadata.config as GraphConfig).graph === "chat"
) {
return (
<Box
@ -296,6 +296,7 @@ export function TranscludedNode(props: {
renderSigil
transcluded={transcluded + 1}
className="items-top cf hide-child"
// @ts-ignore isn't forwarding props to memo
association={assoc}
msg={node.post}
fontSize={0}

17
pkg/interface/src/views/apps/permalinks/embed.tsx
View File

@ -1,20 +1,12 @@
import {
BaseAnchor, Box,
Center, Col, Icon, Row, Text
} from "@tlon/indigo-react";
import { Association, GraphNode, resourceFromPath } from '@urbit/api';
import { BaseAnchor, Box, Center, Col, Icon, Row, Text } from "@tlon/indigo-react";
import { Association, GraphNode, resourceFromPath, GraphConfig } from '@urbit/api';
import React, { useCallback, useEffect, useState } from "react";
import { useHistory, useLocation } from 'react-router-dom';
import GlobalApi from '~/logic/api/global';
import {
getPermalinkForGraph, GraphPermalink as IGraphPermalink, parsePermalink
} from '~/logic/lib/permalinks';
import { getModuleIcon } from "~/logic/lib/util";
import { getModuleIcon, GraphModule } from "~/logic/lib/util";
import { useVirtualResizeProp } from "~/logic/lib/virtualContext";
import useGraphState from "~/logic/state/graph";
import useMetadataState from "~/logic/state/metadata";
@ -129,7 +121,7 @@ function GraphPermalink(
<PermalinkDetails
known
showTransclusion={showTransclusion}
icon={getModuleIcon(association.metadata.config.graph)}
icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)}
title={association.metadata.title}
permalink={permalink}
/>
@ -197,6 +189,7 @@ export function PermalinkEmbed(props: {
transcluded: number;
showOurContact?: boolean;
full?: boolean;
pending?: any;
}) {
const permalink = parsePermalink(props.link);

2
pkg/interface/src/views/apps/profile/components/SetStatus.tsx
View File

@ -39,7 +39,7 @@ export function SetStatus(props: any) {
ref={inputRef}
onChange={onStatusChange}
value={_status}
autocomplete='off'
autoComplete='off'
width='75%'
mr={2}
onKeyPress={(evt) => {

5
pkg/interface/src/views/apps/publish/PublishResource.tsx
View File

@ -10,10 +10,13 @@ type PublishResourceProps = StoreState & {
association: Association;
api: GlobalApi;
baseUrl: string;
history?: any;
match?: any;
location?: any;
};
export function PublishResource(props: PublishResourceProps) {
const { association, api, baseUrl, notebooks } = props;
const { association, api, baseUrl } = props;
const rid = association.resource;
const [, , ship, book] = rid.split('/');
const location = useLocation();

1
pkg/interface/src/views/apps/publish/components/NotePreview.tsx
View File

@ -69,6 +69,7 @@ export function NotePreview(props: NotePreviewProps) {
const [rev, title, body, content] = getLatestRevision(node);
const appPath = `/ship/${props.host}/${props.book}`;
const unreads = useHarkState(state => state.unreads);
// @ts-ignore hark will have to choose between sets and numbers
const isUnread = unreads.graph?.[appPath]?.['/']?.unreads?.has(`/${noteId}/1/1`);
const snippet = getSnippet(body);

3
pkg/interface/src/views/apps/publish/components/Notebook.tsx
View File

@ -1,5 +1,5 @@
import { Box, Col, Row, Text } from '@tlon/indigo-react';
import { Association, Graph, Unreads } from '@urbit/api';
import { Association, Graph } from '@urbit/api';
import React, { ReactElement } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { useShowNickname } from '~/logic/lib/util';
@ -14,7 +14,6 @@ interface NotebookProps {
association: Association;
baseUrl: string;
rootUrl: string;
unreads: Unreads;
}
export function Notebook(props: NotebookProps & RouteComponentProps): ReactElement | null {

2
pkg/interface/src/views/apps/publish/components/NotebookPosts.tsx
View File

@ -15,7 +15,6 @@ interface NotebookPostsProps {
}
export function NotebookPosts(props: NotebookPostsProps) {
const contacts = useContactState(state => state.contacts);
return (
<Col>
{Array.from(props.graph || []).map(
@ -25,7 +24,6 @@ export function NotebookPosts(props: NotebookPostsProps) {
key={date.toString()}
host={props.host}
book={props.book}
contact={contacts[`~${node.post.author}`]}
node={node}
baseUrl={props.baseUrl}
group={props.group}

2
pkg/interface/src/views/apps/settings/components/lib/Debug.tsx
View File

@ -57,7 +57,9 @@ const StoreDebugger = (props: StoreDebuggerProps) => {
placeholder="Drill Down"
width="100%"
onKeyUp={(event) => {
// @ts-ignore clearly value is in eventtarget
if (event.target.value) {
// @ts-ignore clearly value is in eventtarget
tryFilter(event.target.value);
} else {
setFilter('');

4
pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
View File

@ -98,7 +98,9 @@ export default function DisplayForm(props: DisplayFormProps) {
Customize visual interfaces across your Landscape
</Text>
</Col>
<BackgroundPicker api={api}
<BackgroundPicker
api={api}
bgType={bgType}
/>
<Label>Theme</Label>
<Radio name="theme" id="light" label="Light" />

1
pkg/interface/src/views/apps/term/app.tsx
View File

@ -78,6 +78,7 @@ class TermApp extends Component {
border={['0','1']}
cursor='text'
>
{/* @ts-ignore declare props in later pass */}
<History log={this.state.lines.slice(0, -1)} />
<Input
ship={this.props.ship}

2
pkg/interface/src/views/apps/term/components/history.tsx
View File

@ -21,7 +21,9 @@ export class History extends Component {
<Box
mt='auto'
>
{/* @ts-ignore declare props in later pass */}
{this.props.log.map((line, i) => {
// @ts-ignore react memo not passing props
return <Line key={i} line={line} />;
})}
</Box>

8
pkg/interface/src/views/apps/term/components/input.tsx
View File

@ -15,10 +15,11 @@ export class Input extends Component {
componentDidUpdate() {
if (
!document.activeElement == document.body
|| document.activeElement == this.inputRef.current
document.activeElement == this.inputRef.current
) {
// @ts-ignore ref type issues
this.inputRef.current.focus();
// @ts-ignore ref type issues
this.inputRef.current.setSelectionRange(this.props.cursor, this.props.cursor);
}
}
@ -26,7 +27,7 @@ export class Input extends Component {
keyPress(e) {
const key = e.key;
// let paste and leap events pass
if ((e.getModifierState('Control') || event.getModifierState('Meta'))
if ((e.getModifierState('Control') || e.getModifierState('Meta'))
&& (e.key === 'v' || e.key === '/')) {
return;
}
@ -115,6 +116,7 @@ belt = { met: 'bac' };
onKeyDown={this.keyPress}
onClick={this.click}
onPaste={this.paste}
// @ts-ignore indigo-react doesn't let us pass refs
ref={this.inputRef}
defaultValue="connecting..."
value={prompt}

2
pkg/interface/src/views/apps/term/components/line.tsx
View File

@ -1,6 +1,6 @@
import { Text } from '@tlon/indigo-react';
import React from 'react';
// @ts-ignore line isn't in props?
export default React.memo(({ line }) => {
// line body to jsx
// NOTE lines are lists of characters that might span multiple codepoints

2
pkg/interface/src/views/components/CommentItem.tsx
View File

@ -46,7 +46,7 @@ export function CommentItem(props: CommentItemProps) {
const children = Array.from(revs.children);
const indices = [];
for (const child in children) {
const node = children[child];
const node = children[child] as any;
if (!node?.post || typeof node.post !== 'string') {
indices.push(node.post?.index);
}

1
pkg/interface/src/views/components/DropdownSearch.tsx
View File

@ -129,6 +129,7 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>): ReactElement {
return (
<Box {...rest} position="relative" zIndex={9}>
{ /* @ts-ignore investigate onblur on styled-system component later */}
<Input
ref={textarea}
onChange={changeCallback}

3
pkg/interface/src/views/components/GroupSearch.tsx
View File

@ -6,6 +6,7 @@ import {
ErrorLabel, Icon, Label,
Row, Text
} from '@tlon/indigo-react';
import { OpenPolicy } from '@urbit/api';
import { Association } from '@urbit/api/metadata';
import { FieldArray, useFormikContext } from 'formik';
import _ from 'lodash';
@ -100,7 +101,7 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
return Object.values(
Object.keys(associations.groups)
.filter(
e => groupState?.[e]?.policy?.open
e => (groupState?.[e]?.policy as OpenPolicy)?.open
)
.reduce((obj, key) => {
obj[key] = associations.groups[key];

2
pkg/interface/src/views/components/ImageInput.tsx
View File

@ -13,7 +13,7 @@ import useStorage from '~/logic/lib/useStorage';
type ImageInputProps = Parameters<typeof Box>[0] & {
id: string;
label: string;
label?: string;
placeholder?: string;
};

7
pkg/interface/src/views/components/Invite/Group.tsx
View File

@ -10,7 +10,7 @@ import {
Metadata, MetadataUpdatePreview,
resourceFromPath
} from '@urbit/api';
import { GraphConfig } from '@urbit/api/dist';
import { GraphConfig } from '@urbit/api';
import _ from 'lodash';
import React, { ReactElement, ReactNode, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
@ -217,6 +217,7 @@ function InviteActions(props: {
const hideJoin = useCallback(async (e) => {
if(status?.progress === 'done') {
set(s => {
// @ts-ignore investigate zustand types
delete s.pendingJoin[resource]
});
e.stopPropagation();
@ -245,14 +246,14 @@ function InviteActions(props: {
color="blue"
height={4}
backgroundColor="white"
onClick={inviteAccept}
onClick={inviteAccept as any}
>
Accept
</StatelessAsyncButton>
<StatelessAsyncButton
height={4}
backgroundColor="white"
onClick={inviteDecline}
onClick={inviteDecline as any}
>
Decline
</StatelessAsyncButton>

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

@ -218,7 +218,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
textOverflow='ellipsis'
overflow='hidden'
whiteSpace='pre'
marginBottom={0}
mb={0}
disableRemoteContent
gray
title={contact?.status ? contact.status : ''}

2
pkg/interface/src/views/components/ProfileStatus.tsx
View File

@ -41,7 +41,7 @@ export const ProfileStatus = (props) => {
<Input
onChange={onStatusChange}
value={_status}
autocomplete='off'
autoComplete='off'
width='100%'
placeholder='Set Status'
onKeyPress={(evt) => {

6
pkg/interface/src/views/components/ReconnectButton.tsx
View File

@ -8,15 +8,15 @@ const ReconnectButton = ({ connection, subscription }) => {
if (connectedStatus === 'disconnected') {
return (
<Button onClick={reconnect} borderColor='red' px={2}>
<Text display={['none', 'inline']} textAlign='middle' color='red'>Reconnect</Text>
<Text display={['none', 'inline']} textAlign='center' color='red'>Reconnect</Text>
<Text color='red'> ↻</Text>
</Button>
);
} else if (connectedStatus === 'reconnecting') {
return (
<Button borderColor='yellow' px={2} onClick={() => {}} cursor='default'>
<LoadingSpinner pr={['0','2']} foreground='scales.yellow60' background='scales.yellow30' />
<Text display={['none', 'inline']} textAlign='middle' color='yellow'>Reconnecting</Text>
<LoadingSpinner foreground='scales.yellow60' background='scales.yellow30' />
<Text display={['none', 'inline']} pl={['0','2']} textAlign='center' color='yellow'>Reconnecting</Text>
</Button>
);
} else {

25
pkg/interface/src/views/components/RichText.tsx
View File

@ -24,7 +24,7 @@ const DISABLED_BLOCK_TOKENS = [
const DISABLED_INLINE_TOKENS = [];
type RichTextProps = ReactMarkdownProps & {
api: GlobalApi;
api?: GlobalApi;
disableRemoteContent?: boolean;
contact?: Contact;
group?: Group;
@ -34,6 +34,20 @@ type RichTextProps = ReactMarkdownProps & {
color?: string;
children?: any;
width?: string;
display?: string[] | string;
mono?: boolean;
mb?: number;
minWidth?: number | string;
maxWidth?: number | string;
flexShrink?: number;
textOverflow?: string;
overflow?: string;
whiteSpace?: string;
gray?: boolean;
title?: string;
py?: number;
overflowX?: any;
verticalAlign?: any;
}
const RichText = React.memo(({ disableRemoteContent = false, api, ...props }: RichTextProps) => (
@ -48,6 +62,7 @@ const RichText = React.memo(({ disableRemoteContent = false, api, ...props }: Ri
oembedShown: false
} : null;
if (!disableRemoteContent) {
// @ts-ignore RemoteContent weirdness
return <RemoteContent className="mw-100" url={linkProps.href} />;
}
@ -59,16 +74,16 @@ const RichText = React.memo(({ disableRemoteContent = false, api, ...props }: Ri
borderBottom='1px solid'
remoteContentPolicy={remoteContentPolicy}
onClick={(e) => {
e.stopPropagation();
}}
e.stopPropagation();
}}
{...linkProps}
>{linkProps.children}</Anchor>
);
},
linkReference: (linkProps) => {
linkReference: (linkProps): any => {
const linkText = String(linkProps.children[0].props.children);
if (isValidPatp(linkText)) {
return <Mention contact={props.contact || {}} group={props.group} ship={deSig(linkText)} api={api} />;
return <Mention ship={deSig(linkText)} api={api} />;
} else if(linkText.startsWith('web+urbitgraph://')) {
return (
<PermalinkEmbed

1
pkg/interface/src/views/components/Spinner.tsx
View File

@ -10,7 +10,6 @@ const Spinner = ({
<LoadingSpinner
foreground='black'
background='gray'
style={{ flexShrink: 0 }}
/>
<Text display='inline-block' ml={2} verticalAlign='middle' flexShrink={0}>{text}</Text>
</Text>

4
pkg/interface/src/views/components/StatusBar.tsx
View File

@ -73,7 +73,7 @@ const StatusBar = (props) => {
px={3}
pb={3}
>
<Row collapse>
<Row>
<Button
width='32px'
borderColor='lightGray'
@ -108,7 +108,7 @@ const StatusBar = (props) => {
subscription={props.subscription}
/>
</Row>
<Row justifyContent='flex-end' collapse>
<Row justifyContent='flex-end'>
<StatusBarItem
width='32px'
mr={2}

11
pkg/interface/src/views/components/leap/Omnibox.tsx
View File

@ -100,8 +100,8 @@ export function Omnibox(props: OmniboxProps): ReactElement {
}
Mousetrap.bind('escape', props.toggle);
const touchstart = new Event('touchstart');
inputRef?.current?.input?.dispatchEvent(touchstart);
inputRef?.current?.input?.focus();
inputRef?.current?.dispatchEvent(touchstart);
inputRef?.current?.focus();
return () => {
Mousetrap.unbind('escape');
setQuery('');
@ -173,6 +173,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
const totalLength = flattenedResults.length;
if (selected.length) {
const currentIndex = flattenedResults.indexOf(
// @ts-ignore unclear how to give this spread a return signature
...flattenedResults.filter((e) => {
return e.link === selected[1];
})
@ -194,6 +195,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
const flattenedResults = Array.from(results.values()).flat();
if (selected.length) {
const currentIndex = flattenedResults.indexOf(
// @ts-ignore unclear how to give this spread a return signature
...flattenedResults.filter((e) => {
return e.link === selected[1];
})
@ -325,6 +327,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
{categoryResults.sort(sortResults).map((result, i2) => (
<OmniboxResult
key={i2}
// @ts-ignore withHovering doesn't pass props
icon={result.app}
text={result.title}
subtext={result.host}
@ -365,8 +368,10 @@ export function Omnibox(props: OmniboxProps): ReactElement {
omniboxRef.current = el;
}}
>
{ /* @ts-ignore investigate zustand types */ }
<OmniboxInput
ref={(el) => {
// @ts-ignore investigate refs
inputRef.current = el;
}}
control={e => control(e)}
@ -380,5 +385,5 @@ export function Omnibox(props: OmniboxProps): ReactElement {
</Portal>
);
}
// @ts-ignore investigate zustand types
export default withLocalState(Omnibox, ['toggleOmnibox', 'omniboxShown']);

8
pkg/interface/src/views/components/leap/OmniboxResult.tsx
View File

@ -4,6 +4,7 @@ import React, { Component, ReactElement } from 'react';
import defaultApps from '~/logic/lib/default-apps';
import Sigil from '~/logic/lib/sigil';
import { cite, uxToHex } from '~/logic/lib/util';
import { IconRef } from '~/types/util';
import withState from '~/logic/lib/withState';
import useContactState from '~/logic/state/contact';
import useHarkState from '~/logic/state/hark';
@ -18,6 +19,7 @@ interface OmniboxResultProps {
link: string;
navigate: () => void;
notificationsCount: number;
runtimeLag: any;
selected: string;
setSelection: () => void;
subtext: string;
@ -50,6 +52,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
props.selected === props.link
&& this.result.current
) {
// @ts-ignore ref is forwarded as never, investigate later
this.result.current.scrollIntoView({ block: 'nearest' });
}
}
@ -63,7 +66,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
notificationsCount: number,
text: string,
color: string
): (typeof Icon) {
): (any) {
const iconFill =
(this.state.hovered || selected === link) ? 'white' : 'black';
const bulletFill =
@ -89,7 +92,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
<Icon
display='inline-block'
verticalAlign='middle'
icon={icon}
icon={icon as IconRef}
mr={2}
size='18px'
color={iconFill}
@ -254,6 +257,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
onClick={navigate}
width='100%'
justifyContent='space-between'
// @ts-ignore indigo-react doesn't allow us to pass refs
ref={this.result}
>
<Box

18
pkg/interface/src/views/components/withPropsChecker.tsx
View File

@ -1,18 +0,0 @@
import deep_diff from 'deep-diff';
import React, { Component, useEffect, useRef } from 'react';
const withPropsChecker = (WrappedComponent: Component) => {
return (props: any) => {
const prevProps = useRef(props);
useEffect(() => {
const diff = deep_diff.diff(prevProps.current, props);
if (diff) {
console.log(diff);
}
prevProps.current = props;
});
return <WrappedComponent {...props} />;
};
};
export default withPropsChecker;

12
pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
View File

@ -9,7 +9,7 @@ import { Content, ReferenceContent } from '@urbit/api';
import _ from 'lodash';
import {
BlockContent, Content as AstContent, Parent, Root
} from 'mdast';
} from 'ts-mdast';
import React from 'react';
import GlobalApi from '~/logic/api/global';
import { referenceToPermalink } from '~/logic/lib/permalinks';
@ -350,12 +350,18 @@ const renderers = {
'graph-mention': ({ ship }) => <Mention api={{} as any} ship={ship} />,
image: ({ url }) => (
<Box mt="1" mb="2" flexShrink={0}>
<RemoteContent key={url} url={url} />
<RemoteContent
// @ts-ignore RemoteContent weirdness
key={url} url={url}
/>
</Box>
),
'graph-url': ({ url }) => (
<Box mt={1} mb={2} flexShrink={0}>
<RemoteContent key={url} url={url} />
<RemoteContent
// @ts-ignore RemoteContent weirdness
key={url} url={url}
/>
</Box>
),
'graph-reference': ({ api, reference, transcluded }) => {

13
pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx
View File

@ -1,5 +1,6 @@
import { Box, Col } from '@tlon/indigo-react';
import { Association, Graph, GraphNode, Group } from '@urbit/api';
import { History } from 'history';
import bigInt from 'big-integer';
import React from 'react';
import { withRouter } from 'react-router';
@ -26,7 +27,7 @@ interface PostFeedProps {
pendingSize: number;
}
class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
class PostFeed extends React.Component<PostFeedProps, any> {
isFetching: boolean;
constructor(props) {
super(props);
@ -36,7 +37,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
this.fetchPosts = this.fetchPosts.bind(this);
this.doNotFetch = this.doNotFetch.bind(this);
}
// @ts-ignore needs @liam-fitzgerald peek at props for virtualscroller
renderItem = React.forwardRef(({ index, scrollWindow }, ref) => {
const {
graph,
@ -57,7 +58,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
const first = graph.peekLargest()?.[0];
const post = node?.post;
const nodeIndex =
const nodeIndex =
( parentNode &&
typeof parentNode.post !== 'string'
) ? parentNode.post.index.split('/').slice(1).map((ind) => {
@ -69,6 +70,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
<React.Fragment key={index.toString()}>
<Col
key={index.toString()}
// @ts-ignore indigo-react doesn't allow us to pass refs
ref={ref}
mb={3}
width="100%"
@ -76,6 +78,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
>
<PostItem
key={parentNode.post.index}
// @ts-ignore withHovering prop pass is broken?
parentPost={grandparentNode?.post}
node={parentNode}
parentNode={grandparentNode}
@ -92,6 +95,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
/>
</Col>
<PostItem
// @ts-ignore withHovering prop pass is broken?
node={node}
graphPath={graphPath}
association={association}
@ -110,8 +114,10 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
}
return (
// @ts-ignore indigo-react doesn't allow us to pass refs
<Box key={index.toString()} ref={ref}>
<PostItem
// @ts-ignore withHovering prop pass is broken?
node={node}
graphPath={graphPath}
association={association}
@ -179,6 +185,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
data={graph}
averageHeight={106}
size={graph.size}
totalSize={graph.size}
style={virtualScrollerStyle}
pendingSize={pendingSize}
renderer={this.renderItem}

2
pkg/interface/src/views/landscape/components/Home/Post/PostInput.tsx
View File

@ -120,7 +120,7 @@ const PostInput = (props: PostInputProps): ReactElement | null => {
fontSize={1}
minHeight="62px"
fontFamily={code ? 'mono' : 'sans'}
lineNumber={3}
rows={3}
style={{
resize: 'vertical'
}}

1
pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.tsx
View File

@ -15,6 +15,7 @@ interface PostHeaderProps {
association: Association;
isReply: boolean;
showTimestamp: boolean;
graphPath: any;
}
const PostHeader = (props: PostHeaderProps): ReactElement => {

4
pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx
View File

@ -1,4 +1,5 @@
import { Box, Col, Text } from '@tlon/indigo-react';
import { GraphNode } from '@urbit/api';
import bigInt from 'big-integer';
import React from 'react';
import { resourceFromPath } from '~/logic/lib/group';
@ -37,7 +38,7 @@ export default function PostReplies(props) {
return bigInt(ind);
});
let node;
let node: GraphNode;
let parentNode;
nodeIndex.forEach((i, idx) => {
if (!graph) {
@ -69,6 +70,7 @@ export default function PostReplies(props) {
<Box mt={3} width="100%" alignItems="center">
<PostItem
key={node.post.index}
// @ts-ignore withHovering prop pass is broken?
node={node}
graphPath={graphPath}
association={association}

2
pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx
View File

@ -1,5 +1,6 @@
import { Box, Col, Text } from '@tlon/indigo-react';
import { Association, Graph, Group } from '@urbit/api';
import { History } from 'history';
import React, { ReactElement } from 'react';
import GlobalApi from '~/logic/api/global';
import { Loading } from '~/views/components/Loading';
@ -15,6 +16,7 @@ interface PostTimelineProps {
group: Group;
pendingSize: number;
vip: string;
history?: History;
}
const PostTimeline = (props: PostTimelineProps): ReactElement => {

2
pkg/interface/src/views/landscape/components/NewGroup.tsx
View File

@ -31,7 +31,7 @@ interface NewGroupProps {
api: GlobalApi;
}
export function NewGroup(props: NewGroupProps & RouteComponentProps): ReactElement {
export function NewGroup(props: NewGroupProps): ReactElement {
const { api } = props;
const history = useHistory();
const initialValues: FormSchema = {

7
pkg/interface/src/views/landscape/components/Sidebar/SidebarList.tsx
View File

@ -81,12 +81,15 @@ export function SidebarList(props: {
const cycleChannels = useCallback((backward: boolean) => {
const idx = ordered.findIndex(s => s === selected);
const offset = backward ? -1 : 1
const offset = backward ? -1 : 1
const newIdx = modulo(idx+offset, ordered.length - 1);
const { metadata, resource } = associations[ordered[newIdx]];
const joined = graphKeys.has(resource.slice(7));
const path = getResourcePath(workspace, resource, joined, metadata.config.graph)
let path = '/~landscape/home';
if ('graph' in metadata.config) {
path = getResourcePath(workspace, resource, joined, metadata.config.graph);
}
history.push(path)
}, [selected, history.push]);