Skip to content

Commit

Permalink
Add pinned projects to home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@subinasr
subinasr committed Jan 25, 2024
1 parent 10ed239 commit f7323f4
Show file tree
Hide file tree
Showing 4 changed files with 367 additions and 106 deletions.
54 changes: 54 additions & 0 deletions app/gqlFragments.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ export const LAST_ACTIVE_PROJECT_FRAGMENT = gql`
hasAssessmentTemplate
id
isPrivate
isProjectPinned
title
isVisualizationEnabled
isVisualizationAvailable
Expand Down Expand Up @@ -328,3 +329,56 @@ export const BORDER_STYLE_FRAGMENT = gql`
width
}
`;

export const PROJECT_DETAIL_FRAGMENT = gql`
fragment ProjectDetail on ProjectDetailType {
id
title
isPrivate
isProjectPinned
description
startDate
endDate
analysisFramework {
id
title
}
createdBy {
displayName
}
leads {
totalCount
}
topTaggers {
userId
count
name
}
topSourcers {
userId
count
name
}
recentActiveUsers {
userId
name
date
}
stats {
entriesActivity {
count
date
}
leadsActivity {
count
date
}
numberOfEntries
numberOfLeads
numberOfLeadsTagged
numberOfLeadsInProgress
numberOfUsers
}
allowedPermissions
}
`;
142 changes: 141 additions & 1 deletion app/views/Home/ProjectItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import { FiEdit2 } from 'react-icons/fi';
import {
_cs,
compareDate,
isDefined,
} from '@togglecorp/fujs';
import {
IoBookmarkOutline,
IoLockOpenOutline,
} from 'react-icons/io5';
import {
RiPushpinFill,
RiUnpinFill,
} from 'react-icons/ri';
import {
AreaChart,
XAxis,
Expand All @@ -29,7 +34,10 @@ import {
DateRangeOutput,
Message,
Kraken,
QuickActionButton,
useAlert,
} from '@the-deep/deep-ui';
import { useMutation, gql } from '@apollo/client';

import SmartButtonLikeLink from '#base/components/SmartButtonLikeLink';
import SmartQuickActionLink from '#base/components/SmartQuickActionLink';
Expand All @@ -42,12 +50,40 @@ import {
UserEntityCountType,
UserEntityDateType,
ProjectPermission,
PinProjectMutation,
PinProjectMutationVariables,
UnpinProjectMutation,
UnpinProjectMutationVariables,
} from '#generated/types';

import _ts from '#ts';

import styles from './styles.css';

const PIN_PROJECT = gql`
mutation PinProject ($projectId: ID!) {
createUserPinnedProject(
data: {
project: $projectId
}
) {
errors
ok
}
}
`;

const UNPIN_PROJECT = gql`
mutation UnpinProject ($projectId: ID!) {
deleteUserPinnedProject (
id: $projectId
) {
errors
ok
}
}
`;

const tickFormatter = (value: number | string) => {
const date = new Date(value);
return date.toDateString();
Expand All @@ -66,7 +102,7 @@ const activeUserKeySelector = (d: UserEntityDateType) => d?.userId;

export interface RecentProjectItemProps {
className?: string;
projectId?: string;
projectId: string | undefined;
title?: string;
isPrivate?: boolean;
startDate: string | null | undefined;
Expand All @@ -84,6 +120,9 @@ export interface RecentProjectItemProps {
topSourcers: UserEntityCountType[] | null | undefined;
allowedPermissions: ProjectPermission[] | null | undefined;
recentActiveUsers: UserEntityDateType[] | null | undefined;
isPinned?: boolean;
onProjectPinChange: () => void;
disablePinButton: boolean;
}

function ProjectItem(props: RecentProjectItemProps) {
Expand All @@ -107,8 +146,71 @@ function ProjectItem(props: RecentProjectItemProps) {
entriesActivity,
allowedPermissions,
recentActiveUsers,
isPinned,
onProjectPinChange,
disablePinButton,
} = props;

const alert = useAlert();

const [
pinProject,
] = useMutation<PinProjectMutation, PinProjectMutationVariables>(
PIN_PROJECT,
{
onCompleted: (response) => {
const pinProjectResponse = response?.createUserPinnedProject;
if (pinProjectResponse?.ok) {
onProjectPinChange();
alert.show(
'Project successfully pinned.',
{ variant: 'success' },
);
} else {
alert.show(
'An error occured while pinning a project.',
{ variant: 'error' },
);
}
},
onError: () => {
alert.show(
'An error occured while pinning a project.',
{ variant: 'error' },
);
},
},
);

const [
unpinProject,
] = useMutation<UnpinProjectMutation, UnpinProjectMutationVariables>(
UNPIN_PROJECT,
{
onCompleted: (response) => {
const unpinProjectResponse = response?.deleteUserPinnedProject;
if (unpinProjectResponse?.ok) {
onProjectPinChange();
alert.show(
'Project successfully unpinned.',
{ variant: 'success' },
);
} else {
alert.show(
'An error occured while unpinning a project.',
{ variant: 'error' },
);
}
},
onError: () => {
alert.show(
'An error occured while pinning a project.',
{ variant: 'error' },
);
},
},
);

const activeUserRendererParams = useCallback((_: unknown, data: UserEntityDateType) => ({
className: styles.recentlyActiveItem,
label: data.name,
Expand Down Expand Up @@ -146,6 +248,26 @@ function ProjectItem(props: RecentProjectItemProps) {

const canEditProject = allowedPermissions?.includes('UPDATE_PROJECT');

const handleUnpinProject = useCallback((id: string) => {
unpinProject({
variables: {
projectId: id,
},
});
}, [
unpinProject,
]);

const handlePinProject = useCallback((id: string) => {
pinProject({
variables: {
projectId: id,
},
});
}, [
pinProject,
]);

return (
<ContainerCard
spacing="loose"
Expand All @@ -161,6 +283,24 @@ function ProjectItem(props: RecentProjectItemProps) {
)}
headerActions={(
<>
{isDefined(projectId) && (isPinned ? (
<QuickActionButton
name={projectId}
onClick={handleUnpinProject}
title="Unpin this project"
>
<RiUnpinFill />
</QuickActionButton>
) : (
<QuickActionButton
name={projectId}
onClick={handlePinProject}
title={disablePinButton ? 'You can only pin 5 projects.' : 'Pin this project'}
disabled={disablePinButton}
>
<RiPushpinFill />
</QuickActionButton>
))}
<Element
className={styles.privacyBadge}
actions={isPrivate && (
Expand Down
Loading

0 comments on commit f7323f4

Please sign in to comment.