upd: refresh control

deskripsi:
- warna refresh control pada semua fitur
- warna bottom pada modal select

No Issues

app/(application)/announcement/[id].tsx

@@ -200,7 +200,7 @@ export default function DetailAnnouncement() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={() => handleRefresh()}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
                />
             }
          >

app/(application)/announcement/index.tsx

@@ -130,7 +130,7 @@ export default function Announcement() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                            />
                         }
                      />

app/(application)/banner/index.tsx

@@ -133,7 +133,7 @@ export default function BannerList() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
                />
             }
             style={[Styles.h100, { backgroundColor: colors.background }]}

app/(application)/discussion/[id].tsx

@@ -247,7 +247,7 @@ export default function DetailDiscussionGeneral() {
                   <RefreshControl
                      refreshing={refreshing}
                      onRefresh={() => handleRefresh()}
-                     tintColor={colors.primary}
+                     tintColor={colors.icon}
                   />
                }
             >

app/(application)/discussion/index.tsx

@@ -166,7 +166,7 @@ export default function Discussion() {
                                  leftBottomInfo={
                                     <View style={[Styles.rowItemsCenter]}>
                                        <Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
-                                       <Text style={[Styles.textInformation, {color: colors.dimmed}, Styles.mb05]}>Diskusikan</Text>
+                                       <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
                                     </View>
                                  }
                                  rightBottomInfo={`${item.total_komentar} Komentar`}
@@ -182,7 +182,7 @@ export default function Discussion() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                            />
                         }
                      />

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx

@@ -180,6 +180,7 @@ export default function DetailEventCalendar() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >

app/(application)/division/[id]/(fitur-division)/calendar/index.tsx

@@ -155,6 +155,7 @@ export default function CalendarDivision() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
             style={[Styles.h100]}

app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx

@@ -315,6 +315,7 @@ export default function DiscussionDetail() {
                   <RefreshControl
                      refreshing={refreshing}
                      onRefresh={handleRefresh}
+                     tintColor={colors.icon}
                   />
                }
             >

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -204,6 +204,7 @@ export default function DiscussionDivision() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.icon}
                            />
                         }
                      />

app/(application)/division/[id]/(fitur-division)/document/index.tsx

@@ -415,6 +415,7 @@ export default function DocumentDivision() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }>
             <View style={[Styles.p15, Styles.mb100]}>

app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx

@@ -127,6 +127,7 @@ export default function DetailTaskDivision() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >

app/(application)/division/[id]/(fitur-division)/task/index.tsx

@@ -235,6 +235,7 @@ export default function ListTask() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -301,6 +302,7 @@ export default function ListTask() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />

app/(application)/division/[id]/index.tsx

@@ -78,6 +78,7 @@ export default function DetailDivisionFitur() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
             showsVerticalScrollIndicator={false}

app/(application)/division/[id]/info.tsx

@@ -186,6 +186,7 @@ export default function InformationDivision() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
             style={[Styles.h100, { backgroundColor: colors.background }]}

app/(application)/division/index.tsx

@@ -253,6 +253,7 @@ export default function ListDivision() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -288,6 +289,7 @@ export default function ListDivision() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />

app/(application)/group/index.tsx

@@ -190,7 +190,7 @@ export default function Index() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                            />
                         }
                      />

app/(application)/home.tsx

@@ -67,7 +67,7 @@ export default function Home() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
                />
             }
             showsVerticalScrollIndicator={false}

app/(application)/member/[id].tsx

@@ -99,7 +99,7 @@ export default function MemberDetail() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
-                  tintColor={colors.text}
+                  tintColor={colors.icon}
                />
             }
          >

app/(application)/member/index.tsx

@@ -171,7 +171,7 @@ export default function Index() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                            />
                         }
                      />

app/(application)/notification.tsx

@@ -1,4 +1,5 @@
 import BorderBottomItem from "@/components/borderBottomItem";
+import BorderBottomItemVertical from "@/components/borderBottomItemVertical";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
 import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -116,11 +117,11 @@ export default function Notification() {
                         getItem={getItem}
                         renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
-                              <BorderBottomItem
+                              <BorderBottomItemVertical
                                  borderType="bottom"
                                  icon={
-                                    <View style={[Styles.iconContent, item.isRead ? ColorsStatus.secondary : ColorsStatus.primary]}>
+                                    <View style={[Styles.iconContent, item.isRead && ColorsStatus.secondary]}>
-                                       <Feather name="bell" size={25} color="white" />
+                                       <Feather name="bell" size={25} color="black" />
                                     </View>
                                  }
                                  title={item.title}
@@ -129,8 +130,8 @@ export default function Notification() {
                                  textColor={item.isRead ? 'gray' : colors.text}
                                  onPress={() => {
                                     handleReadNotification(item.id, item.category, item.idContent)
-
                                  }}
+                                 bgColor={'transparent'}
                               />
                            )
                         }}
