mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-15 01:52:42 +03:00
groups: sidebar restructure
This commit is contained in:
parent
8fe45b63b1
commit
1865086675
@ -1,10 +1,11 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import Helmet from 'react-helmet';
|
||||
import { Box, Center } from '@tlon/indigo-react';
|
||||
|
||||
import './css/custom.css';
|
||||
|
||||
import { Skeleton } from './components/skeleton';
|
||||
import { Skeleton as NewSkeleton } from '~/views/components/Skeleton';
|
||||
import { NewScreen } from './components/new';
|
||||
import { ContactSidebar } from './components/lib/contact-sidebar';
|
||||
import { ContactCard } from './components/lib/contact-card';
|
||||
@ -12,10 +13,14 @@ import { AddScreen } from './components/lib/add-contact';
|
||||
import { JoinScreen } from './components/join';
|
||||
import GroupDetail from './components/lib/group-detail';
|
||||
|
||||
import { PatpNoSig } from '~/types/noun';
|
||||
import { PatpNoSig, AppName } from '~/types/noun';
|
||||
import GlobalApi from '~/logic/api/global';
|
||||
import { StoreState } from '~/logic/store/type';
|
||||
import GlobalSubscription from '~/logic/subscription/global';
|
||||
import {Resource} from '~/views/components/Resource';
|
||||
import {PopoverRoutes} from './components/PopoverRoutes';
|
||||
import {UnjoinedResource} from '~/views/components/UnjoinedResource';
|
||||
import {GroupsPane} from '~/views/components/GroupsPane';
|
||||
|
||||
|
||||
type GroupsAppProps = StoreState & {
|
||||
@ -26,14 +31,18 @@ type GroupsAppProps = StoreState & {
|
||||
|
||||
export default class GroupsApp extends Component<GroupsAppProps, {}> {
|
||||
componentDidMount() {
|
||||
document.title = 'OS1 - Groups';
|
||||
// preload spinner asset
|
||||
new Image().src = '/~landscape/img/Spinner.png';
|
||||
|
||||
this.props.subscription.startApp('groups')
|
||||
this.props.subscription.startApp('chat')
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.subscription.stopApp('groups')
|
||||
this.props.subscription.stopApp('chat')
|
||||
}
|
||||
|
||||
|
||||
@ -55,10 +64,6 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>OS1 - Groups</title>
|
||||
</Helmet>
|
||||
<Switch>
|
||||
<Route exact path="/~groups"
|
||||
render={(props) => {
|
||||
@ -131,7 +136,7 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route exact path="/~groups/(detail)?/(settings)?/ship/:ship/:group/"
|
||||
<Route exact path="/~groups/dep/(detail)?/(settings)?/ship/:ship/:group/"
|
||||
render={(props) => {
|
||||
const groupPath =
|
||||
`/ship/${props.match.params.ship}/${props.match.params.group}`;
|
||||
@ -278,6 +283,17 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route path="/~groups/ship/:host/:name"
|
||||
render={routeProps => {
|
||||
const { host, name } = routeProps.match.params as Record<string, string>;
|
||||
const groupPath = `/ship/${host}/${name}`;
|
||||
const baseUrl = `/~groups${groupPath}`;
|
||||
|
||||
return (
|
||||
<GroupsPane baseUrl={baseUrl} groupPath={groupPath} {...props} />
|
||||
)
|
||||
}}/>
|
||||
|
||||
<Route exact path="/~groups/view/ship/:ship/:group/:contact"
|
||||
render={(props) => {
|
||||
const groupPath =
|
||||
@ -333,8 +349,34 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route exact path="/~groups/me"
|
||||
render={(props) => {
|
||||
const me = defaultContacts[window.ship] || {};
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
history={props.history}
|
||||
api={api}
|
||||
contacts={contacts}
|
||||
groups={groups}
|
||||
invites={invites}
|
||||
activeDrawer="rightPanel"
|
||||
selected="me"
|
||||
associations={associations}
|
||||
>
|
||||
<ContactCard
|
||||
api={api}
|
||||
history={props.history}
|
||||
path="/~/default"
|
||||
contact={me}
|
||||
s3={s3}
|
||||
ship={window.ship}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Switch>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -53,6 +53,16 @@ const formSchema = Yup.object({
|
||||
),
|
||||
});
|
||||
|
||||
const emptyContact = {
|
||||
avatar: null,
|
||||
color: '0',
|
||||
nickname: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
website: '',
|
||||
notes: ''
|
||||
};
|
||||
|
||||
export function ContactCard(props: ContactCardProps) {
|
||||
const us = `~${window.ship}`;
|
||||
const { contact } = props;
|
||||
@ -84,13 +94,13 @@ export function ContactCard(props: ContactCardProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const hexColor = contact.color ? `#${uxToHex(contact.color)}` : "#000000";
|
||||
const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : "#000000";
|
||||
|
||||
return (
|
||||
<Box p={4} height="100%" overflowY="auto">
|
||||
<Formik
|
||||
validationSchema={formSchema}
|
||||
initialValues={contact}
|
||||
initialValues={contact || emptyContact}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<Form>
|
||||
|
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
import { ChatResource } from "~/views/apps/chat/ChatResource";
|
||||
import { LinkResource } from "~/views/apps/links/LinkResource";
|
||||
import { PublishResource } from "~/views/apps/publish/PublishResource";
|
||||
|
||||
import { Association } from "~/types/metadata-update";
|
||||
@ -26,7 +25,7 @@ export function Resource(props: ResourceProps) {
|
||||
return <PublishResource {...props} />;
|
||||
}
|
||||
if (app === 'link') {
|
||||
return <LinkResource {...props} />;
|
||||
return null; //return <LinkResource {...props} />;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user