refactor(Screen): render view data

LeleDallas · Jul 8, 2024 · 218d8cd · 218d8cd
1 parent acc15d9
commit 218d8cd
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 82 deletions.
diff --git a/src/components/Card/RepositoryCard.tsx b/src/components/Card/RepositoryCard.tsx
@@ -1,9 +1,10 @@
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { useCallback, useRef, useState } from 'react';
 import { Alert, Text, TouchableOpacity, View } from 'react-native';
+import { globalStyle } from '../../styles';
 import { Repository } from '../../types/response';
+import RepoBadgeList from '../Badge/RepoBadgeList';
 import StarBottomSheet from '../StarBottomSheet';
-import { globalStyle } from '../../styles';
 
 type Props = {
     repository: Repository;
@@ -36,27 +37,13 @@ export default (props: Props) => {
                     }}
                 >
                     <View style={{ width: '100%' }}>
-                        <Text
-                            numberOfLines={1}
-                            style={globalStyle.cardTitleText}
-                        >
+                        <Text numberOfLines={1} style={globalStyle.cardTitleText}>
                             {repository.name}
                         </Text>
                         <Text numberOfLines={1} style={globalStyle.cardDescription}>
                             {repository.description}
                         </Text>
-                        <Text numberOfLines={1} style={globalStyle.bio}>
-                            {repository.forkCount}
-                        </Text>
-                        <Text numberOfLines={1} style={globalStyle.bio}>
-                            {repository.stargazerCount}
-                        </Text>
-                        <View style={{
-                            flexDirection: 'row', gap: 8, flexWrap: 'wrap', alignContent: 'center',
-                            justifyContent: 'flex-start'
-                        }}>
-                            {/* <RepositoryBadge count={repository.repositories?.totalCount ?? 0} /> */}
-                        </View>
+                        <RepoBadgeList repository={repository} />
                     </View>
                 </View>
             </View>

diff --git a/src/components/Card/UserCard.tsx b/src/components/Card/UserCard.tsx
@@ -6,6 +6,8 @@ import { User } from '../../types/response';
 import { RootStackParamList } from '../../types/routes';
 import HasIconBadge from '../Badge/HasIconBadge';
 import RepositoryBadge from '../Badge/RepositoryBadge';
+import UserBadgeList from '../Badge/UserBadgeList';
+import UserText from '../Text/UserText';
 
 type Props = {
     user: User;
@@ -21,36 +23,10 @@ export default (props: Props) => {
                 <View>
                     <Image source={{ uri: user.avatarUrl }} style={globalStyle.image} />
                 </View>
-                <View
-                    style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        alignItems: 'center'
-                    }}
-                >
+                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                     <View style={{ width: '100%' }}>
-                        <Text
-                            numberOfLines={1}
-                            style={globalStyle.cardTitleText}
-                        >
-                            {user.login}
-                        </Text>
-                        <Text numberOfLines={1} style={globalStyle.cardDescription}>
-                            {user.name}
-                        </Text>
-                        <Text numberOfLines={1} style={globalStyle.bio}>
-                            {user.bio}
-                        </Text>
-                        <View style={{
-                            flexDirection: 'row', gap: 8, flexWrap: 'wrap', alignContent: 'center',
-                            justifyContent: 'flex-start'
-                        }}>
-                            <RepositoryBadge count={user.repositories?.totalCount ?? 0} />
-                            <HasIconBadge hasBadge={user.isDeveloperProgramMember} name="cpu" />
-                            <HasIconBadge hasBadge={user.isGitHubStar} name="star" />
-                            <HasIconBadge hasBadge={user.hasSponsorsListing} name="code-of-conduct" />
-                        </View>
+                        <UserText user={user} />
+                        <UserBadgeList user={user} />
                     </View>
                 </View>
             </View>

