Fixed folow|join button in previews sends you to related page, fixed with a...

Fixed folow|join button in previews sends you to related page, fixed with a programmatioc workaround ( preventDefault() ) - would be much better to solve it with HTML. finished also remainig checks for search items follow logics

src/HOC/pages/search/Search.tsx

@@ -68,13 +68,13 @@ export const SearchPageHOC = connectInfiniteHits(_SearchPageHOC);
 const CollectionPreviewHit: React.FC<{ hit: CollectionHit }> = ({ hit }) => {
   const isLocal = useIsLocal(hit);
   const previewFragment = collectionHit2gql(hit, isLocal);
-  const toggleFollowFormik = useToggleFollowHitFormik(hit);
+  const { toggleFollowFormik } = useFollowHitHelper(hit);
   const props =
     previewFragment &&
     collectionFragment2UIProps({
       collection: previewFragment,
       hideActions: false,
-      toggleFollowFormik: toggleFollowFormik
+      toggleFollowFormik
     });
   !props && console.warn(`Could not preview searchHit:`, hit);
   // console.log(`Collection:`, props)
@@ -84,14 +84,17 @@ const CollectionPreviewHit: React.FC<{ hit: CollectionHit }> = ({ hit }) => {
 const CommunityPreviewHit: React.FC<{ hit: CommunityHit }> = ({ hit }) => {
   const isLocal = useIsLocal(hit);
   const previewFragment = communityHit2gql(hit, isLocal);
-  const toggleFollowFormik = useToggleFollowHitFormik(hit);
+  const {
+    toggleFollowFormik: toggleJoinFormik,
+    hitSearchFollow
+  } = useFollowHitHelper(hit);
   const props =
     previewFragment &&
     communityFragment2UIProps({
       community: previewFragment,
       hideActions: false,
-      toggleJoinFormik: toggleFollowFormik,
-      isCreator: false //FIXME
+      toggleJoinFormik,
+      isCreator: !!hitSearchFollow?.isCreator
     });
   !props && console.warn(`Could not preview searchHit:`, hit);
   // console.log(`Community:`, props)
@@ -136,13 +139,13 @@ const useIsLocal = (hit: Hit) => {
   // console.log(`---`)
   return isLocal;
 };
-const useToggleFollowHitFormik = (hit: Hit) => {
+const useFollowHitHelper = (hit: Hit) => {
   const { data } = useSearchHostIndexAndMyFollowsQuery({
     context: mnCtx({ noShowError: true })
   });
   const [follow, followResult] = useSearchFollowMutation();
   const [unfollow, unfollowResult] = useSearchUnfollowMutation();
-  const myFollow = React.useMemo(
+  const hitSearchFollow = React.useMemo(
     () =>
       (data?.me?.searchFollows || []).find(
         searchFollow => searchFollow.canonicalUrl === hit.canonicalUrl
@@ -150,20 +153,34 @@ const useToggleFollowHitFormik = (hit: Hit) => {
     [data, hit]
   );
 
+  const canFollow = !hitSearchFollow?.followId;
+  const canUnfollow =
+    hitSearchFollow?.followId &&
+    !(hitSearchFollow.communityId && hitSearchFollow.isCreator);
+
   const toggleFollowFormik = useFormik({
     initialValues: {},
     onSubmit: async () => {
       if (!hit.canonicalUrl || followResult.loading || unfollowResult.loading) {
         return;
       }
-      return myFollow
-        ? unfollow({
-            variables: {
-              contextId: myFollow.canonicalUrl /*FIXME with myFollow.followId */
-            }
-          })
-        : follow({ variables: { url: hit.canonicalUrl } });
+      if (hitSearchFollow && canUnfollow) {
+        return unfollow({
+          variables: {
+            contextId: hitSearchFollow.followId
+          }
+        });
+      } else if (canFollow) {
+        return follow({ variables: { url: hit.canonicalUrl } });
+      }
+      return;
     }
   });
-  return toggleFollowFormik;
+  return React.useMemo(
+    () => ({
+      toggleFollowFormik,
+      hitSearchFollow
+    }),
+    [toggleFollowFormik, hitSearchFollow]
+  );
 };

src/fe/search/SearchData.generated.tsx

@@ -27,7 +27,7 @@ export type SearchMeFragment = (
   { __typename: 'Me' }
   & { searchFollows: Array<(
     { __typename: 'SearchFollow' }
-    & Pick<Types.SearchFollow, 'canonicalUrl' | 'collectionId' | 'communityId'>
+    & Pick<Types.SearchFollow, 'canonicalUrl' | 'collectionId' | 'communityId' | 'followId' | 'isCreator'>
   )> }
 );
 
@@ -65,6 +65,8 @@ export const SearchMeFragmentDoc = gql`
     canonicalUrl
     collectionId
     communityId
+    followId
+    isCreator
   }
 }
     `;

src/ui/modules/Previews/Collection.tsx

@@ -64,7 +64,10 @@ export const Collection: React.FC<Props> = ({
                 <ActionItem
                   bordered
                   isFollowing={isFollowing ? true : false}
-                  onClick={toggleFollowFormik.submitForm}
+                  onClick={e => {
+                    e.preventDefault();
+                    toggleFollowFormik.submitForm();
+                  }}
                 >
                   <ActionText
                     ml={1}

src/ui/modules/Previews/Community.tsx

@@ -100,7 +100,10 @@ export const Community: React.FC<Props> = ({
                 variant="outline"
                 isDisabled={isCreator ? true : false}
                 isSubmitting={toggleJoinFormik.isSubmitting}
-                onClick={toggleJoinFormik.submitForm}
+                onClick={e => {
+                  e.preventDefault();
+                  toggleJoinFormik.submitForm();
+                }}
               >
                 <Text variant={'suptitle'}>
                   {joined ? <Trans>Leave</Trans> : <Trans>Join</Trans>}