style: profile page responsiveness added (#1710)
* refactor: folder structure * style: mobile responsiveness added * chore: add user profile redirection * chore: profile page authorization
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
406b323e8e
commit
0586d30a33
18 changed files with 323 additions and 270 deletions
|
|
@ -1,48 +1,19 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// contexts
|
||||
import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
import { ProfileAuthWrapper } from "layouts/profile-layout";
|
||||
// components
|
||||
import { ProfileIssuesView, ProfileNavbar, ProfileSidebar } from "components/profile";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import { ProfileIssuesView } from "components/profile";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
|
||||
const ProfileAssignedIssues: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
return (
|
||||
<ProfileIssuesContextProvider>
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Settings" link={`/${workspaceSlug}/me/profile`} />
|
||||
<BreadcrumbItem title={`${user?.first_name} ${user?.last_name}`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="h-full w-full flex overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<ProfileNavbar />
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<ProfileIssuesView />
|
||||
</div>
|
||||
</div>
|
||||
<ProfileSidebar />
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
</ProfileIssuesContextProvider>
|
||||
);
|
||||
};
|
||||
const ProfileAssignedIssues: NextPage = () => (
|
||||
<ProfileIssuesContextProvider>
|
||||
<ProfileAuthWrapper>
|
||||
<ProfileIssuesView />
|
||||
</ProfileAuthWrapper>
|
||||
</ProfileIssuesContextProvider>
|
||||
);
|
||||
|
||||
export default ProfileAssignedIssues;
|
||||
|
|
|
|||
|
|
@ -1,48 +1,20 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// contexts
|
||||
import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
import { ProfileAuthWrapper } from "layouts/profile-layout";
|
||||
// components
|
||||
import { ProfileIssuesView, ProfileNavbar, ProfileSidebar } from "components/profile";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import { ProfileIssuesView } from "components/profile";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
|
||||
const ProfileCreatedIssues: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
return (
|
||||
<ProfileIssuesContextProvider>
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Settings" link={`/${workspaceSlug}/me/profile`} />
|
||||
<BreadcrumbItem title={`${user?.first_name} ${user?.last_name}`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="h-full w-full flex overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<ProfileNavbar />
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<ProfileIssuesView />
|
||||
</div>
|
||||
</div>
|
||||
<ProfileSidebar />
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
</ProfileIssuesContextProvider>
|
||||
);
|
||||
};
|
||||
const ProfileCreatedIssues: NextPage = () => (
|
||||
<ProfileIssuesContextProvider>
|
||||
<ProfileAuthWrapper>
|
||||
<ProfileIssuesView />
|
||||
</ProfileAuthWrapper>
|
||||
</ProfileIssuesContextProvider>
|
||||
);
|
||||
|
||||
export default ProfileCreatedIssues;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,26 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
// services
|
||||
import userService from "services/user.service";
|
||||
// layouts
|
||||
import { ProfileAuthWrapper } from "layouts/profile-layout";
|
||||
// components
|
||||
import {
|
||||
ProfileNavbar,
|
||||
ProfileActivity,
|
||||
ProfilePriorityDistribution,
|
||||
ProfileSidebar,
|
||||
ProfileStateDistribution,
|
||||
ProfileStats,
|
||||
ProfileWorkload,
|
||||
} from "components/profile";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import { Icon, Loader } from "components/ui";
|
||||
// helpers
|
||||
import { activityDetails } from "helpers/activity.helper";
|
||||
import { timeAgo } from "helpers/date-time.helper";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
import { IUserStateDistribution, TStateGroups } from "types";
|
||||
// constants
|
||||
import { USER_PROFILE_DATA, USER_PROFILE_ACTIVITY } from "constants/fetch-keys";
|
||||
import { USER_PROFILE_DATA } from "constants/fetch-keys";
|
||||
import { GROUP_CHOICES } from "constants/project";
|
||||
|
||||
const ProfileOverview: NextPage = () => {
|
||||
|
|
@ -42,15 +34,6 @@ const ProfileOverview: NextPage = () => {
|
|||
: null
|
||||
);
|
||||
|
||||
const { data: userProfileActivity } = useSWR(
|
||||
workspaceSlug && userId
|
||||
? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString())
|
||||
: null,
|
||||
workspaceSlug && userId
|
||||
? () => userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
const stateDistribution: IUserStateDistribution[] = Object.keys(GROUP_CHOICES).map((key) => {
|
||||
const group = userProfile?.state_distribution.find((g) => g.state_group === key);
|
||||
|
||||
|
|
@ -59,93 +42,20 @@ const ProfileOverview: NextPage = () => {
|
|||
});
|
||||
|
||||
return (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`User Name`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="h-full w-full flex overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<ProfileNavbar />
|
||||
<div className="h-full w-full overflow-y-auto px-9 py-5 space-y-7">
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Recent Activity</h3>
|
||||
<div className="border border-custom-border-100 rounded p-6">
|
||||
{userProfileActivity ? (
|
||||
<div className="space-y-5">
|
||||
{userProfileActivity.results.map((activity) => (
|
||||
<div key={activity.id} className="flex gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
|
||||
<img
|
||||
src={activity.actor_detail.avatar}
|
||||
alt={activity.actor_detail.first_name}
|
||||
height={24}
|
||||
width={24}
|
||||
className="rounded"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid h-6 w-6 place-items-center rounded border-2 bg-gray-700 text-xs text-white">
|
||||
{activity.actor_detail.first_name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="-mt-1">
|
||||
<p className="text-sm text-custom-text-200">
|
||||
<span className="font-medium text-custom-text-100">
|
||||
{activity.actor_detail.first_name} {activity.actor_detail.last_name}{" "}
|
||||
</span>
|
||||
{activity.field ? (
|
||||
activityDetails[activity.field]?.message(activity as any)
|
||||
) : (
|
||||
<span>
|
||||
created this{" "}
|
||||
<Link
|
||||
href={`/${activity.workspace_detail.slug}/projects/${activity.project}/issues/${activity.issue}`}
|
||||
>
|
||||
<a className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline">
|
||||
Issue
|
||||
<Icon iconName="launch" className="!text-xs" />
|
||||
</a>
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-custom-text-200">
|
||||
{timeAgo(activity.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Loader className="space-y-5">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<ProfileSidebar />
|
||||
<ProfileActivity />
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
</ProfileAuthWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1,20 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// contexts
|
||||
import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
import { ProfileAuthWrapper } from "layouts/profile-layout";
|
||||
// components
|
||||
import { ProfileIssuesView, ProfileNavbar, ProfileSidebar } from "components/profile";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import { ProfileIssuesView } from "components/profile";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
|
||||
const ProfileSubscribedIssues: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
return (
|
||||
<ProfileIssuesContextProvider>
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Settings" link={`/${workspaceSlug}/me/profile`} />
|
||||
<BreadcrumbItem title={`${user?.first_name} ${user?.last_name}`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="h-full w-full flex overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<ProfileNavbar />
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<ProfileIssuesView />
|
||||
</div>
|
||||
</div>
|
||||
<ProfileSidebar />
|
||||
</div>
|
||||
</WorkspaceAuthorizationLayout>
|
||||
</ProfileIssuesContextProvider>
|
||||
);
|
||||
};
|
||||
const ProfileSubscribedIssues: NextPage = () => (
|
||||
<ProfileIssuesContextProvider>
|
||||
<ProfileAuthWrapper>
|
||||
<ProfileIssuesView />
|
||||
</ProfileAuthWrapper>
|
||||
</ProfileIssuesContextProvider>
|
||||
);
|
||||
|
||||
export default ProfileSubscribedIssues;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue