thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: implementing layouts using _app.tsx get layout method. (#2620)

Browse Source 
* fix: implementing layouts in all pages

* fix: layout fixes, implemting using standard nextjs parctice
This commit is contained in:
sriram veeraghanta
2023-11-02 23:57:44 +05:30
committed by GitHub
parent a582021f2c
commit 3c884fd46e
57 changed files with 1653 additions and 1423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
View File

@@ -1,5 +1,4 @@
import React from "react";
import type { NextPage } from "next";
import React, { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
@@ -13,10 +12,10 @@ import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanba
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// types
import { NextPageWithLayout } from "types/app";
const ProfileAssignedIssues: NextPage = observer(() => {
const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => {
const {
workspace: workspaceStore,
project: projectStore,
@@ -45,22 +44,28 @@ const ProfileAssignedIssues: NextPage = observer(() => {
const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
return (
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper showProfileIssuesFilter>
{isLoading ? (
<div>Loading...</div>
) : (
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
)}
</ProfileAuthWrapper>
</AppLayout>
<>
{isLoading ? (
<div>Loading...</div>
) : (
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
)}
</>
);
});
export default ProfileAssignedIssues;
ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);
};
export default ProfileAssignedIssuesPage;

40
web/pages/[workspaceSlug]/profile/[userId]/created.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
@@ -12,9 +12,9 @@ import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
// types
import type { NextPage } from "next";
import { NextPageWithLayout } from "types/app";
const ProfileCreatedIssues: NextPage = () => {
const ProfileCreatedIssuesPage: NextPageWithLayout = () => {
const {
workspace: workspaceStore,
project: projectStore,
@@ -39,23 +39,29 @@ const ProfileCreatedIssues: NextPage = () => {
const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
return (
<>
{isLoading ? (
<div>Loading...</div>
) : (
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
)}
</>
);
};
ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper showProfileIssuesFilter>
{isLoading ? (
<div>Loading...</div>
) : (
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
)}
</ProfileAuthWrapper>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);
};
export default observer(ProfileCreatedIssues);
export default observer(ProfileCreatedIssuesPage);

37
web/pages/[workspaceSlug]/profile/[userId]/index.tsx
View File

@@ -1,9 +1,6 @@
import React from "react";
import { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { UserService } from "services/user.service";
// layouts
@@ -19,8 +16,8 @@ import {
ProfileWorkload,
} from "components/profile";
// types
import type { NextPage } from "next";
import { IUserStateDistribution, TStateGroups } from "types";
import { NextPageWithLayout } from "types/app";
// constants
import { USER_PROFILE_DATA } from "constants/fetch-keys";
import { GROUP_CHOICES } from "constants/project";
@@ -28,7 +25,7 @@ import { GROUP_CHOICES } from "constants/project";
// services
const userService = new UserService();
const ProfileOverview: NextPage = () => {
const ProfileOverviewPage: NextPageWithLayout = () => {
const router = useRouter();
const { workspaceSlug, userId } = router.query;
@@ -44,21 +41,25 @@ const ProfileOverview: NextPage = () => {
else return { state_group: key as TStateGroups, state_count: 0 };
});
return (
<div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
<ProfileStats userProfile={userProfile} />
<ProfileWorkload stateDistribution={stateDistribution} />
<div className="grid grid-cols-1 xl:grid-cols-2 items-stretch gap-5">
<ProfilePriorityDistribution userProfile={userProfile} />
<ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
</div>
<ProfileActivity />
</div>
);
};
ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper>
<div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
<ProfileStats userProfile={userProfile} />
<ProfileWorkload stateDistribution={stateDistribution} />
<div className="grid grid-cols-1 xl:grid-cols-2 items-stretch gap-5">
<ProfilePriorityDistribution userProfile={userProfile} />
<ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
</div>
<ProfileActivity />
</div>
</ProfileAuthWrapper>
<ProfileAuthWrapper>{page}</ProfileAuthWrapper>
</AppLayout>
);
};
export default ProfileOverview;
export default ProfileOverviewPage;

16
web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
@@ -12,9 +12,9 @@ import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
// types
import type { NextPage } from "next";
import { NextPageWithLayout } from "types/app";
const ProfileSubscribedIssues: NextPage = () => {
const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
const {
workspace: workspaceStore,
project: projectStore,
@@ -58,4 +58,12 @@ const ProfileSubscribedIssues: NextPage = () => {
);
};
export default observer(ProfileSubscribedIssues);
ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);
};
export default observer(ProfileSubscribedIssuesPage);