diff --git a/src/components/StarBottomSheet/index.tsx b/src/components/StarBottomSheet/index.tsx
@@ -1,8 +1,11 @@
-import { BottomSheetModal, BottomSheetVirtualizedList } from '@gorhom/bottom-sheet';
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetVirtualizedList } from '@gorhom/bottom-sheet';
 import { RefObject, useEffect, useMemo, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
 import api from '../../api';
+import { colors } from '../../styles';
 import { Starred } from '../../types/response';
 import UserCard from '../Card/UserCard';
+import Spinner from '../Spinner';
 
 type Props = {
     repositoryId: string;
@@ -11,10 +14,14 @@ type Props = {
 
 export default (props: Props) => {
     const { repositoryId, bottomSheetModalRef } = props;
-    const snapPoints = useMemo(() => ['50%', '90%'], []);
+    const snapPoints = useMemo(() => ['70%', '90%'], []);
     const [data, setData] = useState<Starred[]>([]);
-
-    const getStarred = async () => repositoryId !== '' && await api.repo.getStars(repositoryId).then((res) => setData(res))
+    const [loading, setLoading] = useState(false);
+    const getStarred = async () => {
+        if (repositoryId === '') return;
+        setLoading(true);
+        await api.repo.getStars(repositoryId).then((res) => setData(res)).finally(() => setLoading(false));
+    }
 
     useEffect(() => {
         getStarred();
@@ -28,15 +35,33 @@ export default (props: Props) => {
             enableDismissOnClose
             enablePanDownToClose
             snapPoints={snapPoints}
-
+            backgroundStyle={{ backgroundColor: colors.background }}
+            backdropComponent={props =>
+                <BottomSheetBackdrop
+                    {...props}
+                    opacity={0.5}
+                    enableTouchThrough={false}
+                    appearsOnIndex={0}
+                    disappearsOnIndex={-1}
+                    style={[{
+                        backgroundColor: 'rgba(0, 0, 0, 1)'
+                    },
+                    StyleSheet.absoluteFillObject]
+                    }
+                />
+            }
         >
-            <BottomSheetVirtualizedList<Starred>
-                data={data}
-                keyExtractor={(i) => i.node.id}
-                getItemCount={(data) => data.length}
-                getItem={(data, index) => data[index]}
-                renderItem={({ item }) => <UserCard user={item.node} />}
-            // contentContainerStyle={styles.contentContainer}
-            />
+            {loading ? <Spinner /> :
+                <>
+                    <Text style={{ textAlign: 'center', fontSize: 20, fontWeight: 'bold', marginVertical: 8, color: "#fff" }}>Stars</Text>
+                    <BottomSheetVirtualizedList<Starred>
+                        data={data}
+                        keyExtractor={(i) => i.node.id}
+                        getItemCount={(data) => data.length}
+                        getItem={(data, index) => data[index]}
+                        renderItem={({ item }) => <UserCard user={item.node} />}
+                    />
+                </>
+            }
         </BottomSheetModal>);
 };
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
@@ -9,8 +9,13 @@ import { User } from '../types/response';
 export default () => {
     const [name, setName] = useState('');
     const [data, setData] = useState<User[]>([]);
+    const [loading, setLoading] = useState(false);
 
-    const fetchData = async () => await api.user.getAll(name).then(res => setData(res));
+    const fetchData = async () => {
+        setLoading(true);
+        await api.user.getAll(name).then(res => setData(res)
+        ).finally(() => setLoading(false))
+    };
 
     return (
         <>
@@ -32,7 +37,7 @@ export default () => {
                     <Octicons name="search" color={colors.text} size={20} />
                 </TouchableOpacity>
             </View>
-            <UserList users={data} />
+            <UserList users={data} loading={loading} />
         </>
     );
 };
diff --git a/src/screens/Repositories.tsx b/src/screens/Repositories.tsx
@@ -1,8 +1,10 @@
 import { useRoute } from '@react-navigation/native';
 import { useEffect, useState } from 'react';
-import { Image, View, VirtualizedList } from 'react-native';
+import { Image, View } from 'react-native';
 import api from '../api';
-import RepositoryCard from '../components/Card/RepositoryCard';
+import UserBadgeList from '../components/Badge/UserBadgeList';
+import RepoList from '../components/List/RepoList';
+import UserText from '../components/Text/UserText';
 import { globalStyle } from '../styles';
 import { Repository, User } from '../types/response';
 
@@ -11,8 +13,12 @@ export default () => {
     const route = useRoute();
     const { user } = route.params as { user: User };
     const [repositories, setRepositories] = useState<Repository[]>([]);
+    const [loading, setLoading] = useState(false);
 
-    const getRepo = async () => await api.repo.getRepo(user.login).then((res) => setRepositories(res));
+    const getRepo = async () => {
+        setLoading(true);
+        await api.repo.getRepo(user.login).then((res) => setRepositories(res)).finally(() => setLoading(false))
+    };
 
     useEffect(() => {
         getRepo();
@@ -26,17 +32,11 @@ export default () => {
                 justifyContent: 'center',
                 alignItems: 'center'
             }}>
-                <Image testID='user-image' source={{ uri: user.avatarUrl }} style={globalStyle.userImage} />
+                <Image testID='user-image' source={{ uri: user.avatarUrl }} style={[globalStyle.userImage, { marginBottom: 8 }]} />
+                <UserText user={user} />
+                <UserBadgeList user={user} />
             </View>
-            <VirtualizedList<Repository>
-                testID='virtualized-list'
-                style={{ flex: 1, marginTop: 8 }}
-                data={repositories}
-                renderItem={({ item }) => <RepositoryCard repository={item} />}
-                keyExtractor={(item) => item.id}
-                getItemCount={(data) => data.length}
-                getItem={(data, index) => data[index]}
-            />
+            <RepoList repositories={repositories} loading={repositories.length === 0} />
         </>
     );
 };
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -9,14 +9,6 @@ export const colors = {
     buttonInactive: '#46515B'
 };
 
-export const fontSize = {
-    xs: 12,
-    sm: 16,
-    base: 20,
-    lg: 24
-};
-
-
 export const globalStyle = StyleSheet.create({
     background: {
         backgroundColor: colors.background,