From 349cfe7177affde7e3acae2616c6c8a2fa11b1c0 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 12 Oct 2022 18:56:10 -0500
Subject: [PATCH] Add contacts screen
---
src/view/com/util/Selector.tsx | 1 +
src/view/routes.ts | 2 +
src/view/screens/Contacts.tsx | 82 ++++++++++++++++++++++++++++++++++
3 files changed, 85 insertions(+)
create mode 100644 src/view/screens/Contacts.tsx
diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx
index 6b0d5ac1..f0e685fe 100644
--- a/src/view/com/util/Selector.tsx
+++ b/src/view/com/util/Selector.tsx
@@ -113,6 +113,7 @@ const styles = StyleSheet.create({
},
item: {
marginRight: 20,
+ paddingHorizontal: 10,
},
itemLabel: {
fontWeight: '600',
diff --git a/src/view/routes.ts b/src/view/routes.ts
index e7d6de7f..d75280d1 100644
--- a/src/view/routes.ts
+++ b/src/view/routes.ts
@@ -2,6 +2,7 @@ import React, {MutableRefObject} from 'react'
import {FlatList} from 'react-native'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {Home} from './screens/Home'
+import {Contacts} from './screens/Contacts'
import {Search} from './screens/Search'
import {Notifications} from './screens/Notifications'
import {NotFound} from './screens/NotFound'
@@ -28,6 +29,7 @@ export type MatchResult = {
const r = (pattern: string) => new RegExp('^' + pattern + '([?]|$)', 'i')
export const routes: Route[] = [
[Home, 'house', r('/')],
+ [Contacts, ['far', 'circle-user'], r('/contacts')],
[Search, 'magnifying-glass', r('/search')],
[Notifications, 'bell', r('/notifications')],
[Settings, 'bell', r('/settings')],
diff --git a/src/view/screens/Contacts.tsx b/src/view/screens/Contacts.tsx
new file mode 100644
index 00000000..7c079cde
--- /dev/null
+++ b/src/view/screens/Contacts.tsx
@@ -0,0 +1,82 @@
+import React, {useEffect, useState, useRef} from 'react'
+import {StyleSheet, Text, TextInput, View} from 'react-native'
+import {useSharedValue} from 'react-native-reanimated'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
+import {Selector} from '../com/util/Selector'
+import {colors} from '../lib/styles'
+import {ScreenParams} from '../routes'
+import {useStores} from '../../state'
+
+export const Contacts = ({visible, params}: ScreenParams) => {
+ const store = useStores()
+ const selectorInterp = useSharedValue(0)
+
+ useEffect(() => {
+ if (visible) {
+ store.nav.setTitle(`Contacts`)
+ }
+ }, [store, visible])
+
+ const [searchText, onChangeSearchText] = useState('')
+ const inputRef = useRef<TextInput | null>(null)
+
+ return (
+ <View>
+ <View style={styles.section}>
+ <Text style={styles.title}>Contacts</Text>
+ </View>
+ <View style={styles.section}>
+ <View style={styles.searchContainer}>
+ <FontAwesomeIcon
+ icon="magnifying-glass"
+ size={16}
+ style={styles.searchIcon}
+ />
+ <TextInput
+ ref={inputRef}
+ value={searchText}
+ style={styles.searchInput}
+ placeholder="Search"
+ onChangeText={onChangeSearchText}
+ />
+ </View>
+ </View>
+ <Selector
+ items={['All', 'Following']}
+ selectedIndex={0}
+ swipeGestureInterp={selectorInterp}
+ />
+ {!!store.me.name && <ProfileFollowsComponent name={store.me.name} />}
+ </View>
+ )
+}
+
+const styles = StyleSheet.create({
+ section: {
+ backgroundColor: colors.white,
+ },
+ title: {
+ fontSize: 30,
+ fontWeight: 'bold',
+ paddingHorizontal: 12,
+ paddingVertical: 6,
+ },
+
+ searchContainer: {
+ flexDirection: 'row',
+ backgroundColor: colors.gray1,
+ paddingHorizontal: 8,
+ paddingVertical: 8,
+ marginHorizontal: 10,
+ marginBottom: 6,
+ borderRadius: 4,
+ },
+ searchIcon: {
+ color: colors.gray5,
+ marginRight: 8,
+ },
+ searchInput: {
+ flex: 1,
+ },
+})