bugfix for PostChip links, simplyify ConnectionField, enable Custom P…

…ost Type Connections
DiscipleTools · Apr 30, 2022 · 76ffd12 · 76ffd12
1 parent 08408c3
commit 76ffd12
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 190 deletions.
diff --git a/components/Field/Connection/ConnectionField.js b/components/Field/Connection/ConnectionField.js
@@ -8,10 +8,6 @@ import Select from "components/Select";
 import PostChip from "components/Post/PostChip";
 import SheetHeader from "components/Sheet/SheetHeader";
 import ConnectionSheet from "./ConnectionSheet";
-import UsersContactsSheet from "./UsersContactsSheet";
-import GroupsSheet from "./GroupsSheet";
-import PeopleGroupsSheet from "./PeopleGroupsSheet";
-import TrainingsSheet from "./TrainingsSheet";
 
 import useBottomSheet from "hooks/use-bottom-sheet";
 import useStyles from "hooks/use-styles";
@@ -23,15 +19,19 @@ import {
   baptizeIcon,
 } from "constants/icons";
 
-import { FieldNames, TabScreenConstants, ScreenConstants } from "constants";
+import {
+  ScreenConstants,
+  TabScreenConstants,
+  TypeConstants
+} from "constants";
 
 import { localStyles } from "./ConnectionField.styles";
 
 const ConnectionField = ({ editing, field, value, onChange }) => {
 
   const { styles, globalStyles } = useStyles(localStyles);
   const { expand } = useBottomSheet();
-  const { isPost, isContact, isGroup, getPostTypeByFieldName } = useType();
+  const { isPost, getPostTypeByField } = useType();
 
   // VALUES
   const values = value?.values || [];
@@ -43,128 +43,13 @@ const ConnectionField = ({ editing, field, value, onChange }) => {
     );
   };
 
-  const renderItemEdit = (item) => <PostChip id={item?.value} title={item?.name} type={getPostTypeByFieldName(field?.name)} onRemove={onRemove} />;
-  const renderItemView = (item) => <PostChip id={item?.value} title={item?.name} type={getPostTypeByFieldName(field?.name)} />;
+  const renderItemEdit = (item) => <PostChip id={item?.value} title={item?.name} type={getPostTypeByField(field)} onRemove={onRemove} />;
+  const renderItemView = (item) => <PostChip id={item?.value} title={item?.name} type={getPostTypeByField(field)} />;
   const renderItemLinkless = (item) => <PostChip id={item?.value} title={item?.name} onRemove={onRemove} />;
 
-  const PeopleGroupEdit = () => (
-    <Select
-      onOpen={() => {
-        expand({
-          defaultIndex: 3,
-          renderHeader: () => (
-            <SheetHeader
-              expandable
-              dismissable
-              title={field?.label || ''}
-            />
-          ),
-          renderContent: () => (
-            <PeopleGroupsSheet
-              values={values}
-              onChange={onChange}
-            />
-          )
-        });
-      }}
-      items={values}
-      renderItem={renderItemLinkless}
-    />
-  );
-
-  const PostEdit = () => {
-    const route = useRoute();
-    return(
-      <Select
-        onOpen={() => {
-          expand({
-            defaultIndex: 3,
-            renderHeader: () => (
-              <SheetHeader
-                expandable
-                dismissable
-                title={field?.label || ''}
-              />
-            ),
-            renderContent: () => 
-              <ConnectionSheet
-                id={route?.params?.id}
-                fieldName={field?.name}
-                values={values}
-                onChange={onChange}
-              />
-          });
-        }}
-        items={values}
-        renderItem={renderItemEdit}
-        //style={style}
-        //optionStyle={optionStyle}
-      />
-    );
-  };
-
-  const ContactEdit = () => {
-    const route = useRoute();
-    return(
-      <Select
-        onOpen={() => {
-          expand({
-            defaultIndex: 3,
-            renderHeader: () => (
-              <SheetHeader
-                expandable
-                dismissable
-                title={field?.label || ''}
-              />
-            ),
-            renderContent: () => 
-              <UsersContactsSheet
-                id={route?.params?.id}
-                values={values}
-                onChange={onChange}
-              />
-          });
-        }}
-        items={values}
-        renderItem={renderItemEdit}
-        //style={style}
-        //optionStyle={optionStyle}
-      />
-    );
-  };
-
-  const GroupEdit = () => {
-    const route = useRoute();
-    return(
-      <Select
-        onOpen={() => {
-          expand({
-            defaultIndex: 3,
-            renderHeader: () => (
-              <SheetHeader
-                expandable
-                dismissable
-                title={field?.label || ''}
-              />
-            ),
-            renderContent: () => 
-              <GroupsSheet
-                id={route?.params?.id}
-                values={values}
-                onChange={onChange}
-              />
-          });
-        }}
-        items={values}
-        renderItem={renderItemEdit}
-        //style={style}
-        //optionStyle={optionStyle}
-      />
-    );
-  };
-
-  const TrainingEdit = () => {
+  const PostEdit = ({ linkless }) => {
     const route = useRoute();
+    const type = getPostTypeByField(field);
     return(
       <Select
         onOpen={() => {
@@ -178,29 +63,23 @@ const ConnectionField = ({ editing, field, value, onChange }) => {
               />
             ),
             renderContent: () => (
-              <TrainingsSheet
+              <ConnectionSheet
                 id={route?.params?.id}
+                type={type}
                 values={values}
                 onChange={onChange}
               />
             )
           });
         }}
         items={values}
-        renderItem={renderItemEdit}
+        renderItem={linkless ? renderItemLinkless : renderItemEdit}
         //style={style}
         //optionStyle={optionStyle}
       />
     );
   };
 
