git.iko.soy/bridge
on ee5bed0 help sign in
bridge/src/views/Residents.js
164 lines 3.9 kB history raw
1import React, { useState, useEffect, useCallback } from 'react';
2import { Grid, H4 } from 'indigo-react';
3import { Nothing } from 'folktale/maybe';
4import * as ob from 'urbit-ob';
6import View from 'components/View';
7import Tabs from 'components/Tabs';
8import Crumbs from 'components/Crumbs';
9import Sigil from 'components/Sigil';
11import { useLocalRouter } from 'lib/LocalRouter';
12import useCurrentPointName from 'lib/useCurrentPointName';
13import { useResidents } from 'lib/useResidents';
14import * as need from 'lib/need';
16import { usePointCursor } from 'store/pointCursor';
18const NAMES = {
19 REQUESTS: 'REQUESTS',
20 ALL: 'ALL',
21};
23const OPTIONS = [
24 { text: 'Requests', value: NAMES.REQUESTS },
25 { text: 'All', value: NAMES.ALL },
26];
28const VIEWS = {
29 [NAMES.REQUESTS]: Requests,
30 [NAMES.ALL]: AllResidents,
31};
33function Requests({ className }) {
34 const onThing = () => {};
35 const { pointCursor } = usePointCursor();
36 const point = need.point(pointCursor);
37 const { requests, syncRequests } = useResidents(point);
38 useEffect(() => {
39 syncRequests();
40 }, [syncRequests]);
42 if (Nothing.hasInstance(requests)) {
43 return (
44 <Grid className={className}>
45 <Grid.Item full>Loading...</Grid.Item>
46 </Grid>
47 );
48 }
50 const _requests = requests.getOrElse([]);
52 return (
53 <Grid className={className}>
54 {_requests.map(point => (
55 <Resident
56 key={point}
57 point={point}
58 onAccept={onThing}
59 onDecline={onThing}
60 />
61 ))}
62 </Grid>
63 );
66function Resident({ point, onAccept, onDecline }) {
67 const patp = ob.patp(point);
68 const sigilSize = 50;
70 const isRequest = onAccept && onDecline;
72 return (
73 <>
74 <Grid.Item className="flex-row justify-center align-center" cols={[1, 3]}>
75 <div
76 style={{
77 display: 'inline-block',
78 height: `${sigilSize}px`,
79 width: `${sigilSize}px`,
80 }}>
81 <Sigil patp={patp} size={25} colors={['#FFFFFF', '#000000']} />
82 </div>
83 </Grid.Item>
84 <Grid.Item className="flex-row align-center" cols={[3, 6]}>
85 {patp}{' '}
86 </Grid.Item>
87 {isRequest && (
88 <>
89 <Grid.Item className="flex-row align-center underline" cols={[7, 10]}>
90 Accept
91 </Grid.Item>
92 <Grid.Item
93 className="flex-row align-center underline"
94 cols={[10, 13]}>
95 Decline
96 </Grid.Item>
97 </>
98 )}
99 <Grid.Divider />
100 </>
101 );
104function AllResidents({ className }) {
105 const { pointCursor } = usePointCursor();
106 const point = need.point(pointCursor);
107 const { syncResidents, residents } = useResidents(point);
108 useEffect(() => {
109 syncResidents();
110 }, [syncResidents]);
112 if (Nothing.hasInstance(residents)) {
113 return (
114 <Grid className={className}>
115 <Grid.Item full>Loading...</Grid.Item>
116 </Grid>
117 );
118 }
120 const _residents = residents.getOrElse([]);
122 return (
123 <Grid className={className}>
124 {_residents.map(point => (
125 <Resident key={point} point={point} />
126 ))}
127 </Grid>
128 );
131export default function Residents() {
132 const { pop } = useLocalRouter();
133 const name = useCurrentPointName();
135 // const { pointCursor } = usePointCursor();
137 const [currentTab, setCurrentTab] = useState(NAMES.ALL);
139 const [req, selectRequest] = useState();
141 return (
142 <View pop={pop}>
143 <Grid>
144 <Grid.Item
145 full
146 as={Crumbs}
147 routes={[{ text: name, action: pop }, { text: 'Residents' }]}
148 />
149 <Grid.Item full as={H4} className="mt4">
150 Residents
151 </Grid.Item>
152 <Grid.Item
153 full
154 className="mt1"
155 as={Tabs}
156 views={VIEWS}
157 options={OPTIONS}
158 currentTab={currentTab}
159 onTabChange={setCurrentTab}
160 />
161 </Grid>
162 </View>
163 );