ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-13 11:45:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

link fe: refactor message display into component

Browse Source
This commit is contained in:
Fang 2020-04-13 21:49:15 +02:00
parent 0d73b391b4
commit 7aebcad25b
No known key found for this signature in database
GPG Key ID: EB035760C1BBA972
4 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
pkg/interface/link/src/js/components/lib/message-screen.js Normal file
View File

@ -0,0 +1,15 @@
import React, { Component } from 'react';
export class MessageScreen extends Component {
render() {
return (
<div className="h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d dn db-ns">
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
<p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
{this.props.text}
</p>
</div>
</div>
);
}
}

10
pkg/interface/link/src/js/components/links-list.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react'
import { LoadingScreen } from './loading';
import { MessageScreen } from '/components/lib/message-screen';
import { LinksTabBar } from './lib/links-tabbar';
import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
import { Route, Link } from "react-router-dom";
@ -59,15 +60,8 @@ export class Links extends Component {
let LinkList = (<LoadingScreen/>);
if (props.links && props.links.totalItems === 0) {
//TODO the below re-used from landing screen. refactor into MessageScreen?
LinkList = (
<div className="h-100 w-100 overflow-x-hidden bg-white bg-gray0-d dn db-ns">
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
<p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
Start by posting a link to this collection.
</p>
</div>
</div>
<MessageScreen text="Start by posting a link to this collection."/>
);
} else if (Object.keys(links).length > 0) {
LinkList = Object.keys(links)

11
pkg/interface/link/src/js/components/loading.js
View File

@ -1,15 +1,8 @@
import React, { Component } from 'react';
import { MessageScreen } from '/components/lib/message-screen';
export class LoadingScreen extends Component {
render() {
return (
<div className="h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d dn db-ns">
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
<p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
Loading...
</p>
</div>
</div>
);
return (<MessageScreen text="Loading..."/>);
}
}

9
pkg/interface/link/src/js/components/root.js
View File

@ -10,6 +10,7 @@ import { Skeleton } from '/components/skeleton';
import { NewScreen } from '/components/new';
import { MemberScreen } from '/components/member';
import { SettingsScreen } from '/components/settings';
import { MessageScreen } from '/components/lib/message-screen';
import { Links } from '/components/links-list';
import { LinkDetail } from '/components/link';
import { makeRoutePath, amOwnerOfGroup, base64urlDecode } from '../lib/util';
@ -63,13 +64,7 @@ export class Root extends Component {
selectedGroups={selectedGroups}
links={links}
listening={state.listening}>
<div className="h-100 w-100 overflow-x-hidden bg-white bg-gray0-d dn db-ns">
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
<p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
Select or create a collection to begin.
</p>
</div>
</div>
<MessageScreen text="Select or create a collection to begin."/>
</Skeleton>
);
}} />