Icons and prettier (#620)

* Only Prettier * Prettier * Icon for coaches field * add padding to offline bar * Setup offlineBar * New icon for name field * Revert "New icon for name field" This reverts commit 40a7db7. * Corrected icon for training * Icons: training & parent & name * meeting time logo in training post type
DiscipleTools · Mar 27, 2022 · 2043e79 · 2043e79
1 parent 57cd625
commit 2043e79
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 118 deletions.
diff --git a/components/Field/FieldIcon.js b/components/Field/FieldIcon.js
@@ -51,13 +51,22 @@ const FieldIcon = ({ field, hide }) => {
         iconName = "calendar";
       }
       break;
+    case FieldTypes.DATETIME_SERIES:
+      if (name.includes("meeting")) {
+        iconType = "MaterialCommunityIcons";
+        iconName = "calendar-clock";
+      } else {
+        iconType = "MaterialCommunityIcons";
+        iconName = "calendar-clock";
+      }
+      break;
     case FieldTypes.CONNECTION:
       if (name.includes("subassigned")) {
         iconType = "MaterialCommunityIcons";
         iconName = "briefcase-account-outline";
       } else if (name.includes("parent")) {
         iconType = "MaterialCommunityIcons";
-        iconName = "drawing-box";
+        iconName = "triangle";
       } else if (name.includes("peer")) {
         iconType = "MaterialCommunityIcons";
         iconName = "ray-start-end";
@@ -77,6 +86,9 @@ const FieldIcon = ({ field, hide }) => {
       } else if (name.includes("coached_by")) {
         iconType = "MaterialCommunityIcons";
         iconName = "teach";
+      } else if (name.includes("coaches")) {
+        iconType = "MaterialCommunityIcons";
+        iconName = "teach";
       } else if (name.includes("baptized_by")) {
         iconType = "MaterialCommunityIcons";
         iconName = "water";
@@ -91,7 +103,7 @@ const FieldIcon = ({ field, hide }) => {
         iconName = "account-group";
       } else if (name.includes("train")) {
         iconType = "MaterialCommunityIcons";
-        iconName = "chalkboard-teacher";
+        iconName = "teach";
       } else if (name.includes("members")) {
         iconType = "MaterialCommunityIcons";
         iconName = "format-list-bulleted";
@@ -196,6 +208,15 @@ const FieldIcon = ({ field, hide }) => {
         iconName = "tag-multiple";
       }
       break;
+    case FieldTypes.TASK:
+      if (name.includes("task")) {
+        iconType = "MaterialCommunityIcons";
+        iconName = "calendar-clock";
+      } else {
+        iconType = "MaterialCommunityIcons";
+        iconName = "calendar-clock";
+      }
+      break;
     case FieldTypes.TEXT:
       if (name.includes("nickname")) {
         iconType = "MaterialCommunityIcons";

diff --git a/components/Icon.js b/components/Icon.js
@@ -49,11 +49,11 @@ export const ArrowIcon = ({ onPress, style }) => {
 
 export const ChevronIcon = ({ header, onPress, style }) => {
   const { isRTL } = useI18N();
-  if (isRTL && header) return <ChevronForwardIcon onPress={onPress} style={style} />;
+  if (isRTL && header)
+    return <ChevronForwardIcon onPress={onPress} style={style} />;
   if (header) return <ChevronBackIcon onPress={onPress} style={style} />;
-  if (isRTL)  return <ChevronBackIcon onPress={onPress} style={style} />;
+  if (isRTL) return <ChevronBackIcon onPress={onPress} style={style} />;
   return <ChevronForwardIcon onPress={onPress} style={style} />;
-
 };
 
 // Static Icons
@@ -164,9 +164,9 @@ export const MapIcon = ({ onPress, style }) => (
 export const OnePasswordIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="onepassword" onPress={onPress} style={style} />
 );
-//TODO more icon
+//TODO icon for more post Types
 export const PostIcon = ({ onPress, style }) => (
-  <MaterialCommunityIcon name="post-outline" onPress={onPress} style={style} />
+  <MaterialCommunityIcon name="teach" onPress={onPress} style={style} />
 );
 export const RemoveIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="minus" onPress={onPress} style={style} />

diff --git a/components/OfflineBar.styles.js b/components/OfflineBar.styles.js
@@ -1,6 +1,6 @@
 export const localStyles = ({ theme, isRTL, isIOS }) => ({
   offlineBar: {
-    height: 20,
+    height: 24,
     backgroundColor: theme.warning,
   },
   offlineBarText: {
@@ -9,4 +9,4 @@ export const localStyles = ({ theme, isRTL, isIOS }) => ({
     textAlignVertical: "center",
     textAlign: "center",
   },
-});
+});
diff --git a/constants/index.js b/constants/index.js
@@ -83,6 +83,7 @@ export const FieldTypes = Object.freeze({
   COMMUNICATION_CHANNEL: "communication_channel",
   CONNECTION: "connection",
   DATE: "date",
+  DATETIME_SERIES: "datetime_series",
   KEY_SELECT: "key_select",
   LOCATION: "location",
   LOCATION_GRID: "location_grid",
@@ -91,6 +92,7 @@ export const FieldTypes = Object.freeze({
   NUMBER: "number",
   POST_USER_META: "post_user_meta",
   TAGS: "tags",
+  TASK: "task",
   TEXT: "text",
   TEXTAREA: "textarea",
   USER_SELECT: "user_select",

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -1,10 +1,12 @@
 import React, { useEffect, useLayoutEffect, useReducer, useState } from "react";
 import { Image, RefreshControl, Text, View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from "@react-navigation/native";
 
 import { BellIcon, CogIcon } from "components/Icon";
 import { HeaderRight } from "components/Header/Header";
+import OfflineBar from "components/OfflineBar";
+
 import MetricCard from "components/Card/MetricCard";
 import PendingContactsCard from "components/Card/PendingContactsCard";
 import ActivityLogCard from "components/Card/ActivityLogCard";
@@ -18,15 +20,18 @@ import { ScreenConstants, TypeConstants } from "constants";
 
 import { findFilterById, labelize } from "utils";
 
-import { localStyles } from './HomeScreen.styles';
+import { localStyles } from "./HomeScreen.styles";
 
 const HomeScreen = ({ navigation, route }) => {
-
   const isFocused = useIsFocused();
   const { styles, globalStyles } = useStyles(localStyles);
   const { i18n } = useI18N();
-  const { data: contactFilters, mutate: mutateContactFilters } = useFilters({ type: TypeConstants.CONTACT });
-  const { data: groupFilters, mutate: mutateGroupFilters } = useFilters({ type: TypeConstants.GROUP });
+  const { data: contactFilters, mutate: mutateContactFilters } = useFilters({
+    type: TypeConstants.CONTACT,
+  });
+  const { data: groupFilters, mutate: mutateGroupFilters } = useFilters({
+    type: TypeConstants.GROUP,
+  });
   const { hasNotifications } = useNotifications();
 
   const [refreshing, setRefreshing] = useState(false);
@@ -46,53 +51,49 @@ const HomeScreen = ({ navigation, route }) => {
   const renderHeaderLeft = (props) => (
     <View style={globalStyles.rowContainer}>
       <Image source={require("assets/dt-icon.png")} style={styles.logo} />
-      <Text style={styles.brandText}>
-        D.T
-      </Text>
+      <Text style={styles.brandText}>D.T</Text>
     </View>
   );
 
   useLayoutEffect(() => {
     const kebabItems = [
       {
-        label: i18n.t('global.viewOnMobileWeb'),
+        label: i18n.t("global.viewOnMobileWeb"),
         urlPath: "/settings/",
       },
       {
-        label: i18n.t('settingsScreen.helpSupport'),
+        label: i18n.t("settingsScreen.helpSupport"),
         url: "https://disciple.tools/user-docs/getting-started-info/admin/settings-dt/general-settings-dt/",
-      }
+      },
     ];
     const renderStartIcons = () => (
       <>
         <View style={styles.headerIcon}>
           <BellIcon
             onPress={() => navigation.push(ScreenConstants.NOTIFICATIONS)}
           />
-          { hasNotifications && (
+          {hasNotifications && (
             <View style={styles.notificationsDot(hasNotifications)} />
           )}
         </View>
         <View style={styles.headerIcon}>
-          <CogIcon
-            onPress={() => navigation.push(ScreenConstants.SETTINGS)}
-          />
-          { hasAccountUpdates && (
+          <CogIcon onPress={() => navigation.push(ScreenConstants.SETTINGS)} />
+          {hasAccountUpdates && (
             <View style={styles.notificationsDot(hasAccountUpdates)} />
           )}
         </View>
       </>
     );
     navigation.setOptions({
-      title: '',
+      title: "",
       headerLeft: (props) => renderHeaderLeft(props),
       headerRight: (props) => (
         <HeaderRight
           kebabItems={kebabItems}
           renderStartIcons={renderStartIcons}
           props
         />
-      )
+      ),
     });
   }, [navigation, hasNotifications, hasAccountUpdates]);
 
@@ -102,7 +103,7 @@ const HomeScreen = ({ navigation, route }) => {
 
   const FavoriteContactsCard = () => {
     const filter = findFilterById("favorite", contactFilters);
-    return(
+    return (
       <MetricCard
         title={filter?.name}
         filter={filter}
@@ -113,7 +114,7 @@ const HomeScreen = ({ navigation, route }) => {
 
   const FavoriteGroupsCard = () => {
     const filter = findFilterById("favorite", groupFilters);
-    return(
+    return (
       <MetricCard
         title={filter?.name}
         filter={filter}
@@ -151,57 +152,45 @@ const HomeScreen = ({ navigation, route }) => {
 
   const ActiveContactsCard = () => {
     const filter = findFilterById("my_active", contactFilters);
-    const title = `${ filter?.name } ${ labelize (TypeConstants.CONTACT) }`;
-    return(
-      <MetricCard
-        title={title}
-        filter={filter}
-        type={TypeConstants.CONTACT}
-      />
+    const title = `${filter?.name} ${labelize(TypeConstants.CONTACT)}`;
+    return (
+      <MetricCard title={title} filter={filter} type={TypeConstants.CONTACT} />
     );
   };
 
   const ActiveGroupsCard = () => {
     const filter = findFilterById("my_active", groupFilters);
-    const title = `${ filter?.name } ${ labelize(TypeConstants.GROUP) }`;
-    return(
-      <MetricCard
-        title={title}
-        filter={filter}
-        type={TypeConstants.GROUP}
-      />
+    const title = `${filter?.name} ${labelize(TypeConstants.GROUP)}`;
+    return (
+      <MetricCard title={title} filter={filter} type={TypeConstants.GROUP} />
     );
   };
 
   return (
-    <ScrollView style={[
-      globalStyles.screenContainer,
-      styles.container
-    ]}
-      refreshControl={
-        <RefreshControl
+    <>
+      <OfflineBar />
+      <ScrollView
+        style={[globalStyles.screenContainer, styles.container]}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+      >
+        <View style={[globalStyles.rowContainer, styles.cardRowContainer]}>
+          <FavoriteContactsCard />
+          <FavoriteGroupsCard />
+        </View>
+        <View style={[globalStyles.rowContainer, styles.cardRowContainer]}>
+          <ActiveContactsCard />
+          <ActiveGroupsCard />
+        </View>
+        <PendingContactsCard
+          filters={contactFilters}
           refreshing={refreshing}
           onRefresh={onRefresh}
         />
-      }
-    >
-      <View style={[
-        globalStyles.rowContainer,
-        styles.cardRowContainer
-      ]}>
-        <FavoriteContactsCard />
-        <FavoriteGroupsCard />
-      </View>
-      <View style={[
-        globalStyles.rowContainer,
-        styles.cardRowContainer
-      ]}>
-        <ActiveContactsCard />
-        <ActiveGroupsCard />
-      </View>
-      <PendingContactsCard filters={contactFilters} refreshing={refreshing} onRefresh={onRefresh} />
-      <ActivityLogCard preview={5} refreshing={refreshing} />
-    </ScrollView>
+        <ActivityLogCard preview={5} refreshing={refreshing} />
+      </ScrollView>
+    </>
   );
 };
-export default HomeScreen;
+export default HomeScreen;