mirror of
https://github.com/urbit/shrub.git
synced 2024-12-19 16:51:42 +03:00
Merge pull request #4899 from urbit/mp/landscape/ts
landscape: zero typescript errors
This commit is contained in:
matildepark
GitHub
commit
6423b34f1e
21
pkg/interface/package-lock.json
generated
21
pkg/interface/package-lock.json
generated
@ -1551,6 +1551,15 @@
|
||||
"integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/mdast": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.3.tgz",
|
||||
"integrity": "sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/unist": "*"
|
||||
}
|
||||
},
|
||||
"@types/minimatch": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
|
||||
@ -10811,6 +10820,16 @@
|
||||
"resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
|
||||
"integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
|
||||
},
|
||||
"ts-mdast": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-mdast/-/ts-mdast-1.0.0.tgz",
|
||||
"integrity": "sha512-FmT5GbMU629/ty64741v7TdO8jm5xW09okr2VNExkLuRk5ngjKIDdn/woTB8lDtcgCMRS8lUNubImen0MkdF6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/mdast": "^3.0.3",
|
||||
"@types/unist": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
|
||||
@ -11313,7 +11332,6 @@
|
||||
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
|
||||
"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"is-extendable": "^0.1.0"
|
||||
}
|
||||
@ -11380,7 +11398,6 @@
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
|
||||
"integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"kind-of": "^3.0.2"
|
||||
}
|
||||
|
||||
@ -91,6 +91,7 @@
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"sass": "^1.32.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"ts-mdast": "^1.0.0",
|
||||
"typescript": "^4.2.4",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
|
||||
@ -6,13 +6,15 @@ interface IFormGroupContext {
|
||||
onDirty: (id: string, touched: boolean) => void;
|
||||
onErrors: (id: string, errors: boolean) => void;
|
||||
submitAll: () => Promise<any>;
|
||||
addReset: (id: string, r: any) => any;
|
||||
}
|
||||
|
||||
const fallback: IFormGroupContext = {
|
||||
addSubmit: () => {},
|
||||
onDirty: () => {},
|
||||
onErrors: () => {},
|
||||
submitAll: () => Promise.resolve()
|
||||
submitAll: () => Promise.resolve(),
|
||||
addReset: () => {}
|
||||
};
|
||||
|
||||
export const FormGroupContext = React.createContext(fallback);
|
||||
|
||||
@ -89,6 +89,7 @@ export function describeNotification(notification: IndexedNotification) {
|
||||
return `New comment${plural ? 's' : ''} on`;
|
||||
case 'note':
|
||||
return `New Note${plural ? 's' : ''} in`;
|
||||
// @ts-ignore
|
||||
case 'edit-note':
|
||||
return `updated ${pluralize('note', plural)} in`;
|
||||
case 'mention':
|
||||
@ -105,6 +106,7 @@ export function describeNotification(notification: IndexedNotification) {
|
||||
if('group' in notification.index) {
|
||||
return group(notification.index.group);
|
||||
} else if('graph' in notification.index) {
|
||||
// @ts-ignore needs better type guard
|
||||
const contents = notification.notification?.contents?.graph ?? [] as Post[];
|
||||
return graph(notification.index.graph, contents.length > 1, _.uniq(_.map(contents, 'author')).length === 1)
|
||||
|
||||
|
||||
@ -76,7 +76,7 @@ export function editPost(rev: number, noteId: BigInteger, title: string, body: s
|
||||
return nodes;
|
||||
}
|
||||
|
||||
export function getLatestRevision(node: GraphNode): [number, string, string, Post] {
|
||||
export function getLatestRevision(node: GraphNode): [number, string, any, Post] {
|
||||
const empty = [1, '', '', buntPost()] as [number, string, string, Post];
|
||||
const revs = node.children?.get(bigInt(1));
|
||||
if(!revs) {
|
||||
|
||||
@ -17,7 +17,7 @@ interface SetStateFunc<T> {
|
||||
}
|
||||
// See microsoft/typescript#37663 for filed bug
|
||||
type SetState<T> = T extends any ? SetStateFunc<T> : never;
|
||||
export function useLocalStorageState<T>(key: string, initial: T) {
|
||||
export function useLocalStorageState<T>(key: string, initial: T): any {
|
||||
const [state, _setState] = useState(() => retrieve(key, initial));
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -462,6 +462,7 @@ export const useHovering = (): useHoveringInterface => {
|
||||
export function withHovering<T>(Component: React.ComponentType<T>) {
|
||||
return React.forwardRef((props, ref) => {
|
||||
const { hovering, bind } = useHovering();
|
||||
// @ts-ignore needs type signature on return?
|
||||
return <Component ref={ref} hovering={hovering} bind={bind} {...props} />
|
||||
})
|
||||
}
|
||||
|
||||
@ -71,6 +71,7 @@ const addGraph = (json, state: GraphState): GraphState => {
|
||||
const data = _.get(json, 'add-graph', false);
|
||||
if (data) {
|
||||
if (!('graphs' in state)) {
|
||||
// @ts-ignore investigate zustand types
|
||||
state.graphs = {};
|
||||
}
|
||||
|
||||
@ -91,6 +92,7 @@ const removeGraph = (json, state: GraphState): GraphState => {
|
||||
const data = _.get(json, 'remove-graph', false);
|
||||
if (data) {
|
||||
if (!('graphs' in state)) {
|
||||
// @ts-ignore investigate zustand types
|
||||
state.graphs = {};
|
||||
}
|
||||
const resource = data.ship + '/' + data.name;
|
||||
@ -248,7 +250,7 @@ const removePosts = (json, state: GraphState): GraphState => {
|
||||
} else {
|
||||
const child = graph.get(index[0]);
|
||||
if (child) {
|
||||
return graph.set(index[0], produce((draft) => {
|
||||
return graph.set(index[0], produce((draft: any) => {
|
||||
draft.children = _remove(draft.children, index.slice(1));
|
||||
}));
|
||||
}
|
||||
|
||||
@ -20,18 +20,26 @@ export const HarkReducer = (json: any) => {
|
||||
const graphHookData = _.get(json, 'hark-graph-hook-update', false);
|
||||
if (graphHookData) {
|
||||
reduceState<HarkState, any>(useHarkState, graphHookData, [
|
||||
// @ts-ignore investigate zustand types
|
||||
graphInitial,
|
||||
// @ts-ignore investigate zustand types
|
||||
graphIgnore,
|
||||
// @ts-ignore investigate zustand types
|
||||
graphListen,
|
||||
// @ts-ignore investigate zustand types
|
||||
graphWatchSelf,
|
||||
// @ts-ignore investigate zustand types
|
||||
graphMentions
|
||||
]);
|
||||
}
|
||||
const groupHookData = _.get(json, 'hark-group-hook-update', false);
|
||||
if (groupHookData) {
|
||||
reduceState<HarkState, any>(useHarkState, groupHookData, [
|
||||
// @ts-ignore investigate zustand types
|
||||
groupInitial,
|
||||
// @ts-ignore investigate zustand types
|
||||
groupListen,
|
||||
// @ts-ignore investigate zustand types
|
||||
groupIgnore
|
||||
]);
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@ export default class LaunchReducer {
|
||||
const weatherData: WeatherState | boolean | Record<string, never> = _.get(json, 'weather', false);
|
||||
if (weatherData) {
|
||||
useLaunchState.getState().set((state) => {
|
||||
// @ts-ignore investigate zustand types
|
||||
state.weather = weatherData;
|
||||
});
|
||||
}
|
||||
@ -27,6 +28,7 @@ export default class LaunchReducer {
|
||||
const locationData = _.get(json, 'location', false);
|
||||
if (locationData) {
|
||||
useLaunchState.getState().set((state) => {
|
||||
// @ts-ignore investigate zustand types
|
||||
state.userLocation = locationData;
|
||||
});
|
||||
}
|
||||
@ -34,6 +36,7 @@ export default class LaunchReducer {
|
||||
const baseHash = _.get(json, 'baseHash', false);
|
||||
if (baseHash) {
|
||||
useLaunchState.getState().set((state) => {
|
||||
// @ts-ignore investigate zustand types
|
||||
state.baseHash = baseHash;
|
||||
});
|
||||
}
|
||||
@ -41,6 +44,7 @@ export default class LaunchReducer {
|
||||
const runtimeLag = _.get(json, 'runtimeLag', null);
|
||||
if (runtimeLag !== null) {
|
||||
useLaunchState.getState().set(state => {
|
||||
// @ts-ignore investigate zustand types
|
||||
state.runtimeLag = runtimeLag;
|
||||
});
|
||||
}
|
||||
|
||||
@ -83,15 +83,18 @@ export const createState = <T extends {}>(
|
||||
properties: T,
|
||||
blacklist: (keyof BaseState<T> | keyof T)[] = []
|
||||
): UseStore<T & BaseState<T>> => create<T & BaseState<T>>(persist<T & BaseState<T>>((set, get) => ({
|
||||
// @ts-ignore investigate zustand types
|
||||
set: fn => stateSetter(fn, set),
|
||||
optSet: fn => {
|
||||
return optStateSetter(fn, set, get);
|
||||
},
|
||||
patches: {},
|
||||
addPatch: (id: string, ...patch: Patch[]) => {
|
||||
// @ts-ignore investigate immer types
|
||||
set(({ patches }) => ({ patches: {...patches, [id]: patch }}));
|
||||
},
|
||||
removePatch: (id: string) => {
|
||||
// @ts-ignore investigate immer types
|
||||
set(({ patches }) => ({ patches: _.omit(patches, id)}));
|
||||
},
|
||||
rollback: (id: string) => {
|
||||
|
||||
@ -9,6 +9,7 @@ export interface ContactState extends BaseState<ContactState> {
|
||||
// fetchIsAllowed: (entity, name, ship, personal) => Promise<boolean>;
|
||||
}
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useContactState = createState<ContactState>('Contact', {
|
||||
contacts: {},
|
||||
nackedContacts: new Set(),
|
||||
|
||||
@ -22,7 +22,7 @@ export interface GraphState extends BaseState<GraphState> {
|
||||
// getGraphSubset: (ship: string, resource: string, start: string, end: string) => Promise<void>;
|
||||
// getNode: (ship: string, resource: string, index: string) => Promise<void>;
|
||||
}
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useGraphState = createState<GraphState>('Graph', {
|
||||
graphs: {},
|
||||
graphKeys: new Set(),
|
||||
@ -142,6 +142,4 @@ export function useGraphForAssoc(association: Association) {
|
||||
return useGraph(ship, name);
|
||||
}
|
||||
|
||||
window.useGraphState = useGraphState;
|
||||
|
||||
export default useGraphState;
|
||||
|
||||
@ -9,6 +9,7 @@ export interface GroupState extends BaseState<GroupState> {
|
||||
pendingJoin: JoinRequests;
|
||||
}
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useGroupState = createState<GroupState>('Group', {
|
||||
groups: {},
|
||||
pendingJoin: {}
|
||||
|
||||
@ -5,6 +5,7 @@ export interface InviteState extends BaseState<InviteState> {
|
||||
invites: Invites;
|
||||
}
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useInviteState = createState<InviteState>('Invite', {
|
||||
invites: {}
|
||||
});
|
||||
|
||||
@ -13,6 +13,7 @@ export interface LaunchState extends BaseState<LaunchState> {
|
||||
runtimeLag: boolean;
|
||||
};
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useLaunchState = createState<LaunchState>('Launch', {
|
||||
firstTime: true,
|
||||
tileOrdering: [],
|
||||
|
||||
@ -82,6 +82,7 @@ const useLocalState = create<LocalStateZus>(persist((set, get) => ({
|
||||
state.suspendedFocus.blur();
|
||||
}
|
||||
})),
|
||||
// @ts-ignore investigate zustand types
|
||||
set: fn => set(produce(fn))
|
||||
}), {
|
||||
blacklist: [
|
||||
@ -98,6 +99,7 @@ function withLocalState<P, S extends keyof LocalState, C extends React.Component
|
||||
(object, key) => ({ ...object, [key]: state[key] }), {}
|
||||
)
|
||||
): useLocalState();
|
||||
// @ts-ignore call signature forwarding unclear
|
||||
return <Component ref={ref} {...localState} {...props} />;
|
||||
});
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export function useGraphsForGroup(group: string) {
|
||||
const graphs = useMetadataState(s => s.associations.graph);
|
||||
return _.pickBy(graphs, (a: Association) => a.group === group);
|
||||
}
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useMetadataState = createState<MetadataState>('Metadata', {
|
||||
associations: { groups: {}, graph: {}, contacts: {}, chat: {}, link: {}, publish: {} }
|
||||
// preview: async (group): Promise<MetadataUpdatePreview> => {
|
||||
|
||||
@ -45,6 +45,7 @@ export const selectCalmState = (s: SettingsState) => s.calm;
|
||||
|
||||
export const selectDisplayState = (s: SettingsState) => s.display;
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useSettingsState = createState<SettingsState>('Settings', {
|
||||
display: {
|
||||
backgroundType: 'none',
|
||||
|
||||
@ -19,6 +19,7 @@ export interface StorageState extends BaseState<StorageState> {
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
const useStorageState = createState<StorageState>('Storage', {
|
||||
gcp: {},
|
||||
s3: {
|
||||
|
||||
@ -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']
|
||||
);
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -136,6 +136,7 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
|
||||
}
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Col {...bind} height="100%" overflow="hidden" position="relative">
|
||||
<ShareProfile
|
||||
our={ourContact}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -35,6 +35,7 @@ const Tiles = (props: TileProps): ReactElement => {
|
||||
return (
|
||||
<WeatherTile
|
||||
key={key}
|
||||
// @ts-ignore withState not passing props
|
||||
api={props.api}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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('');
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -13,7 +13,7 @@ import useStorage from '~/logic/lib/useStorage';
|
||||
|
||||
type ImageInputProps = Parameters<typeof Box>[0] & {
|
||||
id: string;
|
||||
label: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 : ''}
|
||||
|
||||
@ -41,7 +41,7 @@ export const ProfileStatus = (props) => {
|
||||
<Input
|
||||
onChange={onStatusChange}
|
||||
value={_status}
|
||||
autocomplete='off'
|
||||
autoComplete='off'
|
||||
width='100%'
|
||||
placeholder='Set Status'
|
||||
onKeyPress={(evt) => {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -100,7 +100,9 @@ export function Omnibox(props: OmniboxProps): ReactElement {
|
||||
}
|
||||
Mousetrap.bind('escape', props.toggle);
|
||||
const touchstart = new Event('touchstart');
|
||||
// @ts-ignore
|
||||
inputRef?.current?.input?.dispatchEvent(touchstart);
|
||||
// @ts-ignore
|
||||
inputRef?.current?.input?.focus();
|
||||
return () => {
|
||||
Mousetrap.unbind('escape');
|
||||
@ -173,6 +175,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 +197,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 +329,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 +370,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 +387,5 @@ export function Omnibox(props: OmniboxProps): ReactElement {
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
|
||||
// @ts-ignore investigate zustand types
|
||||
export default withLocalState(Omnibox, ['toggleOmnibox', 'omniboxShown']);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
@ -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 }) => {
|
||||
|
||||
@ -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,
|
||||
@ -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}
|
||||
|
||||
@ -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'
|
||||
}}
|
||||
|
||||
@ -15,6 +15,7 @@ interface PostHeaderProps {
|
||||
association: Association;
|
||||
isReply: boolean;
|
||||
showTimestamp: boolean;
|
||||
graphPath: any;
|
||||
}
|
||||
|
||||
const PostHeader = (props: PostHeaderProps): ReactElement => {
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -86,7 +86,10 @@ export function SidebarList(props: {
|
||||
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]);
|
||||
|
||||
|
||||
@ -76,7 +76,7 @@ export interface Metadata {
|
||||
export type MetadataConfig = GroupConfig | GraphConfig;
|
||||
|
||||
export interface GroupConfig {
|
||||
group: null | Record<string, string> | Resource;
|
||||
group: null | Record<string, string>;
|
||||
}
|
||||
export interface GraphConfig {
|
||||
graph: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user