-  const PeopleGroupView = () => (
-    <Select
-      items={values}
-      renderItem={renderItemView}
-    />
-  );
-
   const GroupView = () => {
     const navigation = useNavigation();
     return (
@@ -270,45 +149,21 @@ const ConnectionField = ({ editing, field, value, onChange }) => {
     />
   );
 
-  const isPeopleGroupField = () => (
-    field?.name === FieldNames.PEOPLE_GROUPS
-  );
-
-  const isGroupField = () => (
-    field?.name === FieldNames.GROUPS ||
-    field?.name === FieldNames.PARENT_GROUPS ||
-    field?.name === FieldNames.PEER_GROUPS ||
-    field?.name === FieldNames.CHILD_GROUPS
-  );
-
-  const isContactField = () => (
-    field?.name === FieldNames.COACHES ||
-    field?.name === FieldNames.MEMBERS
-  );
-
-  const isTrainingField = () => (
-    field?.name === FieldNames.TRAININGS
-  );
-
   const ConnectionFieldEdit = () => {
-    if (isContactField()) return <ContactEdit />;
-    if (isPeopleGroupField()) return <PeopleGroupEdit />;
-    if (isGroupField()) return <GroupEdit />;
-    if (isTrainingField()) return <TrainingEdit />;
-    if (isContact) return <ContactEdit />;
-    if (isGroup) return <GroupEdit />;
+    const postType = getPostTypeByField(field);
+    if (postType === TypeConstants.PEOPLE_GROUP) return <PostEdit linkless />;
     if (isPost) return <PostEdit />;
     return null;
   };
 
   const ConnectionFieldView = () => {
-    if (isPeopleGroupField()) return <PeopleGroupView />;
-    if (isGroupField()) return <GroupView />;
+    const postType = getPostTypeByField(field);
+    if (postType === TypeConstants.GROUP) return <GroupView />;
     if (isPost) return <PostView />;
     return null; 
   };
 
   if (editing) return <ConnectionFieldEdit />;
   return <ConnectionFieldView />;
 };
-export default ConnectionField;
+export default ConnectionField;
diff --git a/components/Field/Connection/ConnectionSheet.js b/components/Field/Connection/ConnectionSheet.js
@@ -5,16 +5,26 @@ import { CheckIcon, MaterialCommunityIcon } from "components/Icon";
 import FilterList from "components/FilterList";
 
 import useBottomSheet from "hooks/use-bottom-sheet";
+import useFilter from "hooks/use-filter";
+import useList from "hooks/use-list";
 import useStyles from "hooks/use-styles";
 
 import { localStyles } from "./ConnectionSheet.styles";
 
-const ConnectionSheet = ({ items, renderItem, values, onChange, search, onSearch }) => {
+const ConnectionSheet = ({ id, type, renderItem, values, onChange }) => {
 
   const { styles, globalStyles } = useStyles(localStyles);
   const { delayedClose } = useBottomSheet();
 
-  if (!items) return null;
+  const { search, onSearch } = useFilter();
+
+  // exclude currently selected values from options list
+  const exclude = values?.map(item => item?.value);
+  // exclude the the current post (ie, contact or group)
+  if (id) exclude.push(id);
+
+  const { data: items } = useList({ search, exclude, type });
+  if (!items) return [];
 
   // MAP TO API
   const mapToAPI = (newItem) => {

diff --git a/components/Field/UserSelect/UserSelectField.js b/components/Field/UserSelect/UserSelectField.js
@@ -13,12 +13,11 @@ const UserSelectField = ({ editing, field, value, onChange }) => {
 
   const { delayedClose, expand } = useBottomSheet();
 
-  // SELECTED 
-  const selectedLabel = value?.label ?? ''; 
-
   const onRemove = () => onChange(null, { autosave: true });
 
-  const renderItemEdit = (item) => <PostChip id={item?.key} title={item?.label} type={TypeConstants.CONTACT} onRemove={onRemove} />;
+  //const renderItemEdit = (item) => <PostChip id={item?.key} title={item?.label} type={TypeConstants.CONTACT} onRemove={onRemove} />;
+  const renderItemEdit = (item) => <PostChip id={item?.key} title={item?.label} type={null} onRemove={onRemove} />;
+  const renderItemView = (item) => <PostChip id={item?.key} title={item?.label} />;
 
   // EDIT MODE
   const UserSelectFieldEdit = () => {
@@ -37,18 +36,6 @@ const UserSelectField = ({ editing, field, value, onChange }) => {
       delayedClose();
     };
 
-    // MAP ITEMS
-    const mapItems = (users) => {
-      if (!users) return [];
-      return users.map(user => {
-        return {
-          key: user?.ID,
-          label: `${ user?.name } (#${ user?.ID })`,
-          selected: selectedLabel === user?.ID,
-        };
-      });
-    };
-
     return(
       <Select
         onOpen={() => {
@@ -76,8 +63,12 @@ const UserSelectField = ({ editing, field, value, onChange }) => {
   };
 
   // VIEW MODE
-  // TODO
-  const UserSelectFieldView = () => null;
+  const UserSelectFieldView = () => (
+    <Select
+      items={[value]}
+      renderItem={renderItemView}
+    />
+  );
 
   if (editing) return <UserSelectFieldEdit />;
   return <UserSelectFieldView />;

diff --git a/components/Post/PostChip.js b/components/Post/PostChip.js
@@ -7,6 +7,7 @@ import Chip from "components/Chip";
 
 import useHaptics from "hooks/use-haptics";
 import useStyles from "hooks/use-styles";
+import useType from "hooks/use-type";
 
 import { ScreenConstants } from "constants";
 
@@ -19,6 +20,7 @@ const PostChip = ({ id, icon, title, type, onRemove, onGoBack }) => {
   const navigation = useNavigation();
   const { vibrate } = useHaptics();
   const { styles, globalStyles } = useStyles(localStyles);
+  const { postType, getTabScreenFromType } = useType();
   const selected = type ? true : null;
   return(
     <Chip
@@ -27,12 +29,23 @@ const PostChip = ({ id, icon, title, type, onRemove, onGoBack }) => {
       selected={selected}
       disabled={!id || !type}
       onPress={() => {
+        if (type !== postType) {
+          const tabScreen = getTabScreenFromType(type);
+          navigation.jumpTo(tabScreen, {
+            screen: ScreenConstants.DETAILS,
+            id,
+            name: title,
+            type,
+          });
+          return;
+        };
         navigation.push(ScreenConstants.DETAILS, {
           id,
           name: title,
           type,
           onGoBack: () => navigation.goBack()
         });
+        return;
       }}
       label={titleize(title)}
       startIcon={icon ?? null}
@@ -51,4 +64,4 @@ const PostChip = ({ id, icon, title, type, onRemove, onGoBack }) => {
     />
   );
 };
-export default PostChip;
+export default PostChip;
diff --git a/constants/index.js b/constants/index.js
@@ -124,6 +124,7 @@ export const FieldNames = Object.freeze({
   CHILD_GROUPS: "child_groups",
   PEOPLE_GROUPS: "people_groups",
   BAPTISM_DATE: "baptism_date",
+  LEADERS: "leaders",
   MEMBER_COUNT: "member_count",
   MEMBERS: "members",
   GROUPS: "groups",
@@ -232,7 +233,7 @@ export const TypeConstants = Object.freeze({
   GROUP: "groups",
   NOTIFICATION: "notifications",
   TRAINING: "trainings",
-  PEOPLEGROUPS: "peoplegroups",
+  PEOPLE_GROUP: "peoplegroups",
   MY_USER: "contacts",
 });