upd: division

Deskripsi:
- edit divisi
- update status divisi

NO Issues

app/(application)/division/[id]/add-member.tsx

@@ -4,12 +4,14 @@ import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Styles from "@/constants/Styles";
-import { apiAddMemberDivision, apiGetDivisionOneDetail, apiGetProjectOne, apiGetUser } from "@/lib/api";
+import { apiAddMemberDivision, apiGetDivisionOneDetail, apiGetUser } from "@/lib/api";
+import { setUpdateDivision } from "@/lib/divisionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
 
 type Props = {
    idUser: string,
@@ -25,6 +27,8 @@ export default function AddMemberDivision() {
    const [idGroup, setIdGroup] = useState('')
    const [selectMember, setSelectMember] = useState<any[]>([])
    const [search, setSearch] = useState('')
+   const update = useSelector((state: any) => state.divisionUpdate)
+   const dispatch = useDispatch()
 
    async function handleLoad() {
       try {
@@ -69,6 +73,7 @@ export default function AddMemberDivision() {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiAddMemberDivision({ id: id, data: { user: hasil, member: selectMember } })
          if (response.success) {
+            dispatch(setUpdateDivision(!update))
             ToastAndroid.show('Berhasil menambahkan anggota', ToastAndroid.SHORT)
             router.replace(`/division/${id}/info`)
          } else {

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

@@ -1,44 +1,114 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import ButtonBackHeader from "@/components/buttonBackHeader";
-import ButtonSaveHeader from "@/components/buttonSaveHeader"
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import { InputForm } from "@/components/inputForm"
+import { InputForm } from "@/components/inputForm";
-import Styles from "@/constants/Styles"
+import Styles from "@/constants/Styles";
-import { router, Stack, useLocalSearchParams } from "expo-router"
+import { apiEditDivision, apiGetDivisionOneDetail } from "@/lib/api";
-import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
 
 export default function EditDivision() {
-   const { id } = useLocalSearchParams()
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.divisionUpdate)
+   const { token, decryptToken } = useAuthSession();
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [data, setData] = useState({
+      name: "",
+      desc: "",
+   });
+   const [error, setError] = useState({
+      name: false,
+   });
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneDetail({ user: hasil, id });
+         setData({
+            name: response.data.division.name,
+            desc: response.data.division.desc,
+         });
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiEditDivision({ user: hasil, name: data.name, desc: data.desc }, id)
+         if (response.success) {
+            dispatch(setUpdateDivision(!update))
+            ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+            router.back()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      }
+   }
 
    return (
       <SafeAreaView>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerLeft: () => (
-               headerTitle: 'Edit Divisi',
+                  <ButtonBackHeader
-               headerTitleAlign: 'center',
+                     onPress={() => {
-               headerRight: () => <ButtonSaveHeader category="update" onPress={() => {
+                        router.back();
-                  ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                     }}
-                  router.push('/division/123/info')
+                  />
-               }} />
+               ),
+               headerTitle: "Edit Divisi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={error.name}
+                     category="update"
+                     onPress={() => { handleEdit() }}
+                  />
+               ),
             }}
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
-               <InputForm label="Nama Divisi" type="default" placeholder="Nama Divisi" required />
+               <InputForm
-               <InputForm label="Deskripsi" type="default" placeholder="Deskripsi Divisi" />
+                  label="Nama Divisi"
-               {/* <ButtonForm
+                  type="default"
-                  text="SIMPAN"
+                  placeholder="Nama Divisi"
-                  onPress={() => {
+                  required
-                     AlertKonfirmasi({
+                  value={data.name}
-                        title: 'Konfirmasi',
+                  error={error.name}
-                        desc: 'Apakah anda yakin ingin mengubah data?',
+                  errorText="Nama divisi tidak boleh kosong"
-                        onPress: () => {
+                  onChange={(value) => {
-                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                     setData({ ...data, name: value });
-                           router.push('/division/123/info')
+                     if (value == "") {
-                        }
+                        setError({ ...error, name: true });
-                     })
+                     } else {
-                  }} /> */}
+                        setError({ ...error, name: false });
+                     }
+                  }}
+               />
+               <InputForm
+                  label="Deskripsi"
+                  type="default"
+                  placeholder="Deskripsi Divisi"
+                  value={data.desc}
+                  onChange={(value) => {
+                     setData({ ...data, desc: value })
+                  }}
+               />
             </View>
          </ScrollView>
       </SafeAreaView>
