From 080fe979a52a082791d9edecfd4918f8ffcd4fb7 Mon Sep 17 00:00:00 2001 From: Alireza Rezania Date: Sat, 17 Apr 2021 10:12:12 +0300 Subject: [PATCH 1/2] init work on explore --- src/models/explore.ts | 9 +++ src/navigator.tsx | 3 + src/screens/explore.tsx | 124 ++++++++++++++++++++++++++++++++++++++++ src/screens/home.tsx | 28 +++++++++ 4 files changed, 164 insertions(+) create mode 100644 src/models/explore.ts create mode 100644 src/screens/explore.tsx diff --git a/src/models/explore.ts b/src/models/explore.ts new file mode 100644 index 0000000..cc17b40 --- /dev/null +++ b/src/models/explore.ts @@ -0,0 +1,9 @@ +export interface Topic { + title: string; + id: number; + abbreviated_title: string; +} + +export interface MainTopic extends Topic { + topics: Topic[]; +} diff --git a/src/navigator.tsx b/src/navigator.tsx index fdf2d0b..a99877f 100644 --- a/src/navigator.tsx +++ b/src/navigator.tsx @@ -15,6 +15,7 @@ import UserProfile from "./screens/user-profile"; import { User } from "./models/channel"; import IsWaitlisted from "./screens/is-waitlisted"; import Register from "./screens/signup"; +import Explore from "./screens/explore"; export type StackParamList = { Login: undefined; @@ -24,6 +25,7 @@ export type StackParamList = { UserProfile: { user_id: number; user: User }; IsWaitlisted: undefined; Register: undefined; + Explore: undefined; }; const Stack = createStackNavigator(); @@ -82,6 +84,7 @@ const Navigator = () => { component={UserProfile} options={{ title: "" }} /> + ) ) : ( diff --git a/src/screens/explore.tsx b/src/screens/explore.tsx new file mode 100644 index 0000000..f972100 --- /dev/null +++ b/src/screens/explore.tsx @@ -0,0 +1,124 @@ +import React from "react"; +import { + ActivityIndicator, + Dimensions, + StyleSheet, + Text, + TextInput, + View, +} from "react-native"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; +import Screen from "../components/screen"; +import req from "../utils/req"; +import { APIResult } from "../models/api"; +import { useQuery } from "react-query"; +import { ScrollView } from "react-native-gesture-handler"; +import { AllTopics, MainTopic, Topic } from "../models/explore"; + +const dims = Dimensions.get("window"); + +const Explore = () => { + const { + isLoading: loadingAllTopics, + error, + data: topics, + refetch, + } = useQuery("topics", () => getAllTopics()); + const getAllTopics = async () => { + const res = await req("/get_all_topics", { + method: "GET", + }); + const resJson: APIResult<{ topics: MainTopic[] }> = await res.json(); + console.log("all topics", resJson); + return resJson.topics; + }; + + return ( + + + + + + + PEOPLE TO FOLLOW + + + + + FIND CONVERSATIONS ABOUT... + + {loadingAllTopics ? ( + + ) : ( + topics?.map((topic) => ( + + {topic.title} + + {topic.topics.map((t) => t.abbreviated_title).join(", ")} + + + )) + )} + + + + ); +}; + +const styles = StyleSheet.create({ + container: {}, + searchInputContainer: { + backgroundColor: "#E1E0D9", + borderRadius: 8, + flexDirection: "row", + alignItems: "center", + paddingHorizontal: 8, + marginHorizontal: 16, + }, + sectionTitle: { + fontFamily: "Nunito-Bold", + marginLeft: 16, + marginTop: 24, + marginBottom: 8, + color: "#8D866C", + }, + peopleToFollowContainer: { + width: "100%", + backgroundColor: "#fff", + height: 250, + }, + topicsContainer: { + width: "100%", + flexDirection: "row", + flexWrap: "wrap", + paddingLeft: 16, + }, + topic: { + width: dims.width / 2 - 24, + marginRight: 16, + backgroundColor: "#fff", + borderRadius: 8, + marginBottom: 16, + shadowColor: "rgba(0,0,0,5)", + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.1, + shadowRadius: 0.1, + elevation: 1, + padding: 10, + }, + topicTitle: { + fontFamily: "Nunito-Bold", + color: "#353535", + fontSize: 15, + }, + topicInfo: { + fontFamily: "Nunito-SemiBold", + color: "#808080", + marginTop: 4, + }, +}); + +export default Explore; diff --git a/src/screens/home.tsx b/src/screens/home.tsx index 616a351..7c95595 100644 --- a/src/screens/home.tsx +++ b/src/screens/home.tsx @@ -52,6 +52,8 @@ const Home: FC = ({ navigation }) => { return resJson; }; + const navigateToExplore = () => navigate("Explore"); + const renderChannel = ({ item, index }: { item: Channel; index: number }) => ( = ({ navigation }) => { ); + const renderExploreButton = () => ( + + + Explore + + ); + return ( = ({ navigation }) => { refreshControl={ } + ListFooterComponent={renderExploreButton()} /> @@ -178,6 +192,7 @@ const styles = StyleSheet.create({ }, channelsContainer: { paddingHorizontal: 16, + paddingBottom: 80, }, channel: { width: "100%", @@ -231,6 +246,19 @@ const styles = StyleSheet.create({ fontFamily: "Nunito-SemiBold", color: "#49464A", }, + + exploreButton: { + backgroundColor: "#E8E3D7", + borderRadius: 16, + flexDirection: "row", + padding: 8, + paddingHorizontal: 16, + alignSelf: "center", + }, + exploreButtonTitle: { + fontFamily: "Nunito-SemiBold", + color: "#8D8773", + }, }); export default Home; From 130d56c3d05ae8efd60b811adf4e5287a4a8ab47 Mon Sep 17 00:00:00 2001 From: Alireza Rezania Date: Sun, 2 May 2021 14:04:50 +0300 Subject: [PATCH 2/2] implemented 'people to follow' section ui --- src/screens/explore.tsx | 106 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 99 insertions(+), 7 deletions(-) diff --git a/src/screens/explore.tsx b/src/screens/explore.tsx index f972100..1a9d9a1 100644 --- a/src/screens/explore.tsx +++ b/src/screens/explore.tsx @@ -1,7 +1,9 @@ -import React from "react"; +import React, { useState } from "react"; import { ActivityIndicator, Dimensions, + Image, + LayoutAnimation, StyleSheet, Text, TextInput, @@ -13,17 +15,26 @@ import req from "../utils/req"; import { APIResult } from "../models/api"; import { useQuery } from "react-query"; import { ScrollView } from "react-native-gesture-handler"; -import { AllTopics, MainTopic, Topic } from "../models/explore"; +import { MainTopic, Topic } from "../models/explore"; +import { User } from "../models/channel"; +import defaultAvatar from "../assets/default-avatar"; +import Flex from "../components/flex"; +import Touchable from "../components/touchable"; const dims = Dimensions.get("window"); const Explore = () => { const { isLoading: loadingAllTopics, - error, + data: topics, - refetch, } = useQuery("topics", () => getAllTopics()); + const { + isLoading: loadingSuggestedFollows, + data: suggestedFollows, + } = useQuery("suggestedFollows", () => getSuggestedFollows()); + const [numFollowsShown, setNumFollowsShown] = useState(3); + const getAllTopics = async () => { const res = await req("/get_all_topics", { method: "GET", @@ -33,6 +44,20 @@ const Explore = () => { return resJson.topics; }; + const getSuggestedFollows = async () => { + const res = await req("/get_suggested_follows_all", { + method: "GET", + }); + const resJson: APIResult<{ users: User[] }> = await res.json(); + console.log("all suggested follows", resJson); + return resJson.users; + }; + + const showMoreFollow = () => { + setNumFollowsShown(numFollowsShown + 7); + LayoutAnimation.easeInEaseOut(); + }; + return ( @@ -42,10 +67,31 @@ const Explore = () => { PEOPLE TO FOLLOW - + {!loadingSuggestedFollows && + suggestedFollows?.slice(0, numFollowsShown)?.map((user) => ( + + + + {user.name} + @{user.username} + + + + Follow + + + ))} + + Show more people + - FIND CONVERSATIONS ABOUT... + + FIND CONVERSATIONS ABOUT... + {loadingAllTopics ? ( @@ -85,7 +131,53 @@ const styles = StyleSheet.create({ peopleToFollowContainer: { width: "100%", backgroundColor: "#fff", - height: 250, + paddingVertical: 16, + marginBottom: 16, + }, + userContainer: { + width: "100%", + alignItems: "center", + paddingHorizontal: 16, + flexDirection: "row", + marginBottom: 16, + }, + userAvatar: { + width: 60, + height: 60, + borderRadius: 28, + }, + userFullName: { + fontFamily: "Nunito-Bold", + fontSize: 15, + color: "#070707", + }, + username: { + fontFamily: "Nunito-Regular", + }, + followBtn: { + borderWidth: 2, + borderColor: "#6180B0", + borderRadius: 360, + paddingHorizontal: 16, + paddingVertical: 3, + marginLeft: "auto", + }, + followBtnTitle: { + fontFamily: "Nunito-Regular", + color: "#6180B0", + }, + showMoreFollowsBtn: { + backgroundColor: "#E7E3D5", + borderRadius: 360, + paddingVertical: 8, + paddingHorizontal: 16, + alignSelf: "center", + position: "absolute", + bottom: -16, + }, + showMoreFollowsBtnTitle: { + color: "#766B50", + fontFamily: "Nunito-Regular", }, topicsContainer: { width: "100%",