@@ -1,5 +1,6 @@
11import React, { useState, useEffect, useCallback, useMemo } from 'react';
2−import { Grid, H4, HelpText } from 'indigo-react';
2+import cn from 'classnames';
3+import { Grid, H4, HelpText, Flex } from 'indigo-react';
34import { Just, Nothing } from 'folktale/maybe';
45import * as ob from 'urbit-ob';
56
@@ -32,15 +33,31 @@ const VIEWS = {
3233 [NAMES.ALL]: Tab,
3334};
3435
35−function Tab({ className, points, onAccept, onDecline }) {
36+const PAGE_SIZE = 10;
37+
38+function Tab({ className, points, onAccept, onDecline, page, setPage }) {
39+ const start = page * PAGE_SIZE;
40+ const end = page * PAGE_SIZE + PAGE_SIZE;
41+ const pointsCount = points.map(ps => ps.length).getOrElse(0);
42+ const maxPage = Math.ceil(pointsCount / PAGE_SIZE) - 1;
43+ const hasNext = page < maxPage;
44+ const hasPrev = page > 0;
45+ const _points = points.map(ps => ps.slice(start, end)).getOrElse([]);
46+
47+ const onNext = useCallback(() => {
48+ setPage(p => p + 1);
49+ }, [setPage]);
50+
51+ const onPrev = useCallback(() => {
52+ setPage(p => p - 1);
53+ }, [setPage]);
54+
3655 if (Nothing.hasInstance(points)) {
3756 return <Grid className={className}></Grid>;
3857 }
3958
40− const _points = points.getOrElse([]);
41−
4259 return (
43− <Grid className={className}>
60+ <Grid className={cn('mt2', className)}>
4461 {_points.length === 0 && (
4562 <Grid.Item full as={HelpText} className="mt8 t-center">
4663 {Just.hasInstance(points) ? (
@@ -61,6 +78,28 @@ function Tab({ className, points, onAccept, onDecline }) {
6178 onDecline={onDecline}
6279 />
6380 ))}
81+
82+ {hasPrev && (
83+ <Grid.Item
84+ className="pointer underline mt4"
85+ fourth={1}
86+ onClick={onPrev}>
87+ {'<-'} Previous
88+ </Grid.Item>
89+ )}
90+ {maxPage !== 0 && (
91+ <Grid.Item className="mt6 ml7 t-center gray3" cols={[4, 10]}>
92+ <span className="black">Page {page + 1}</span> of {maxPage + 1}
93+ </Grid.Item>
94+ )}
95+ {hasNext && (
96+ <Grid.Item
97+ className="pointer underline t-right mt4"
98+ fourth={4}
99+ onClick={onNext}>
100+ Next {'->'}
101+ </Grid.Item>
102+ )}
64103 </Grid>
65104 );
66105}
@@ -83,7 +122,7 @@ function Resident({ point, onAccept, onDecline }) {
83122 <Sigil patp={patp} size={25} colors={['#FFFFFF', '#000000']} />
84123 </div>
85124 </Grid.Item>
86− <Grid.Item className="flex-row align-center" cols={[3, 6]}>
125+ <Grid.Item className="flex-row align-center" cols={[3, 7]}>
87126 {patp}{' '}
88127 </Grid.Item>
89128 {isRequest && (
@@ -121,7 +160,16 @@ export default function Residents() {
121160
122161 const { residents, requests } = getResidents(point);
123162
124− const [currentTab, setCurrentTab] = useState(NAMES.ALL);
163+ const [currentTab, _setCurrentTab] = useState(NAMES.ALL);
164+ const [page, setPage] = useState(0);
165+
166+ const setCurrentTab = useCallback(
167+ tab => {
168+ setPage(0);
169+ _setCurrentTab(tab);
170+ },
171+ [setPage, _setCurrentTab]
172+ );
125173
126174 const isRequests = useMemo(() => currentTab === NAMES.REQUESTS, [currentTab]);
127175
@@ -169,6 +217,8 @@ export default function Residents() {
169217 points={points}
170218 onAccept={onAccept}
171219 onDecline={onDecline}
220+ page={page}
221+ setPage={setPage}
172222 />
173223 </Grid>
174224 </View>