-   )
+   );
-}
+}

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

@@ -4,6 +4,7 @@ import ButtonBackHeader from "@/components/buttonBackHeader"
 import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
 import DrawerBottom from "@/components/drawerBottom"
 import ImageUser from "@/components/imageNew"
+import SectionCancel from "@/components/sectionCancel"
 import { ColorsStatus } from "@/constants/ColorsStatus"
 import Styles from "@/constants/Styles"
 import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiUpdateStatusAdminDivision } from "@/lib/api"
@@ -12,6 +13,7 @@ import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-ico
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
 import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+import { useSelector } from "react-redux"
 
 type PropsDetail = {
    id: string,
@@ -38,6 +40,7 @@ export default function InformationDivision() {
    const [dataDetail, setDataDetail] = useState<PropsDetail>()
    const [dataMember, setDataMember] = useState<PropsMember[]>([])
    const [refresh, setRefresh] = useState(false)
+   const update = useSelector((state: any) => state.divisionUpdate)
    const [dataMemberChoose, setDataMemberChoose] = useState({
       id: '',
       name: '',
@@ -101,7 +104,7 @@ export default function InformationDivision() {
 
    useEffect(() => {
       handleLoad()
-   }, [refresh])
+   }, [refresh, update])
 
    function handleChooseMember(item: PropsMember) {
       setDataMemberChoose(item)
@@ -115,11 +118,16 @@ export default function InformationDivision() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Informasi Divisi',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightDivisionInfo id={id} />,
+               headerRight: () => <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive}/>,
             }}
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
+               {
+                  dataDetail?.isActive == false && (
+                     <SectionCancel title={'Divisi dinonaktifkan'} />
+                  )
+               }
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
                   <View style={[Styles.wrapPaper]}>
@@ -129,16 +137,21 @@ export default function InformationDivision() {
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefault, Styles.mv05]}>{dataMember.length} Anggota</Text>
                   <View style={[Styles.wrapPaper]}>
