Commit 9e57a310 authored by aleclofabbro's avatar aleclofabbro

Merge branch 'refactor/embed_pagination_formik_in_usepage' into develop

parents 7e692516 95befc7b
......@@ -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
......
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) {
......
......@@ -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 }>({
......
......@@ -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 />;
......
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 (
<>
......
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 (
<>
......
......@@ -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,
......
......@@ -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,
......
......@@ -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 }>({
......
......@@ -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 {
......
......@@ -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>>,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment