embedded pagination formiks functionality in one single hook - usePage, as...

embedded pagination formiks functionality in one single hook - usePage, as theyre always used together

src/HOC/modules/Sidebar/Sidebar.tsx

@@ -8,13 +8,12 @@ import {
 } from 'ui/modules/Sidebar/index';
 import { MyFollowedCommunityDataFragment } from 'fe/community/myFollowed/myFollowedCommunities.generated';
 import { SideBarContext } from 'HOC/context/SideBar';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 
 export interface SidebarHOC {}
 export const SidebarHOC: FC<SidebarHOC> = () => {
   const { isOpen: isSidebarOpen } = useContext(SideBarContext);
   const { myCommunityFollowsPage } = useMyFollowedCommunities();
-  const [LoadMoreFormik] = useFormikPage(myCommunityFollowsPage);
+  const [LoadMoreFormik] = myCommunityFollowsPage.formiks;
   const communities = useMemo(
     () =>
       myCommunityFollowsPage.edges

src/HOC/pages/collection/CollectionPage.tsx

 import { useCollectionOutboxActivities } from 'fe/activities/outbox/collection/useCollectionOutboxActivities';
 import { useCollection } from 'fe/collection/useCollection';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { useCollectionResources } from 'fe/resource/collection/useCollectionResources';
 import { useCollectionFollowers } from 'fe/user/followers/collection/useCollectionFollowers';
 import { Collection } from 'graphql/types.generated';
@@ -34,13 +33,13 @@ export const CollectionPage: FC<CollectionPage> = props => {
   const { collectionFollowersPage } = useCollectionFollowers(
     props.collectionId
   );
-  const [loadMoreFollowers] = useFormikPage(collectionFollowersPage);
+  const [loadMoreFollowers] = collectionFollowersPage.formiks;
 
   const { resourcesPage } = useCollectionResources(props.collectionId);
-  const [loadMoreResources] = useFormikPage(resourcesPage);
+  const [loadMoreResources] = resourcesPage.formiks;
 
   const { activitiesPage } = useCollectionOutboxActivities(props.collectionId);
-  const [loadMoreActivities] = useFormikPage(activitiesPage);
+  const [loadMoreActivities] = activitiesPage.formiks;
 
   const collectionPageProps = useMemo<CollectionPageProps | null>(() => {
     if (!collection) {

src/HOC/pages/community/CommunityPage.tsx

@@ -15,7 +15,6 @@ import { Box } from 'rebass/styled-components';
 import { useHistory } from 'react-router-dom';
 import { useCommunityFollowers } from 'fe/user/followers/community/useCommunityFollowers';
 import { UserPreviewHOC } from 'HOC/modules/previews/user/UserPreview';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 
 export enum CommunityPageTab {
   Activities,
@@ -33,11 +32,11 @@ export const CommunityPage: FC<CommunityPage> = ({ communityId, basePath }) => {
   const { community, createThread } = useCommunity(communityId);
   const { communityFollowersPage } = useCommunityFollowers(communityId);
   const { threadsPage } = useCommunityThreads(communityId);
-  const [loadMoreThreads] = useFormikPage(threadsPage);
+  const [loadMoreThreads] = threadsPage.formiks;
   const { collectionsPage } = useCommunityCollections(communityId);
-  const [loadMoreCollections] = useFormikPage(collectionsPage);
+  const [loadMoreCollections] = collectionsPage.formiks;
   const { activitiesPage } = useCommunityOutboxActivities(communityId);
-  const [loadMoreActivities] = useFormikPage(activitiesPage);
+  const [loadMoreActivities] = activitiesPage.formiks;
 
   const history = useHistory();
   const newThreadFormik = useFormik<{ text: string }>({

src/HOC/pages/discover/DiscoverPage.tsx

@@ -8,7 +8,6 @@ import { useAllCommunities } from 'fe/community/all/useAllCommunities';
 import { CommunityPreviewHOC } from 'HOC/modules/previews/community/CommunityPreview';
 import { CollectionPreviewHOC } from 'HOC/modules/previews/collection/CollectionPreview';
 import { useAllCollections } from 'fe/collection/all/useAllCollections';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { Box } from 'rebass';
 
 export enum DiscoverPageTabs {
@@ -23,19 +22,19 @@ export interface DiscoverPage {
 }
 export const DiscoverPage: FC<DiscoverPage> = ({ basePath, tab }) => {
   const { activitiesPage } = useInstanceOutboxActivities();
-  const [activitiesPageNext /* , activitiesPagePrevious */] = useFormikPage(
-    activitiesPage
-  );
+  const [
+    activitiesPageNext /* , activitiesPagePrevious */
+  ] = activitiesPage.formiks;
 
   const { allCommunitiesPage } = useAllCommunities();
   const [
     allCommunitiesPageNext /* , allCommunitiesPagePrevious */
-  ] = useFormikPage(allCommunitiesPage);
+  ] = allCommunitiesPage.formiks;
 
   const { allCollectionsPage } = useAllCollections();
   const [
     allCollectionsPageNext /* , allCollectionsPagePrevious */
-  ] = useFormikPage(allCollectionsPage);
+  ] = allCollectionsPage.formiks;
 
   const propsUI = useMemo<Props>(() => {
     const FeaturedCollectionsBox = <FeaturedCollections />;

src/HOC/pages/home/HomeHoc.tsx

 import { useMyInboxActivities } from 'fe/activities/inbox/my/useMyInboxActivities';
 // import { useMyFollowedCollections } from 'fe/collection/myFollowed/myFollowedCollections';
 // import { useMyFollowedCommunities } from 'fe/community/myFollowed/myFollowedCommunities';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { ActivityPreviewHOC } from 'HOC/modules/previews/activity/ActivityPreview';
 // import { CollectionPreviewHOC } from 'HOC/modules/previews/collection/CollectionPreview';
 // import { CommunityPreviewHOC } from 'HOC/modules/previews/community/CommunityPreview';
@@ -65,7 +64,7 @@ export const HomePageHOC: FC<HomePageHOC> = ({ basePath }) => {
   // }, [myFollowedCollectionsPage]);
 
   const { activitiesPage } = useMyInboxActivities();
-  const [nextInboxFormik] = useFormikPage(activitiesPage);
+  const [nextInboxFormik] = activitiesPage.formiks;
   const InboxElements = useMemo<Props['InboxElements']>(() => {
     return (
       <>

src/HOC/pages/settings/flags/InstanceFlagsSection.tsx

 import { useAllFlags } from 'fe/flags/all/useAllFlags';
 import { getActivityActor } from 'fe/lib/activity/getActivityActor';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { FlagPreviewHOC } from 'HOC/modules/previews/flag/FlagPreview';
 import React, { FC, useMemo } from 'react';
 import { ActivityPreview, Status } from 'ui/modules/ActivityPreview';
@@ -11,7 +10,7 @@ export interface InstanceFlagsSection {}
 
 export const InstanceFlagsSection: FC<InstanceFlagsSection> = () => {
   const { flagsPage } = useAllFlags();
-  const [loadMoreFlags] = useFormikPage(flagsPage);
+  const [loadMoreFlags] = flagsPage.formiks;
   const FlagsBox = useMemo<Props['FlagsBox']>(() => {
     return (
       <>

src/HOC/pages/settings/instance/InstanceSettingsSection.tsx

@@ -3,7 +3,6 @@ import Instance, { Props } from 'ui/pages/settings/instance';
 import { useInstanceRegistrationAllowLists } from 'fe/settings/instance/registration/allowlist/instanceRegistrationAllowLists';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { DOMAIN_REGEX } from 'mn-constants';
 
 export const withEmailDomainValidation = Yup.object().shape({
@@ -18,7 +17,7 @@ export const InstanceSettingsSection: FC<InstanceSettingsSection> = () => {
     addEmailDomain,
     listEmailDomainsPage
   } = useInstanceRegistrationAllowLists();
-  const [loadMoreDomains] = useFormikPage(listEmailDomainsPage);
+  const [loadMoreDomains] = listEmailDomainsPage.formiks;
   const formikAddDomain = useFormik<{ domain: string }>({
     initialValues: { domain: '' },
     validationSchema: withEmailDomainValidation,

src/HOC/pages/settings/invites/InstanceInvitesSection.tsx

@@ -3,7 +3,6 @@ import Invites, { Props } from 'ui/pages/settings/invites';
 import { useInstanceRegistrationAllowLists } from 'fe/settings/instance/registration/allowlist/instanceRegistrationAllowLists';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { EMAIL_REGEX } from 'mn-constants';
 
 export interface InstanceInvitesSection {}
@@ -19,7 +18,7 @@ export const InstanceInvitesSection: FC<InstanceInvitesSection> = () => {
     listEmailsPage,
     sendInviteEmail
   } = useInstanceRegistrationAllowLists();
-  const [loadMoreEmails] = useFormikPage(listEmailsPage);
+  const [loadMoreEmails] = listEmailsPage.formiks;
   const formikAddEmail = useFormik<{ email: string }>({
     initialValues: { email: '' },
     validationSchema: withEmailValidation,

src/HOC/pages/thread/ThreadPage.tsx

@@ -12,7 +12,6 @@ import {
 import { getActivityActor } from 'fe/lib/activity/getActivityActor';
 import { useThreadComments } from 'fe/comment/thread/useThreadComments';
 import { PreviewIndex } from 'HOC/modules/previews';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { useFormik } from 'formik';
 import { Box } from 'rebass';
 
@@ -21,7 +20,7 @@ export interface ThreadPage {
 }
 export const ThreadPage: FC<ThreadPage> = ({ threadId }) => {
   const { commentPage } = useThreadComments(threadId);
-  const [loadMoreComments] = useFormikPage(commentPage);
+  const [loadMoreComments] = commentPage.formiks;
   const thread = useThreadPreview(threadId);
 
   const replyFormik = useFormik<{ replyMessage: string }>({

src/HOC/pages/user/UserPage.tsx

@@ -6,7 +6,6 @@ import { UserFollowedCommunityFragment } from 'fe/community/user/useUserFollowed
 import { getActivityActor } from 'fe/lib/activity/getActivityActor';
 import { getEventStringByContext } from 'fe/lib/activity/getActivityEventString';
 import { getCommunityInfoStrings } from 'fe/lib/activity/getContextCommunityInfo';
-import { useFormikPage } from 'fe/lib/helpers/usePage';
 import { useUserLikes } from 'fe/likes/user/useUserLikes';
 import { useUserFollowedUsers } from 'fe/user/followed/user/useUserFollowedUsers';
 import { UserFollowedUserFragment } from 'fe/user/followed/user/useUserFollowedUsers.generated';
@@ -43,19 +42,19 @@ export const UserPage: FC<UserPage> = ({ userId, basePath }) => {
   const user = useUser(userId);
 
   const { likesPage } = useUserLikes(userId);
-  const [loadMoreLikes] = useFormikPage(likesPage);
+  const [loadMoreLikes] = likesPage.formiks;
 
   const { activitiesPage } = useUserOutboxActivities(userId);
-  const [loadMoreActivities] = useFormikPage(activitiesPage);
+  const [loadMoreActivities] = activitiesPage.formiks;
 
   const { followedCollectionsPage } = useUserFollowedCollections(userId);
-  const [loadMoreCollections] = useFormikPage(followedCollectionsPage);
+  const [loadMoreCollections] = followedCollectionsPage.formiks;
 
   const { followedCommunitiesPage } = useUserFollowedCommunities(userId);
-  const [loadMoreCommunities] = useFormikPage(followedCommunitiesPage);
+  const [loadMoreCommunities] = followedCommunitiesPage.formiks;
 
   const { followedUsersPage } = useUserFollowedUsers(userId);
-  const [loadMoreFollowing] = useFormikPage(followedUsersPage);
+  const [loadMoreFollowing] = followedUsersPage.formiks;
 
   const userPageProps = useMemo<Props>(() => {
     const {

src/fe/lib/helpers/usePage.ts

@@ -2,6 +2,7 @@ import Maybe from 'graphql/tsutils/Maybe';
 import { PageInfo } from 'graphql/types.generated';
 import { useMemo, useCallback } from 'react';
 import { useFormik } from 'formik';
+import { FormikHook } from 'ui/@types/types';
 
 interface Page<EdgeType> {
   edges: EdgeType[];
@@ -54,7 +55,10 @@ export type MngPage<EdgeType> =
   | MngPageUninitialized<EdgeType>
   | MngPageInitialized<EdgeType>;
 
-export const useFormikPage = <EdgeType>(page: MngPage<EdgeType>) => {
+export type FormikPaging = [FormikHook | null, FormikHook | null];
+export const useFormikPaging = <EdgeType>(
+  page: MngPage<EdgeType>
+): FormikPaging => {
   const nextPageFormik = useFormik({
     initialValues: {},
     onSubmit: useCallback(() => (page?.ready ? page.next() : undefined), [page])
@@ -75,10 +79,22 @@ export const useFormikPage = <EdgeType>(page: MngPage<EdgeType>) => {
 };
 
 export const usePage = <EdgeType>(
-  page: Maybe<Page<EdgeType>>,
+  gqlPage: Maybe<Page<EdgeType>>,
   fetch: Fetch<EdgeType, NextPageCursor> // = () => Promise.resolve()
-): MngPage<EdgeType> =>
-  useMemo<MngPage<EdgeType>>(() => mngPage(page, fetch), [page, fetch]);
+): MngPage<EdgeType> & { formiks: FormikPaging } => {
+  const page = useMemo<MngPage<EdgeType>>(() => mngPage(gqlPage, fetch), [
+    gqlPage,
+    fetch
+  ]);
+  const formiks = useFormikPaging(page);
+  return useMemo(
+    () => ({
+      ...page,
+      formiks
+    }),
+    [formiks, page]
+  );
+};
 
 export const mngPage = <EdgeType>(
   page: Maybe<Page<EdgeType>>,