-                     <BorderBottomItem
+                     {
-                        onPress={() => { router.push(`/division/${id}/add-member`) }}
+                        dataDetail?.isActive && (
-                        borderType="none"
+                           <BorderBottomItem
-                        icon={
+                              onPress={() => { router.push(`/division/${id}/add-member`) }}
-                           <View style={[Styles.iconContent, ColorsStatus.gray]}>
+                              borderType="none"
-                              <Feather name="user-plus" size={25} color={'#384288'} />
+                              icon={
-                           </View>
+                                 <View style={[Styles.iconContent, ColorsStatus.gray]}>
-                        }
+                                    <Feather name="user-plus" size={25} color={'#384288'} />
-                        title="Tambah Anggota"
+                                 </View>
-                     />
+                              }
+                              title="Tambah Anggota"
+                           />
+                        )
+                     }
+
                      {
                         dataMember.map((item, index) => {
                            return (
@@ -146,7 +159,7 @@ export default function InformationDivision() {
                                  width={55}
                                  key={index}
                                  borderType="bottom"
-                                 onPress={() => { handleChooseMember(item) }}
+                                 onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
                                  icon={
                                     <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
                                  }

components/division/headerDivisionInfo.tsx

@@ -1,19 +1,46 @@
+import Styles from "@/constants/Styles"
+import { apiUpdateStatusDivision } from "@/lib/api"
+import { setUpdateDivision } from "@/lib/divisionUpdate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { MaterialCommunityIcons } from "@expo/vector-icons"
+import { router } from "expo-router"
 import { useState } from "react"
+import { ToastAndroid, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+import AlertKonfirmasi from "../alertKonfirmasi"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
-import { View } from "react-native"
-import Styles from "@/constants/Styles"
 import MenuItemRow from "../menuItemRow"
-import { MaterialCommunityIcons } from "@expo/vector-icons"
-import AlertKonfirmasi from "../alertKonfirmasi"
-import { router } from "expo-router"
 
 type Props = {
    id: string | string[]
+   active: boolean | undefined
 }
 
-export default function HeaderRightDivisionInfo({ id }: Props) {
+export default function HeaderRightDivisionInfo({ id, active }: Props) {
    const [isVisible, setVisible] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const update = useSelector((state: any) => state.divisionUpdate)
+   const dispatch = useDispatch()
+
+   async function handleUpdateStatus() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiUpdateStatusDivision({ data: { user: hasil, isActive: Boolean(active) }, id: String(id) })
+         if (response.success) {
+            dispatch(setUpdateDivision(!update))
+            ToastAndroid.show('Berhasil mengubah status', ToastAndroid.SHORT)
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      } finally {
+         setVisible(false)
+      }
+   }
+
    return (
       <>
          <ButtonMenuHeader onPress={() => { setVisible(true) }} />
@@ -29,15 +56,12 @@ export default function HeaderRightDivisionInfo({ id }: Props) {
                />
                <MenuItemRow
                   icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
-                  title="Non Aktifkan"
+                  title={active ? "Non Aktifkan" : "Aktifkan"}
                   onPress={() => {
                      AlertKonfirmasi({
                         title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menonaktifkan divisi?',
+                        desc: active ? 'Apakah anda yakin ingin menonaktifkan divisi?' : 'Apakah anda yakin ingin mengaktifkan divisi?',
-                        onPress: () => {
+                        onPress: () => { handleUpdateStatus() }
-                           setVisible(false)
-                           router.push('/division')
-                        }
                      })
                   }}
                />

components/sectionCancel.tsx

@@ -4,19 +4,24 @@ import { AntDesign } from "@expo/vector-icons";
 import { Text, View } from "react-native";
 
 type Props = {
-   text: string,
+   text?: string,
+   title?: string
 }
 
-export default function SectionCancel({ text }: Props) {
+export default function SectionCancel({ text, title }: Props) {
    return (
       <View style={[ColorsStatus.lightRed, Styles.p10, Styles.round10, Styles.mb15]}>
          <View style={[Styles.rowItemsCenter]}>
             <AntDesign name="warning" size={22} style={[Styles.mr10]} />
-            <Text style={[Styles.textDefaultSemiBold]}>Kegiatan Dibatalkan</Text>
+            <Text style={[Styles.textDefaultSemiBold]}>{title ? title : 'Kegiatan Dibatalkan'}</Text>
-         </View>
-         <View>
-            <Text style={[Styles.mt05]}>{text}</Text>
          </View>
+         {
+            text && (
+               <View>
+                  <Text style={[Styles.mt05]}>{text}</Text>
+               </View>
+            )
+         }
       </View>
    )
 }

lib/api.ts

@@ -383,3 +383,13 @@ export const apiAddMemberDivision = async ({ data, id }: { data: { user: string,
    const response = await api.post(`/mobile/division/${id}/detail`, data)
    return response.data;
 };
+
+export const apiEditDivision = async (data: { user: string, name: string, desc: string }, id: string) => {
+   const response = await api.put(`mobile/division/${id}`, data)
+   return response.data
+};
+
+export const apiUpdateStatusDivision = async ({ data, id }: { data: { user: string, isActive: boolean }, id: string }) => {
+   const response = await api.post(`/mobile/division/${id}/status`, data)
+   return response.data;
+};