admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Change to using arrow functions (#1603)

Browse Source 
* Change to using arrow functions

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add lint rule

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-16 02:41:10 +01:00
committed by GitHub
parent 549335054a
commit 00a3c8ca2b
575 changed files with 2848 additions and 3063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/modules/activities/comment/Comment.tsx
View File

@ -30,11 +30,9 @@ const StyledCommentBody = styled.div`
text-align: left;
`;
export function Comment({ comment, actionBar }: OwnProps) {
return (
<StyledContainer>
<CommentHeader comment={comment} actionBar={actionBar} />
<StyledCommentBody>{comment.body}</StyledCommentBody>
</StyledContainer>
);
}
export const Comment = ({ comment, actionBar }: OwnProps) => (
<StyledContainer>
<CommentHeader comment={comment} actionBar={actionBar} />
<StyledCommentBody>{comment.body}</StyledCommentBody>
</StyledContainer>
);

4
front/src/modules/activities/comment/CommentHeader.tsx
View File

@ -62,7 +62,7 @@ const StyledTooltip = styled(Tooltip)`
padding: 8px;
`;
export function CommentHeader({ comment, actionBar }: OwnProps) {
export const CommentHeader = ({ comment, actionBar }: OwnProps) => {
const beautifiedCreatedAt = beautifyPastDateRelativeToNow(comment.createdAt);
const exactCreatedAt = beautifyExactDateTime(comment.createdAt);
const showDate = beautifiedCreatedAt !== '';
@ -99,4 +99,4 @@ export function CommentHeader({ comment, actionBar }: OwnProps) {
<div>{actionBar}</div>
</StyledContainer>
);
}
};

12
front/src/modules/activities/components/ActivityAssigneePicker.tsx
View File

@ -30,11 +30,11 @@ type UserForSelect = EntityForSelect & {
entityType: Entity.User;
};
export function ActivityAssigneePicker({
export const ActivityAssigneePicker = ({
activity,
onSubmit,
onCancel,
}: OwnProps) {
}: OwnProps) => {
const [relationPickerSearchFilter] = useRecoilScopedState(
relationPickerSearchFilterScopedState,
);
@ -68,9 +68,9 @@ export function ActivityAssigneePicker({
fragment: ACTIVITY_UPDATE_FRAGMENT,
});
async function handleEntitySelected(
const handleEntitySelected = async (
selectedUser: UserForSelect | null | undefined,
) {
) => {
if (selectedUser) {
const workspaceMemberAssignee = (
await getWorkspaceMember({
@ -108,7 +108,7 @@ export function ActivityAssigneePicker({
}
onSubmit?.();
}
};
return (
<SingleEntitySelect
@ -119,4 +119,4 @@ export function ActivityAssigneePicker({
selectedEntity={users.selectedEntities[0]}
/>
);
}
};

8
front/src/modules/activities/components/ActivityBodyEditor.tsx
View File

@ -19,7 +19,7 @@ type OwnProps = {
onChange?: (activityBody: string) => void;
};
export function ActivityBodyEditor({ activity, onChange }: OwnProps) {
export const ActivityBodyEditor = ({ activity, onChange }: OwnProps) => {
const [updateActivityMutation] = useUpdateActivityMutation();
const client = useApolloClient();
@ -37,7 +37,7 @@ export function ActivityBodyEditor({ activity, onChange }: OwnProps) {
}, [body, onChange]);
const debounceOnChange = useMemo(() => {
function onInternalChange(activityBody: string) {
const onInternalChange = (activityBody: string) => {
setBody(activityBody);
updateActivityMutation({
variables: {
@ -56,7 +56,7 @@ export function ActivityBodyEditor({ activity, onChange }: OwnProps) {
},
},
});
}
};
return debounce(onInternalChange, 200);
}, [updateActivityMutation, activity.id, cachedActivity]);
@ -74,4 +74,4 @@ export function ActivityBodyEditor({ activity, onChange }: OwnProps) {
<BlockEditor editor={editor} />
</StyledBlockNoteStyledContainer>
);
}
};

14
front/src/modules/activities/components/ActivityComments.tsx
View File

@ -59,10 +59,10 @@ const StyledThreadCommentTitle = styled.div`
text-transform: uppercase;
`;
export function ActivityComments({
export const ActivityComments = ({
activity,
scrollableContainerRef,
}: OwnProps) {
}: OwnProps) => {
const [createCommentMutation] = useCreateCommentMutation();
const currentUser = useRecoilValue(currentUserState);
@ -70,7 +70,7 @@ export function ActivityComments({
return <></>;
}
function handleSendComment(commentText: string) {
const handleSendComment = (commentText: string) => {
if (!isNonEmptyString(commentText)) {
return;
}
@ -91,16 +91,16 @@ export function ActivityComments({
},
awaitRefetchQueries: true,
});
}
};
function handleFocus() {
const handleFocus = () => {
const scrollableContainer = scrollableContainerRef.current;
scrollableContainer?.scrollTo({
top: scrollableContainer.scrollHeight,
behavior: 'smooth',
});
}
};
return (
<>
@ -127,4 +127,4 @@ export function ActivityComments({
</StyledCommentActionBar>
</>
);
}
};

28
front/src/modules/activities/components/ActivityCreateButton.tsx
View File

@ -8,21 +8,19 @@ type ActivityCreateButtonProps = {
onActivityClick?: () => void;
};
export function ActivityCreateButton({
export const ActivityCreateButton = ({
onNoteClick,
onTaskClick,
onActivityClick,
}: ActivityCreateButtonProps) {
return (
<ButtonGroup variant={'secondary'}>
<Button Icon={IconNotes} title="Note" onClick={onNoteClick} />
<Button Icon={IconCheckbox} title="Task" onClick={onTaskClick} />
<Button
Icon={IconTimelineEvent}
title="Activity"
soon={true}
onClick={onActivityClick}
/>
</ButtonGroup>
);
}
}: ActivityCreateButtonProps) => (
<ButtonGroup variant={'secondary'}>
<Button Icon={IconNotes} title="Note" onClick={onNoteClick} />
<Button Icon={IconCheckbox} title="Task" onClick={onTaskClick} />
<Button
Icon={IconTimelineEvent}
title="Activity"
soon={true}
onClick={onActivityClick}
/>
</ButtonGroup>
);

10
front/src/modules/activities/components/ActivityEditor.tsx
View File

@ -79,11 +79,11 @@ type OwnProps = {
autoFillTitle?: boolean;
};
export function ActivityEditor({
export const ActivityEditor = ({
activity,
showComment = true,
autoFillTitle = false,
}: OwnProps) {
}: OwnProps) => {
const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
useState<boolean>(false);
@ -154,13 +154,13 @@ export function ActivityEditor({
const debouncedUpdateTitle = debounce(updateTitle, 200);
function updateTitleFromBody(body: string) {
const updateTitleFromBody = (body: string) => {
const parsedTitle = JSON.parse(body)[0]?.content[0]?.text;
if (!hasUserManuallySetTitle && autoFillTitle) {
setTitle(parsedTitle);
debouncedUpdateTitle(parsedTitle);
}
}
};
if (!activity) {
return <></>;
@ -226,4 +226,4 @@ export function ActivityEditor({
)}
</StyledContainer>
);
}
};

6
front/src/modules/activities/components/ActivityTargetChips.tsx
View File

@ -11,7 +11,7 @@ const StyledContainer = styled.div`
gap: ${({ theme }) => theme.spacing(1)};
`;
export function ActivityTargetChips({
export const ActivityTargetChips = ({
targets,
}: {
targets?: Array<
@ -20,7 +20,7 @@ export function ActivityTargetChips({
company?: Pick<Company, 'id' | 'domainName' | 'name'> | null;
}
> | null;
}) {
}) => {
if (!targets) {
return null;
}
@ -52,4 +52,4 @@ export function ActivityTargetChips({
})}
</StyledContainer>
);
}
};

46
front/src/modules/activities/components/ActivityTitle.tsx
View File

@ -52,32 +52,30 @@ type OwnProps = {
onCompletionChange: (value: boolean) => void;
};
export function ActivityTitle({
export const ActivityTitle = ({
title,
completed,
type,
onTitleChange,
onCompletionChange,
}: OwnProps) {
return (
<StyledContainer>
{type === ActivityType.Task && (
<StyledCheckboxContainer onClick={() => onCompletionChange(!completed)}>
<Checkbox
size={CheckboxSize.Large}
shape={CheckboxShape.Rounded}
checked={completed}
/>
</StyledCheckboxContainer>
)}
<StyledEditableTitleInput
autoComplete="off"
autoFocus
placeholder={`${type} title`}
onChange={(event) => onTitleChange(event.target.value)}
value={title}
completed={completed}
/>
</StyledContainer>
);
}
}: OwnProps) => (
<StyledContainer>
{type === ActivityType.Task && (
<StyledCheckboxContainer onClick={() => onCompletionChange(!completed)}>
<Checkbox
size={CheckboxSize.Large}
shape={CheckboxShape.Rounded}
checked={completed}
/>
</StyledCheckboxContainer>
)}
<StyledEditableTitleInput
autoComplete="off"
autoFocus
placeholder={`${type} title`}
onChange={(event) => onTitleChange(event.target.value)}
value={title}
completed={completed}
/>
</StyledContainer>
);

4
front/src/modules/activities/components/ActivityTypeDropdown.tsx
View File

@ -13,7 +13,7 @@ type OwnProps = {
activity: Pick<Activity, 'type'>;
};
export function ActivityTypeDropdown({ activity }: OwnProps) {
export const ActivityTypeDropdown = ({ activity }: OwnProps) => {
const theme = useTheme();
return (
<Chip
@ -30,4 +30,4 @@ export function ActivityTypeDropdown({ activity }: OwnProps) {
variant={ChipVariant.Highlighted}
/>
);
}
};

4
front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx
View File

@ -14,7 +14,7 @@ type OwnProps = {
};
};
export function ActivityAssigneeEditableField({ activity }: OwnProps) {
export const ActivityAssigneeEditableField = ({ activity }: OwnProps) => {
return (
<RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
<RecoilScope>
@ -44,4 +44,4 @@ export function ActivityAssigneeEditableField({ activity }: OwnProps) {
</RecoilScope>
</RecoilScope>
);
}
};

14
front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx
View File

@ -18,22 +18,22 @@ export type OwnProps = {
onCancel?: () => void;
};
export function ActivityAssigneeEditableFieldEditMode({
export const ActivityAssigneeEditableFieldEditMode = ({
activity,
onSubmit,
onCancel,
}: OwnProps) {
}: OwnProps) => {
const { closeEditableField } = useEditableField();
function handleSubmit() {
const handleSubmit = () => {
closeEditableField();
onSubmit?.();
}
};
function handleCancel() {
const handleCancel = () => {
closeEditableField();
onCancel?.();
}
};
return (
<StyledContainer>
@ -44,4 +44,4 @@ export function ActivityAssigneeEditableFieldEditMode({
/>
</StyledContainer>
);
}
};

4
front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx
View File

@ -19,7 +19,7 @@ type OwnProps = {
};
};
export function ActivityRelationEditableField({ activity }: OwnProps) {
export const ActivityRelationEditableField = ({ activity }: OwnProps) => {
return (
<RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
<RecoilScope>
@ -41,4 +41,4 @@ export function ActivityRelationEditableField({ activity }: OwnProps) {
</RecoilScope>
</RecoilScope>
);
}
};

10
front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx
View File

@ -24,7 +24,9 @@ const StyledSelectContainer = styled.div`
top: -8px;
`;
export function ActivityRelationEditableFieldEditMode({ activity }: OwnProps) {
export const ActivityRelationEditableFieldEditMode = ({
activity,
}: OwnProps) => {
const [searchFilter, setSearchFilter] = useState('');
const initialPeopleIds = useMemo(
@ -98,9 +100,9 @@ export function ActivityRelationEditableFieldEditMode({ activity }: OwnProps) {
closeEditableField,
]);
function handleCancel() {
const handleCancel = () => {
closeEditableField();
}
};
return (
<StyledSelectContainer>
@ -120,4 +122,4 @@ export function ActivityRelationEditableFieldEditMode({ activity }: OwnProps) {
/>
</StyledSelectContainer>
);
}
};

10
front/src/modules/activities/hooks/useHandleCheckableActivityTargetChange.ts
View File

@ -14,7 +14,7 @@ import { GET_ACTIVITY } from '../graphql/queries/getActivity';
import { ActivityTargetableEntityType } from '../types/ActivityTargetableEntity';
import { ActivityTargetableEntityForSelect } from '../types/ActivityTargetableEntityForSelect';
export function useHandleCheckableActivityTargetChange({
export const useHandleCheckableActivityTargetChange = ({
activity,
}: {
activity?: Pick<Activity, 'id'> & {
@ -22,7 +22,7 @@ export function useHandleCheckableActivityTargetChange({
Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>
> | null;
};
}) {
}) => {
const [addActivityTargetsOnActivity] =
useAddActivityTargetsOnActivityMutation({
refetchQueries: [
@ -41,10 +41,10 @@ export function useHandleCheckableActivityTargetChange({
],
});
return async function handleCheckItemsChange(
return async (
entityValues: Record<string, boolean>,
entities: ActivityTargetableEntityForSelect[],
) {
) => {
if (!activity) {
return;
}
@ -96,4 +96,4 @@ export function useHandleCheckableActivityTargetChange({
},
});
};
}
};

6
front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
View File

@ -7,14 +7,14 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
import { viewableActivityIdState } from '../states/viewableActivityIdState';
export function useOpenActivityRightDrawer() {
export const useOpenActivityRightDrawer = () => {
const { openRightDrawer } = useRightDrawer();
const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
const setHotkeyScope = useSetHotkeyScope();
return function openActivityRightDrawer(activityId: string) {
return (activityId: string) => {
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setViewableActivityId(activityId);
openRightDrawer(RightDrawerPages.EditActivity);
};
}
};

10
front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
View File

@ -19,7 +19,7 @@ import { viewableActivityIdState } from '../states/viewableActivityIdState';
import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
import { getRelationData } from '../utils/getRelationData';
export function useOpenCreateActivityDrawer() {
export const useOpenCreateActivityDrawer = () => {
const { openRightDrawer } = useRightDrawer();
const [createActivityMutation] = useCreateActivityMutation();
const currentUser = useRecoilValue(currentUserState);
@ -30,7 +30,7 @@ export function useOpenCreateActivityDrawer() {
);
const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
return function openCreateActivityDrawer({
return ({
type,
targetableEntities,
assigneeId,
@ -38,7 +38,7 @@ export function useOpenCreateActivityDrawer() {
type: ActivityType;
targetableEntities?: ActivityTargetableEntity[];
assigneeId?: string;
}) {
}) => {
const now = new Date().toISOString();
return createActivityMutation({
@ -73,7 +73,7 @@ export function useOpenCreateActivityDrawer() {
getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? '',
getOperationName(GET_ACTIVITIES) ?? '',
],
onCompleted(data) {
onCompleted: (data) => {
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setViewableActivityId(data.createOneActivity.id);
setActivityTargetableEntityArray(targetableEntities ?? []);
@ -81,4 +81,4 @@ export function useOpenCreateActivityDrawer() {
},
});
};
}
};

9
front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts
View File

@ -10,15 +10,12 @@ import {
import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
export function useOpenCreateActivityDrawerForSelectedRowIds() {
export const useOpenCreateActivityDrawerForSelectedRowIds = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const openCreateActivityDrawer = useOpenCreateActivityDrawer();
return function openCreateCommentDrawerForSelectedRowIds(
type: ActivityType,
entityType: ActivityTargetableEntityType,
) {
return (type: ActivityType, entityType: ActivityTargetableEntityType) => {
const activityTargetableEntityArray: ActivityTargetableEntity[] =
selectedRowIds.map((id) => ({
type: entityType,
@ -29,4 +26,4 @@ export function useOpenCreateActivityDrawerForSelectedRowIds() {
targetableEntities: activityTargetableEntityArray,
});
};
}
};

6
front/src/modules/activities/notes/components/NoteCard.tsx
View File

@ -56,7 +56,7 @@ const StyledFooter = styled.div`
width: calc(100% - ${({ theme }) => theme.spacing(4)});
`;
export function NoteCard({
export const NoteCard = ({
note,
}: {
note: Pick<
@ -65,7 +65,7 @@ export function NoteCard({
> & {
activityTargets?: Array<Pick<ActivityTarget, 'id'>> | null;
};
}) {
}) => {
const openActivityRightDrawer = useOpenActivityRightDrawer();
const body = JSON.parse(note.body ?? '{}')[0]
?.content.map((x: any) => x.text)
@ -84,4 +84,4 @@ export function NoteCard({
</StyledFooter>
</StyledCard>
);
}
};

40
front/src/modules/activities/notes/components/NoteList.tsx
View File

@ -47,24 +47,22 @@ const StyledNoteContainer = styled.div`
width: 100%;
`;
export function NoteList({ title, notes, button }: OwnProps) {
return (
<>
{notes && notes.length > 0 && (
<StyledContainer>
<StyledTitleBar>
<StyledTitle>
{title} <StyledCount>{notes.length}</StyledCount>
</StyledTitle>
{button}
</StyledTitleBar>
<StyledNoteContainer>
{notes.map((note) => (
<NoteCard key={note.id} note={note} />
))}
</StyledNoteContainer>
</StyledContainer>
)}
</>
);
}
export const NoteList = ({ title, notes, button }: OwnProps) => (
<>
{notes && notes.length > 0 && (
<StyledContainer>
<StyledTitleBar>
<StyledTitle>
{title} <StyledCount>{notes.length}</StyledCount>
</StyledTitle>
{button}
</StyledTitleBar>
<StyledNoteContainer>
{notes.map((note) => (
<NoteCard key={note.id} note={note} />
))}
</StyledNoteContainer>
</StyledContainer>
)}
</>
);

4
front/src/modules/activities/notes/components/Notes.tsx
View File

@ -45,7 +45,7 @@ const StyledNotesContainer = styled.div`
overflow: auto;
`;
export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
export const Notes = ({ entity }: { entity: ActivityTargetableEntity }) => {
const { notes } = useNotes(entity);
const openCreateActivity = useOpenCreateActivityDrawer();
@ -92,4 +92,4 @@ export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
/>
</StyledNotesContainer>
);
}
};

4
front/src/modules/activities/notes/hooks/useNotes.ts
View File

@ -2,7 +2,7 @@ import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
export function useNotes(entity: ActivityTargetableEntity) {
export const useNotes = (entity: ActivityTargetableEntity) => {
const { data: notesData } = useGetActivitiesQuery({
variables: {
where: {
@ -24,4 +24,4 @@ export function useNotes(entity: ActivityTargetableEntity) {
return {
notes,
};
}
};

8
front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
View File

@ -14,11 +14,11 @@ type OwnProps = {
activityId: string;
};
export function ActivityActionBar({ activityId }: OwnProps) {
export const ActivityActionBar = ({ activityId }: OwnProps) => {
const [deleteActivityMutation] = useDeleteActivityMutation();
const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
function deleteActivity() {
const deleteActivity = () => {
deleteActivityMutation({
variables: { activityId },
refetchQueries: [
@ -29,7 +29,7 @@ export function ActivityActionBar({ activityId }: OwnProps) {
],
});
setIsRightDrawerOpen(false);
}
};
return (
<LightIconButton
@ -39,4 +39,4 @@ export function ActivityActionBar({ activityId }: OwnProps) {
size="medium"
/>
);
}
};

6
front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
View File

@ -22,11 +22,11 @@ type OwnProps = {
autoFillTitle?: boolean;
};
export function RightDrawerActivity({
export const RightDrawerActivity = ({
activityId,
showComment = true,
autoFillTitle = false,
}: OwnProps) {
}: OwnProps) => {
const { data } = useGetActivityQuery({
variables: {
activityId: activityId ?? '',
@ -48,4 +48,4 @@ export function RightDrawerActivity({
/>
</StyledContainer>
);
}
};

4
front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx
View File

@ -4,7 +4,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
import { RightDrawerActivity } from '../RightDrawerActivity';
export function RightDrawerCreateActivity() {
export const RightDrawerCreateActivity = () => {
const viewableActivityId = useRecoilValue(viewableActivityIdState);
return (
@ -18,4 +18,4 @@ export function RightDrawerCreateActivity() {
)}
</>
);
}
};

4
front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx
View File

@ -4,7 +4,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
import { RightDrawerActivity } from '../RightDrawerActivity';
export function RightDrawerEditActivity() {
export const RightDrawerEditActivity = () => {
const viewableActivityId = useRecoilValue(viewableActivityIdState);
return (
@ -14,4 +14,4 @@ export function RightDrawerEditActivity() {
)}
</>
);
}
};

4
front/src/modules/activities/table/components/CellCommentChip.tsx
View File

@ -5,7 +5,7 @@ import { CommentChip, CommentChipProps } from './CommentChip';
// TODO: tie those fixed values to the other components in the cell
const StyledCellWrapper = styled.div``;
export function CellCommentChip(props: CommentChipProps) {
export const CellCommentChip = (props: CommentChipProps) => {
if (props.count === 0) return null;
return (
@ -13,4 +13,4 @@ export function CellCommentChip(props: CommentChipProps) {
<CommentChip {...props} />
</StyledCellWrapper>
);
}
};

4
front/src/modules/activities/table/components/CommentChip.tsx
View File

@ -46,7 +46,7 @@ const StyledCount = styled.div`
justify-content: center;
`;
export function CommentChip({ count, onClick }: CommentChipProps) {
export const CommentChip = ({ count, onClick }: CommentChipProps) => {
const theme = useTheme();
if (count === 0) return null;
@ -58,4 +58,4 @@ export function CommentChip({ count, onClick }: CommentChipProps) {
<IconComment size={theme.icon.size.md} />
</StyledChip>
);
}
};

6
front/src/modules/activities/tasks/components/AddTaskButton.tsx
View File

@ -4,11 +4,11 @@ import { Button } from '@/ui/button/components/Button';
import { IconPlus } from '@/ui/icon';
import { ActivityType } from '~/generated/graphql';
export function AddTaskButton({
export const AddTaskButton = ({
activityTargetEntity,
}: {
activityTargetEntity?: ActivityTargetableEntity;
}) {
}) => {
const openCreateActivity = useOpenCreateActivityDrawer();
if (!activityTargetEntity) {
@ -29,4 +29,4 @@ export function AddTaskButton({
}
></Button>
);
}
};

8
front/src/modules/activities/tasks/components/EntityTasks.tsx
View File

@ -13,7 +13,11 @@ const StyledContainer = styled.div`
overflow: auto;
`;
export function EntityTasks({ entity }: { entity: ActivityTargetableEntity }) {
export const EntityTasks = ({
entity,
}: {
entity: ActivityTargetableEntity;
}) => {
return (
<StyledContainer>
<RecoilScope CustomRecoilScopeContext={TasksRecoilScopeContext}>
@ -21,4 +25,4 @@ export function EntityTasks({ entity }: { entity: ActivityTargetableEntity }) {
</RecoilScope>
</StyledContainer>
);
}
};

8
front/src/modules/activities/tasks/components/PageAddTaskButton.tsx
View File

@ -7,7 +7,7 @@ import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoi
import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
import { ActivityType } from '~/generated/graphql';
export function PageAddTaskButton() {
export const PageAddTaskButton = () => {
const openCreateActivity = useOpenCreateActivityDrawer();
const filters = useRecoilScopedValue(
@ -19,16 +19,16 @@ export function PageAddTaskButton() {
(filter) => filter.key === 'assigneeId',
);
function handleClick() {
const handleClick = () => {
openCreateActivity({
type: ActivityType.Task,
assigneeId: assigneeIdFilter?.value,
});
}
};
return (
<RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
<PageAddButton onClick={handleClick} />
</RecoilScope>
);
}
};

4
front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -52,7 +52,7 @@ const StyledContainer = styled.div`
flex-direction: column;
`;
export function TaskGroups({ entity, showAddButton }: OwnProps) {
export const TaskGroups = ({ entity, showAddButton }: OwnProps) => {
const {
todayOrPreviousTasks,
upcomingTasks,
@ -136,4 +136,4 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
)}
</StyledContainer>
);
}
};

44
front/src/modules/activities/tasks/components/TaskList.tsx
View File

@ -46,26 +46,24 @@ const StyledTaskRows = styled.div`
width: 100%;
`;
export function TaskList({ title, tasks, button }: OwnProps) {
return (
<>
{tasks && tasks.length > 0 && (
<StyledContainer>
<StyledTitleBar>
{title && (
<StyledTitle>
{title} <StyledCount>{tasks.length}</StyledCount>
</StyledTitle>
)}
{button}
</StyledTitleBar>
<StyledTaskRows>
{tasks.map((task) => (
<TaskRow key={task.id} task={task} />
))}
</StyledTaskRows>
</StyledContainer>
)}
</>
);
}
export const TaskList = ({ title, tasks, button }: OwnProps) => (
<>
{tasks && tasks.length > 0 && (
<StyledContainer>
<StyledTitleBar>
{title && (
<StyledTitle>
{title} <StyledCount>{tasks.length}</StyledCount>
</StyledTitle>
)}
{button}
</StyledTitleBar>
<StyledTaskRows>
{tasks.map((task) => (
<TaskRow key={task.id} task={task} />
))}
</StyledTaskRows>
</StyledContainer>
)}
</>
);

4
front/src/modules/activities/tasks/components/TaskRow.tsx
View File

@ -61,7 +61,7 @@ const StyledFieldsContainer = styled.div`
display: flex;
`;
export function TaskRow({ task }: { task: TaskForList }) {
export const TaskRow = ({ task }: { task: TaskForList }) => {
const theme = useTheme();
const openActivityRightDrawer = useOpenActivityRightDrawer();
@ -109,4 +109,4 @@ export function TaskRow({ task }: { task: TaskForList }) {
</StyledFieldsContainer>
</StyledContainer>
);
}
};

4
front/src/modules/activities/tasks/hooks/useCompleteTask.ts
View File

@ -9,7 +9,7 @@ import { GET_ACTIVITIES } from '../../graphql/queries/getActivities';
type Task = Pick<Activity, 'id' | 'completedAt'>;
export function useCompleteTask(task: Task) {
export const useCompleteTask = (task: Task) => {
const [updateActivityMutation] = useUpdateActivityMutation();
const client = useApolloClient();
@ -44,4 +44,4 @@ export function useCompleteTask(task: Task) {
return {
completeTask,
};
}
};

4
front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts
View File

@ -7,7 +7,7 @@ import { turnFilterIntoWhereClause } from '@/ui/view-bar/utils/turnFilterIntoWhe
import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
import { parseDate } from '~/utils/date-utils';
export function useCurrentUserTaskCount() {
export const useCurrentUserTaskCount = () => {
const [currentUser] = useRecoilState(currentUserState);
const { data } = useGetActivitiesQuery({
@ -41,4 +41,4 @@ export function useCurrentUserTaskCount() {
return {
currentUserDueTaskCount,
};
}
};

4
front/src/modules/activities/tasks/hooks/useTasks.ts
View File

@ -8,7 +8,7 @@ import { turnFilterIntoWhereClause } from '@/ui/view-bar/utils/turnFilterIntoWhe
import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
import { parseDate } from '~/utils/date-utils';
export function useTasks(entity?: ActivityTargetableEntity) {
export const useTasks = (entity?: ActivityTargetableEntity) => {
const [filters] = useRecoilScopedState(
filtersScopedState,
TasksRecoilScopeContext,
@ -90,4 +90,4 @@ export function useTasks(entity?: ActivityTargetableEntity) {
unscheduledTasks: unscheduledTasks ?? [],
completedTasks: completedTasks ?? [],
};
}
};

4
front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -51,7 +51,7 @@ const StyledEmptyTimelineSubTitle = styled.div`
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
export function Timeline({ entity }: { entity: ActivityTargetableEntity }) {
export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
const { data: queryResult, loading } = useGetActivitiesByTargetsQuery({
variables: {
activityTargetIds: [entity.id],
@ -99,4 +99,4 @@ export function Timeline({ entity }: { entity: ActivityTargetableEntity }) {
<TimelineItemsContainer activities={activities} />
</StyledMainContainer>
);
}
};

4
front/src/modules/activities/timeline/components/TimelineActivity.tsx
View File

@ -125,7 +125,7 @@ type OwnProps = {
};
};
export function TimelineActivity({ activity }: OwnProps) {
export const TimelineActivity = ({ activity }: OwnProps) => {
const beautifiedCreatedAt = beautifyPastDateRelativeToNow(activity.createdAt);
const exactCreatedAt = beautifyExactDateTime(activity.createdAt);
const body = JSON.parse(activity.body ?? '{}')[0]?.content[0]?.text;
@ -176,4 +176,4 @@ export function TimelineActivity({ activity }: OwnProps) {
</StyledTimelineItemContainer>
</>
);
}
};

44
front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx
View File

@ -26,26 +26,24 @@ const StyledVerticalSeparator = styled.div`
height: 24px;
`;
export function TimelineActivityCardFooter({ activity }: OwnProps) {
return (
<>
{(activity.assignee || activity.dueAt) && (
<StyledContainer>
{activity.assignee && (
<UserChip
id={activity.assignee.id}
name={activity.assignee.displayName ?? ''}
pictureUrl={activity.assignee.avatarUrl ?? ''}
/>
)}
{activity.dueAt && (
<>
{activity.assignee && <StyledVerticalSeparator />}
{beautifyExactDate(activity.dueAt)}
</>
)}
</StyledContainer>
)}
</>
);
}
export const TimelineActivityCardFooter = ({ activity }: OwnProps) => (
<>
{(activity.assignee || activity.dueAt) && (
<StyledContainer>
{activity.assignee && (
<UserChip
id={activity.assignee.id}
name={activity.assignee.displayName ?? ''}
pictureUrl={activity.assignee.avatarUrl ?? ''}
/>
)}
{activity.dueAt && (
<>
{activity.assignee && <StyledVerticalSeparator />}
{beautifyExactDate(activity.dueAt)}
</>
)}
</StyledContainer>
)}
</>
);

47
front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx
View File

@ -37,34 +37,29 @@ type OwnProps = {
onCompletionChange?: (value: boolean) => void;
};
export function TimelineActivityTitle({
export const TimelineActivityTitle = ({
title,
completed,
type,
onCompletionChange,
}: OwnProps) {
return (
<StyledTitleContainer>
{type === ActivityType.Task && (
<StyledCheckboxContainer
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onCompletionChange?.(!completed);
}}
>
<Checkbox
checked={completed ?? false}
shape={CheckboxShape.Rounded}
/>
</StyledCheckboxContainer>
)}
<StyledTitleText
completed={completed}
hasCheckbox={type === ActivityType.Task}
}: OwnProps) => (
<StyledTitleContainer>
{type === ActivityType.Task && (
<StyledCheckboxContainer
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onCompletionChange?.(!completed);
}}
>
<OverflowingTextWithTooltip text={title ? title : 'Task title'} />
</StyledTitleText>
</StyledTitleContainer>
);
}
<Checkbox checked={completed ?? false} shape={CheckboxShape.Rounded} />
</StyledCheckboxContainer>
)}
<StyledTitleText
completed={completed}
hasCheckbox={type === ActivityType.Task}
>
<OverflowingTextWithTooltip text={title ? title : 'Task title'} />
</StyledTitleText>
</StyledTitleContainer>
);

6
front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx
View File

@ -35,9 +35,9 @@ export type TimelineItemsContainerProps = {
activities: ActivityForDrawer[];
};
export function TimelineItemsContainer({
export const TimelineItemsContainer = ({
activities,
}: TimelineItemsContainerProps) {
}: TimelineItemsContainerProps) => {
const theme = useTheme();
return (
<StyledScrollWrapper>
@ -51,4 +51,4 @@ export function TimelineItemsContainer({
</StyledTimelineContainer>
</StyledScrollWrapper>
);
}
};

8
front/src/modules/activities/utils/flatMapAndSortEntityForSelectArrayByName.ts
View File

@ -1,9 +1,11 @@
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
export function flatMapAndSortEntityForSelectArrayOfArrayByName<
export const flatMapAndSortEntityForSelectArrayOfArrayByName = <
T extends EntityForSelect,
>(entityForSelectArray: T[][]) {
>(
entityForSelectArray: T[][],
) => {
const sortByName = (a: T, b: T) => a.name.localeCompare(b.name);
return entityForSelectArray.flatMap((entity) => entity).sort(sortByName);
}
};

6
front/src/modules/activities/utils/getRelationData.ts
View File

@ -7,9 +7,9 @@ import {
ActivityTargetableEntityType,
} from '../types/ActivityTargetableEntity';
export function getRelationData(
export const getRelationData = (
entities: ActivityTargetableEntity[],
): ActivityTargetCreateManyActivityInput[] {
): ActivityTargetCreateManyActivityInput[] => {
const now = new Date().toISOString();
const relationData: ActivityTargetCreateManyActivityInput[] = [];
@ -40,4 +40,4 @@ export function getRelationData(
}
}
return relationData;
}
};