@@ -142,7 +143,7 @@ export default function Notification() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                            />
                         }
                      />

app/(application)/position/index.tsx

@@ -216,7 +216,7 @@ export default function Index() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                            />
                         }
                      />

app/(application)/profile.tsx

@@ -5,20 +5,42 @@ import Text from "@/components/Text";
 import { assetUserImage } from "@/constants/AssetsError";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
+import { apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/entitiesSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { Feather, Ionicons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
+import { Image, Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import ImageViewing from 'react-native-image-viewing';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 export default function Profile() {
    const { colors } = useTheme();
    const entities = useSelector((state: any) => state.entities)
    const [error, setError] = useState(false)
    const [preview, setPreview] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
+   const dispatch = useDispatch()
+   const { token, decryptToken } = useAuthSession()
+
+   async function handleUserLogin() {
+      const hasil = await decryptToken(String(token?.current))
+      apiGetProfile({ id: hasil })
+         .then((data) => dispatch(setEntities(data.data)))
+         .catch((error) => {
+            console.error(error)
+         });
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleUserLogin()
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
 
    return (
       <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
@@ -43,7 +65,16 @@ export default function Profile() {
                )
             }}
          />
-         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
+               />
+            }
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
             <View style={{ flexDirection: 'column' }}>
                <LinearGradient
                   colors={[colors.header, colors.homeGradient]}

app/(application)/project/[id]/index.tsx

@@ -118,7 +118,7 @@ export default function DetailProject() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
                />
             }
          >

app/(application)/project/index.tsx

@@ -275,6 +275,7 @@ export default function ListProject() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -353,6 +354,7 @@ export default function ListProject() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />

app/(application)/search.tsx

@@ -103,7 +103,7 @@ export default function Search() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                            />
                         }
                      >

components/borderBottomItemVertical.tsx

@@ -0,0 +1,53 @@
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import React, { useState } from "react";
+import { Dimensions, Pressable, View } from "react-native";
+import Text from "./Text";
+
+type Props = {
+   title?: string
+   icon: React.ReactNode
+   desc?: string
+   rightTopInfo?: string
+   onPress?: () => void
+   onLongPress?: () => void
+   borderType: 'all' | 'bottom' | 'none'
+   titleWeight?: 'normal' | 'bold'
+   bgColor?: string
+   descEllipsize?: boolean
+   textColor?: string,
+   titleShowAll?: boolean
+}
+
+export default function BorderBottomItemVertical({ title, icon, desc, onPress, onLongPress, rightTopInfo, borderType, titleWeight, bgColor, descEllipsize, textColor, titleShowAll }: Props) {
+   const { colors } = useTheme();
+   const textColorFix = textColor ? textColor : colors.text;
+
+   return (
+      <Pressable onLongPress={onLongPress} onPress={onPress}
+         style={({ pressed }) => [
+            borderType == 'bottom'
+               ? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon + '20' }]
+               : borderType == 'all'
+                  ? [Styles.wrapItemBorderAll, { borderColor: colors.icon + '20' }]
+                  : Styles.wrapItemBorderNone,
+            bgColor == "transparent" ? { backgroundColor: 'transparent' } : { backgroundColor: colors.card },
+         ]}
+      >
+         <View style={Styles.rowItemsCenter}>
+            {icon}
+            <View style={[Styles.ml10, { flex: 1 }]}>
+               <View style={Styles.rowSpaceBetween}>
+                  <View style={{ flex: 1, marginRight: 10 }}>
+                     <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
+                  </View>
+                  {
+                     rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: textColorFix }]}>{rightTopInfo}</Text>
+                  }
+               </View>
+               {desc && <Text style={[Styles.textDefault, { textAlign: 'left', color: textColorFix }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
+            </View>
+         </View>
+      </Pressable>
+   )
+}

components/modalSelect.tsx

@@ -162,7 +162,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                   category != 'status-task' ?
                      data.length > 0 ?
                         data.map((item: any, index: any) => (
-                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
+                           <Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
                               {
                                  category == 'member'
                                     ?
@@ -188,7 +188,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                      <>
                         {
                            dataStatus.map((item: any, index: any) => (
-                              <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => {
+                              <Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => {
                                  onSelect(item)
                                  close(false)
                               }}>

constants/Styles.ts

@@ -479,7 +479,7 @@ const Styles = StyleSheet.create({
       borderColor: '#d6d8f6',
       borderWidth: 1,
       borderRadius: 5,
-      marginBottom: 10
+      marginBottom: 5
    },
    wrapItemBorderNone: {
       padding: 10,
@@ -584,7 +584,6 @@ const Styles = StyleSheet.create({
       padding: 10,
       flexDirection: 'row',
       justifyContent: 'space-between',
-      borderColor: '#d6d8f6',
       borderBottomWidth: 1,
       alignItems: 'center'
    },