twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-22 11:31:39 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
575 changed files with 2848 additions and 3063 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
docs/docs/developer/frontend/best-practices.mdx
View File

@ -22,7 +22,7 @@ export const myAtomState = atom({
default: 'default value',
});
export function MyComponent() {
export const MyComponent = () => {
const [myAtom, setMyAtom] = useRecoilState(myAtomState);
return (
@ -79,7 +79,7 @@ The same can be applied for data fetching logic, with Apollo hooks.
```tsx
// ❌ Bad, will cause re-renders even if data is not changing,
// because useEffect needs to be re-evaluated
export function PageComponent() {
export const PageComponent = () => {
const [data, setData] = useRecoilState(dataState);
const [someDependency] = useRecoilState(someDependencyState);
@ -92,25 +92,23 @@ export function PageComponent() {
return <div>{data}</div>;
};
export function App() {
return (
<RecoilRoot>
<PageComponent />
</RecoilRoot>
);
}
export const App = () => (
<RecoilRoot>
<PageComponent />
</RecoilRoot>
);
```
```tsx
// ✅ Good, will not cause re-renders if data is not changing,
// because useEffect is re-evaluated in another sibling component
export function PageComponent() {
export const PageComponent = () => {
const [data, setData] = useRecoilState(dataState);
return <div>{data}</div>;
};
export function PageData() {
export const PageData = () => {
const [data, setData] = useRecoilState(dataState);
const [someDependency] = useRecoilState(someDependencyState);
@ -123,14 +121,12 @@ export function PageData() {
return <></>;
};
export function App() {
return (
<RecoilRoot>
<PageData />
<PageComponent />
</RecoilRoot>
);
}
export const App = () => (
<RecoilRoot>
<PageData />
<PageComponent />
</RecoilRoot>
);
```
### Use recoil family states and recoil family selectors
@ -189,16 +185,16 @@ Event handler names should start with `handle`, `on` is a prefix used to name ev
```tsx
// ❌ Bad
function onEmailChange(val: string) {
const onEmailChange = (val: string) => {
// ...
}
};
```
```tsx
// ✅ Good
function handleEmailChange(val: string) {
const handleEmailChange = (val: string) => {
// ...
}
};
```
## Optional Props
@ -215,25 +211,21 @@ type OwnProps = {
disabled?: boolean;
};
function EmailField({ value, disabled = false }: OwnProps) {
return <TextInput value={value} disabled={disabled} fullWidth />;
}
const EmailField = ({ value, disabled = false }: OwnProps) => (
<TextInput value={value} disabled={disabled} fullWidth />
);
```
USAGE
```tsx
// ❌ Bad, passing in the same value as the default value adds no value
function Form() {
return <EmailField value="username@email.com" disabled={false} />;
}
const Form = () => <EmailField value="username@email.com" disabled={false} />;
```
```tsx
// ✅ Good, assumes the default value
function Form() {
return <EmailField value="username@email.com" />;
}
const Form = () => <EmailField value="username@email.com" />;
```
## Component as props
@ -243,14 +235,10 @@ Try as much as possible to pass uninstanciated components as props, so chilren c
The most common example for that is icon components :
```tsx
function SomeParentComponent() {
return (
<MyComponent Icon={MyIcon} />
)
}
const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;
// In MyComponent
function MyComponent({ MyIcon }: { MyIcon: IconComponent }) {
const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
const theme = useTheme();
return (
@ -258,7 +246,7 @@ function MyComponent({ MyIcon }: { MyIcon: IconComponent }) {
<MyIcon size={theme.icon.size.md}>
</div>
)
}
};
```
For React to understand that the component is a component, you need to use PascalCase, to later instanciate it with `<MyIcon>`

14
docs/docs/developer/frontend/style-guide.mdx
View File

@ -46,18 +46,14 @@ Use props destructuring.
```tsx
// ❌ Bad, no type
export function MyComponent(props) {
return <div>Hello {props.name}</div>;
};
export const MyComponent = (props) => <div>Hello {props.name}</div>;
// ✅ Good, type
type OwnProps = {
name: string;
};
export function MyComponent({ name }: OwnProps) {
return <div>Hello {name}</div>;
};
export const MyComponent = ({ name }: OwnProps) => <div>Hello {name}</div>;
```
#### Refrain from using `React.FC` or `React.FunctionComponent` to define prop types.
@ -84,9 +80,9 @@ type OwnProps = {
value: string;
};
function EmailField({ value }: OwnProps) {
return <TextInput value={value} disabled fullWidth />;
}
const EmailField = ({ value }: OwnProps) => (
<TextInput value={value} disabled fullWidth />
);
```
## JavaScript

58
docs/src/pages/graphql.tsx
View File

@ -1,34 +1,38 @@
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from '@theme/Layout';
import BrowserOnly from '@docusaurus/BrowserOnly';
import 'graphiql/graphiql.css';
import { createGraphiQLFetcher } from "@graphiql/toolkit";
import { GraphiQL } from "graphiql";
import React from "react";
import ReactDOM from "react-dom";
import Layout from "@theme/Layout";
import BrowserOnly from "@docusaurus/BrowserOnly";
import "graphiql/graphiql.css";
// Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
function GraphiQLComponent() {
if(!window.localStorage.getItem('graphiql:theme') && window.localStorage.getItem('theme') != 'dark') {
window.localStorage.setItem('graphiql:theme', 'light');
}
const GraphiQLComponent = () => {
if (
!window.localStorage.getItem("graphiql:theme") &&
window.localStorage.getItem("theme") != "dark"
) {
window.localStorage.setItem("graphiql:theme", "light");
}
const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
const fetcher = createGraphiQLFetcher({
url: "https://api.twenty.com/graphql",
});
return (
<div className="fullHeightPlayground">
<GraphiQL fetcher={fetcher} />;
</div>
<div className="fullHeightPlayground">
<GraphiQL fetcher={fetcher} />;
</div>
);
}
};
export default function graphQL() {
return (
<Layout title="GraphQL Playground" description="GraphQL Playground for Twenty">
<BrowserOnly>
{() => <GraphiQLComponent />}
</BrowserOnly>
</Layout>
);
}
const graphQL = () => (
<Layout
title="GraphQL Playground"
description="GraphQL Playground for Twenty"
>
<BrowserOnly>{() => <GraphiQLComponent />}</BrowserOnly>
</Layout>
);
export default graphQL;

6
docs/src/theme/DocSidebarItem/Link/index.js
View File

@ -32,14 +32,14 @@ import {
} from "react-icons/tb";
export default function DocSidebarItemLink({
const DocSidebarItemLink = ({
item,
onItemClick,
activePath,
level,
index,
...props
}) {
}) => {
const {href, label, className, autoAddBaseUrl, customProps = {}} = item;
const isActive = isActiveSidebarItem(item, activePath);
const isInternalLink = isInternalUrl(href);
@ -104,3 +104,5 @@ export default function DocSidebarItemLink({
</li>
);
}
export default DocSidebarItemLink;

4
docs/src/theme/Icon/DarkMode/index.js
View File

@ -3,7 +3,9 @@ import { TbMoon } from 'react-icons/tb';
import {useColorMode} from '@docusaurus/theme-common';
export default function IconDarkMode(props) {
const IconDarkMode = (props) => {
const { colorMode } = useColorMode().colorMode;
return colorMode === 'dark' ? <TbMoon /> : <></>;
}
export default IconDarkMode

10
docs/src/theme/Icon/Home/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { TbHome } from 'react-icons/tb';
export default function IconHome(props) {
return <TbHome size={14} />;
}
import React from "react";
import { TbHome } from "react-icons/tb";
const IconHome = (props) => <TbHome size={14} />;
export default IconHome;

4
docs/src/theme/Icon/LightMode/index.js
View File

@ -3,7 +3,9 @@ import { TbSun } from 'react-icons/tb';
import {useColorMode} from '@docusaurus/theme-common';
export default function IconLightMode(props) {
const IconLightMode = (props) => {
const { colorMode } = useColorMode().colorMode;
return colorMode === 'dark' ? <></>: <TbSun /> ;
}
export default IconLightMode;

17
front/.eslintrc.js
View File

@ -5,7 +5,14 @@ module.exports = {
tsconfigRootDir: __dirname,
sourceType: 'module',
},
plugins: ['@typescript-eslint/eslint-plugin', 'unused-imports', 'simple-import-sort', 'twenty', 'twenty-ts'],
plugins: [
'@typescript-eslint/eslint-plugin',
'unused-imports',
'simple-import-sort',
'prefer-arrow',
'twenty',
'twenty-ts',
],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
@ -34,6 +41,14 @@ module.exports = {
['^.+\\.?(css)$']
]
}
],
'prefer-arrow/prefer-arrow-functions': [
'error',
{
"disallowPrototype": true,
"singleReturnOnly": false,
"classPropertiesAllowed": false
}
]
}
},

1
front/package.json
View File

@ -161,6 +161,7 @@
"eslint-config-standard-with-typescript": "^23.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.5.1",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.31.11",

4
front/src/App.tsx
View File

@ -28,7 +28,7 @@ import { getPageTitleFromPath } from './utils/title-utils';
// TEMP FEATURE FLAG FOR VIEW FIELDS
export const ACTIVATE_VIEW_FIELDS = true;
export function App() {
export const App = () => {
const { pathname } = useLocation();
const pageTitle = getPageTitleFromPath(pathname);
@ -82,4 +82,4 @@ export function App() {
</DefaultLayout>
</>
);
}
};

4
front/src/AppNavbar.tsx
View File

@ -20,7 +20,7 @@ import NavTitle from '@/ui/navbar/components/NavTitle';
import { measureTotalFrameLoad } from './utils/measureTotalFrameLoad';
export function AppNavbar() {
export const AppNavbar = () => {
const currentPath = useLocation().pathname;
const { openCommandMenu } = useCommandMenu();
@ -94,4 +94,4 @@ export function AppNavbar() {
)}
</>
);
}
};

4
front/src/effect-components/CommandMenuEffect.tsx
View File

@ -4,7 +4,7 @@ import { useSetRecoilState } from 'recoil';
import { commandMenuCommands } from '@/command-menu/constants/commandMenuCommands';
import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
export function CommandMenuEffect() {
export const CommandMenuEffect = () => {
const setCommands = useSetRecoilState(commandMenuCommandsState);
const commands = commandMenuCommands;
@ -13,4 +13,4 @@ export function CommandMenuEffect() {
}, [commands, setCommands]);
return <></>;
}
};

4
front/src/effect-components/GotoHotkeysEffect.tsx
View File

@ -1,6 +1,6 @@
import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
export function GotoHotkeysEffect() {
export const GotoHotkeysEffect = () => {
useGoToHotkeys('p', '/people');
useGoToHotkeys('c', '/companies');
useGoToHotkeys('o', '/opportunities');
@ -8,4 +8,4 @@ export function GotoHotkeysEffect() {
useGoToHotkeys('t', '/tasks');
return <></>;
}
};

8
front/src/effect-components/PageChangeEffect.tsx
View File

@ -24,7 +24,7 @@ import {
import { useIsMatchingLocation } from '../hooks/useIsMatchingLocation';
// TODO: break down into smaller functions and / or hooks
export function PageChangeEffect() {
export const PageChangeEffect = () => {
const navigate = useNavigate();
const isMatchingLocation = useIsMatchingLocation();
const { enqueueSnackBar } = useSnackBar();
@ -66,12 +66,12 @@ export function PageChangeEffect() {
isMatchingLocation(AppPath.CreateWorkspace) ||
isMatchingLocation(AppPath.CreateProfile);
function navigateToSignUp() {
const navigateToSignUp = () => {
enqueueSnackBar('workspace does not exist', {
variant: 'error',
});
navigate(AppPath.SignUp);
}
};
if (
onboardingStatus === OnboardingStatus.OngoingUserCreation &&
@ -281,4 +281,4 @@ export function PageChangeEffect() {
]);
return <></>;
}
};

8
front/src/hooks/useCombinedRefs.ts
View File

@ -1,9 +1,8 @@
import React, { Ref, RefCallback } from 'react';
export function useCombinedRefs<T>(
...refs: (Ref<T> | undefined)[]
): RefCallback<T> {
return (node: T) => {
export const useCombinedRefs =
<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>
(node: T) => {
for (const ref of refs) {
if (typeof ref === 'function') {
ref(node);
@ -12,4 +11,3 @@ export function useCombinedRefs<T>(
}
}
};
}

4
front/src/hooks/useFirstMountState.ts
View File

@ -1,6 +1,6 @@
import { useRef } from 'react';
export function useFirstMountState(): boolean {
export const useFirstMountState = (): boolean => {
const isFirst = useRef(true);
if (isFirst.current) {
@ -10,4 +10,4 @@ export function useFirstMountState(): boolean {
}
return isFirst.current;
}
};

6
front/src/hooks/useIsMatchingLocation.ts
View File

@ -3,14 +3,14 @@ import { parse } from 'url';
import { AppBasePath } from '@/types/AppBasePath';
export function useIsMatchingLocation() {
export const useIsMatchingLocation = () => {
const location = useLocation();
return function isMatchingLocation(path: string, basePath?: AppBasePath) {
return (path: string, basePath?: AppBasePath) => {
const constructedPath = basePath
? parse(`${basePath}/${path}`).pathname ?? ''
: path;
return !!matchPath(constructedPath, location.pathname);
};
}
};

7
front/src/hooks/useUpdateEffect.ts
View File

@ -2,7 +2,10 @@ import { DependencyList, EffectCallback, useEffect } from 'react';
import { useFirstMountState } from './useFirstMountState';
export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
export const useUpdateEffect = (
effect: EffectCallback,
deps?: DependencyList,
) => {
const isFirst = useFirstMountState();
useEffect(() => {
@ -11,4 +14,4 @@ export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
}
};

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;
}
};

4
front/src/modules/analytics/hooks/useEventTracker.ts
View File

@ -12,7 +12,7 @@ export interface EventData {
location: EventLocation;
}
export function useEventTracker() {
export const useEventTracker = () => {
const [telemetry] = useRecoilState(telemetryState);
const [createEventMutation] = useCreateEventMutation();
@ -29,4 +29,4 @@ export function useEventTracker() {
},
[createEventMutation, telemetry],
);
}
};

4
front/src/modules/analytics/hooks/useTrackEvent.ts
View File

@ -1,7 +1,7 @@
import { EventData, useEventTracker } from './useEventTracker';
export function useTrackEvent(eventType: string, eventData: EventData) {
export const useTrackEvent = (eventType: string, eventData: EventData) => {
const eventTracker = useEventTracker();
return eventTracker(eventType, eventData);
}
};

4
front/src/modules/apollo/components/ApolloProvider.tsx
View File

@ -2,10 +2,10 @@ import { ApolloProvider as ApolloProviderBase } from '@apollo/client';
import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
export function ApolloProvider({ children }: React.PropsWithChildren) {
export const ApolloProvider = ({ children }: React.PropsWithChildren) => {
const apolloClient = useApolloFactory();
return (
<ApolloProviderBase client={apolloClient}>{children}</ApolloProviderBase>
);
}
};

12
front/src/modules/apollo/hooks/useApolloFactory.ts
View File

@ -12,7 +12,7 @@ import { useUpdateEffect } from '~/hooks/useUpdateEffect';
import { ApolloFactory } from '../services/apollo.factory';
export function useApolloFactory() {
export const useApolloFactory = () => {
const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
const [isDebugMode] = useRecoilState(isDebugModeState);
@ -28,10 +28,10 @@ export function useApolloFactory() {
Activity: {
fields: {
activityTargets: {
merge(
merge: (
_existing: ActivityTarget[] = [],
incoming: ActivityTarget[],
) {
) => {
return [...incoming];
},
},
@ -47,10 +47,10 @@ export function useApolloFactory() {
connectToDevTools: isDebugMode,
// We don't want to re-create the client on token change or it will cause infinite loop
initialTokenPair: tokenPair,
onTokenPairChange(tokenPair) {
onTokenPairChange: (tokenPair) => {
setTokenPair(tokenPair);
},
onUnauthenticatedError() {
onUnauthenticatedError: () => {
setTokenPair(null);
if (
!isMatchingLocation(AppPath.Verify) &&
@ -76,4 +76,4 @@ export function useApolloFactory() {
}, [tokenPair]);
return apolloClient;
}
};

10
front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts
View File

@ -13,7 +13,7 @@ import { GetCompaniesQuery, GetPeopleQuery } from '~/generated/graphql';
import { optimisticEffectState } from '../states/optimisticEffectState';
import { OptimisticEffectDefinition } from '../types/OptimisticEffectDefinition';
export function useOptimisticEffect() {
export const useOptimisticEffect = () => {
const apolloClient = useApolloClient();
const registerOptimisticEffect = useRecoilCallback(
@ -29,7 +29,7 @@ export function useOptimisticEffect() {
.getLoadable(optimisticEffectState)
.getValue();
function optimisticEffectWriter({
const optimisticEffectWriter = ({
cache,
newData,
query,
@ -39,7 +39,7 @@ export function useOptimisticEffect() {
newData: unknown[];
variables: OperationVariables;
query: DocumentNode;
}) {
}) => {
const existingData = cache.readQuery({
query,
variables,
@ -76,7 +76,7 @@ export function useOptimisticEffect() {
},
});
}
}
};
const optimisticEffect = {
key: definition.key,
@ -117,4 +117,4 @@ export function useOptimisticEffect() {
registerOptimisticEffect,
triggerOptimisticEffects,
};
}
};

4
front/src/modules/auth/components/Logo.tsx
View File

@ -47,7 +47,7 @@ const StyledMainLogo = styled.div<StyledMainLogoProps>`
width: 100%;
`;
export function Logo({ workspaceLogo, ...props }: Props) {
export const Logo = ({ workspaceLogo, ...props }: Props) => {
if (!workspaceLogo) {
return (
<StyledContainer {...props}>
@ -64,4 +64,4 @@ export function Logo({ workspaceLogo, ...props }: Props) {
</StyledTwentyLogoContainer>
</StyledContainer>
);
}
};

12
front/src/modules/auth/components/Modal.tsx
View File

@ -10,10 +10,8 @@ const StyledContent = styled(UIModal.Content)`
type Props = React.ComponentProps<'div'>;
export function AuthModal({ children, ...restProps }: Props) {
return (
<UIModal isOpen={true} {...restProps}>
<StyledContent>{children}</StyledContent>
</UIModal>
);
}
export const AuthModal = ({ children, ...restProps }: Props) => (
<UIModal isOpen={true} {...restProps}>
<StyledContent>{children}</StyledContent>
</UIModal>
);

10
front/src/modules/auth/components/SubTitle.tsx
View File

@ -1,14 +1,14 @@
import React from 'react';
import { JSX, ReactNode } from 'react';
import styled from '@emotion/styled';
type OwnProps = {
children: React.ReactNode;
children: ReactNode;
};
const StyledSubTitle = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
`;
export function SubTitle({ children }: OwnProps): JSX.Element {
return <StyledSubTitle>{children}</StyledSubTitle>;
}
export const SubTitle = ({ children }: OwnProps): JSX.Element => (
<StyledSubTitle>{children}</StyledSubTitle>
);

4
front/src/modules/auth/components/Title.tsx
View File

@ -15,7 +15,7 @@ const StyledTitle = styled.div`
margin-top: ${({ theme }) => theme.spacing(4)};
`;
export function Title({ children, animate = false }: Props) {
export const Title = ({ children, animate = false }: Props) => {
if (animate) {
return (
<StyledTitle>
@ -25,4 +25,4 @@ export function Title({ children, animate = false }: Props) {
}
return <StyledTitle>{children}</StyledTitle>;
}
};

4
front/src/modules/auth/hooks/useAuth.ts
View File

@ -12,7 +12,7 @@ import {
import { currentUserState } from '../states/currentUserState';
import { tokenPairState } from '../states/tokenPairState';
export function useAuth() {
export const useAuth = () => {
const [, setTokenPair] = useRecoilState(tokenPairState);
const [, setCurrentUser] = useRecoilState(currentUserState);
@ -148,4 +148,4 @@ export function useAuth() {
signInWithCredentials: handleCrendentialsSignIn,
signInWithGoogle: handleGoogleLogin,
};
}
};

4
front/src/modules/auth/hooks/useIsLogged.ts
View File

@ -2,8 +2,8 @@ import { useRecoilState } from 'recoil';
import { tokenPairState } from '../states/tokenPairState';
export function useIsLogged(): boolean {
export const useIsLogged = (): boolean => {
const [tokenPair] = useRecoilState(tokenPairState);
return !!tokenPair;
}
};

4
front/src/modules/auth/hooks/useOnboardingStatus.ts
View File

@ -7,9 +7,9 @@ import {
OnboardingStatus,
} from '../utils/getOnboardingStatus';
export function useOnboardingStatus(): OnboardingStatus | undefined {
export const useOnboardingStatus = (): OnboardingStatus | undefined => {
const [currentUser] = useRecoilState(currentUserState);
const isLoggedIn = useIsLogged();
return getOnboardingStatus(isLoggedIn, currentUser);
}
};

4
front/src/modules/auth/sign-in-up/components/FooterNote.tsx
View File

@ -11,6 +11,4 @@ const StyledContainer = styled.div`
text-align: center;
`;
export function FooterNote(props: Props) {
return <StyledContainer {...props} />;
}
export const FooterNote = (props: Props) => <StyledContainer {...props} />;

5
front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx
View File

@ -1,3 +1,4 @@
import { JSX } from 'react';
import styled from '@emotion/styled';
const StyledSeparator = styled.div`
@ -8,6 +9,4 @@ const StyledSeparator = styled.div`
width: 100%;
`;
export function HorizontalSeparator(): JSX.Element {
return <StyledSeparator />;
}
export const HorizontalSeparator = (): JSX.Element => <StyledSeparator />;

4
front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
View File

@ -41,7 +41,7 @@ const StyledInputContainer = styled.div`
margin-bottom: ${({ theme }) => theme.spacing(3)};
`;
export function SignInUpForm() {
export const SignInUpForm = () => {
const {
authProviders,
signInWithGoogle,
@ -220,4 +220,4 @@ export function SignInUpForm() {
</StyledFooterNote>
</>
);
}
};

4
front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx
View File

@ -42,7 +42,7 @@ const validationSchema = Yup.object()
type Form = Yup.InferType<typeof validationSchema>;
export function useSignInUp() {
export const useSignInUp = () => {
const navigate = useNavigate();
const { enqueueSnackBar } = useSnackBar();
const isMatchingLocation = useIsMatchingLocation();
@ -183,4 +183,4 @@ export function useSignInUp() {
form,
workspace: workspace?.findWorkspaceFromInviteHash,
};
}
};

6
front/src/modules/auth/utils/getOnboardingStatus.ts
View File

@ -7,10 +7,10 @@ export enum OnboardingStatus {
Completed = 'completed',
}
export function getOnboardingStatus(
export const getOnboardingStatus = (
isLoggedIn: boolean,
currentUser: CurrentUser | null,
) {
) => {
if (!isLoggedIn) {
return OnboardingStatus.OngoingUserCreation;
}
@ -28,4 +28,4 @@ export function getOnboardingStatus(
}
return OnboardingStatus.Completed;
}
};

4
front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -28,7 +28,7 @@ import {
StyledList,
} from './CommandMenuStyles';
export function CommandMenu() {
export const CommandMenu = () => {
const { openCommandMenu, closeCommandMenu } = useCommandMenu();
const openActivityRightDrawer = useOpenActivityRightDrawer();
const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
@ -219,4 +219,4 @@ export function CommandMenu() {
</StyledList>
</StyledDialog>
);
}
};

6
front/src/modules/command-menu/components/CommandMenuItem.tsx
View File

@ -16,13 +16,13 @@ export type CommandMenuItemProps = {
shortcuts?: Array<string>;
};
export function CommandMenuItem({
export const CommandMenuItem = ({
label,
to,
onClick,
Icon,
shortcuts,
}: CommandMenuItemProps) {
}: CommandMenuItemProps) => {
const navigate = useNavigate();
const { closeCommandMenu } = useCommandMenu();
@ -51,4 +51,4 @@ export function CommandMenuItem({
onClick={onItemClick}
/>
);
}
};

20
front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -8,7 +8,7 @@ import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
import { Command } from '../types/Command';
export function useCommandMenu() {
export const useCommandMenu = () => {
const [, setIsCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState);
const setCommands = useSetRecoilState(commandMenuCommandsState);
const {
@ -16,23 +16,23 @@ export function useCommandMenu() {
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
function openCommandMenu() {
const openCommandMenu = () => {
setIsCommandMenuOpened(true);
setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenu);
}
};
function closeCommandMenu() {
const closeCommandMenu = () => {
setIsCommandMenuOpened(false);
goBackToPreviousHotkeyScope();
}
};
function addToCommandMenu(addCommand: Command[]) {
const addToCommandMenu = (addCommand: Command[]) => {
setCommands((prev) => [...prev, ...addCommand]);
}
};
function setToIntitialCommandMenu() {
const setToIntitialCommandMenu = () => {
setCommands(commandMenuCommands);
}
};
return {
openCommandMenu,
@ -40,4 +40,4 @@ export function useCommandMenu() {
addToCommandMenu,
setToIntitialCommandMenu,
};
}
};

31
front/src/modules/companies/components/AddPersonToCompany.tsx
View File

@ -38,13 +38,13 @@ const StyledInputContainer = styled.div`
const defaultUsername = { firstName: '', lastName: '' };
export function AddPersonToCompany({
export const AddPersonToCompany = ({
companyId,
peopleIds,
}: {
companyId: string;
peopleIds?: string[];
}) {
}) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [isCreationDropdownOpen, setIsCreationDropdownOpen] = useState(false);
const [username, setUsername] = useState(defaultUsername);
@ -60,8 +60,8 @@ export function AddPersonToCompany({
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
function handlePersonSelected(companyId: string) {
return async (newPerson: PersonForSelect | null) => {
const handlePersonSelected =
(companyId: string) => async (newPerson: PersonForSelect | null) => {
if (newPerson) {
await updatePerson({
variables: {
@ -77,30 +77,31 @@ export function AddPersonToCompany({
handleClosePicker();
}
};
}
function handleClosePicker() {
const handleClosePicker = () => {
if (isDropdownOpen) {
setIsDropdownOpen(false);
goBackToPreviousHotkeyScope();
}
}
};
function handleOpenPicker() {
const handleOpenPicker = () => {
if (!isDropdownOpen) {
setIsDropdownOpen(true);
setHotkeyScopeAndMemorizePreviousScope(
RelationPickerHotkeyScope.RelationPicker,
);
}
}
};
function handleUsernameChange(type: 'firstName' | 'lastName') {
return (name: string): void =>
const handleUsernameChange =
(type: 'firstName' | 'lastName') =>
(name: string): void =>
setUsername((prevUserName) => ({ ...prevUserName, [type]: name }));
}
async function handleInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
const handleInputKeyDown = async (
e: React.KeyboardEvent<HTMLInputElement>,
) => {
if (e.key !== 'Enter' || (!username.firstName && !username.lastName))
return;
const newPersonId = v4();
@ -116,7 +117,7 @@ export function AddPersonToCompany({
});
setIsCreationDropdownOpen(false);
setUsername(defaultUsername);
}
};
return (
<RecoilScope>
@ -161,4 +162,4 @@ export function AddPersonToCompany({
</StyledContainer>
</RecoilScope>
);
}
};

26
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -100,7 +100,7 @@ const StyledFieldContainer = styled.div`
width: 100%;
`;
export function CompanyBoardCard() {
export const CompanyBoardCard = () => {
const { BoardRecoilScopeContext } = useBoardContext();
const { currentCardSelected, setCurrentCardSelected } =
@ -122,21 +122,19 @@ export function CompanyBoardCard() {
return null;
}
function PreventSelectOnClickContainer({
const PreventSelectOnClickContainer = ({
children,
}: {
children: ReactNode;
}) {
return (
<StyledFieldContainer
onClick={(e) => {
e.stopPropagation();
}}
>
{children}
</StyledFieldContainer>
);
}
}) => (
<StyledFieldContainer
onClick={(e) => {
e.stopPropagation();
}}
>
{children}
</StyledFieldContainer>
);
return (
<StyledBoardCardWrapper>
@ -185,4 +183,4 @@ export function CompanyBoardCard() {
</StyledBoardCard>
</StyledBoardCardWrapper>
);
}
};

24
front/src/modules/companies/components/CompanyChip.tsx
View File

@ -7,20 +7,18 @@ type OwnProps = {
variant?: EntityChipVariant;
};
export function CompanyChip({
export const CompanyChip = ({
id,
name,
pictureUrl,
variant = EntityChipVariant.Regular,
}: OwnProps) {
return (
<EntityChip
entityId={id}
linkToEntity={`/companies/${id}`}
name={name}
avatarType="squared"
pictureUrl={pictureUrl}
variant={variant}
/>
);
}
}: OwnProps) => (
<EntityChip
entityId={id}
linkToEntity={`/companies/${id}`}
name={name}
avatarType="squared"
pictureUrl={pictureUrl}
variant={variant}
/>
);

10
front/src/modules/companies/components/CompanyPicker.tsx
View File

@ -13,7 +13,7 @@ export type OwnProps = {
onCancel?: () => void;
};
export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
export const CompanyPicker = ({ companyId, onSubmit, onCancel }: OwnProps) => {
const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
useRecoilScopedState(relationPickerSearchFilterScopedState);
@ -22,11 +22,11 @@ export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
selectedIds: companyId ? [companyId] : [],
});
async function handleEntitySelected(
const handleEntitySelected = async (
selectedCompany: EntityForSelect | null | undefined,
) {
) => {
onSubmit(selectedCompany ?? null);
}
};
useEffect(() => {
setRelationPickerSearchFilter('');
@ -41,4 +41,4 @@ export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
selectedEntity={companies.selectedEntities[0]}
/>
);
}
};

20
front/src/modules/companies/components/CompanyPickerCell.tsx
View File

@ -23,13 +23,13 @@ export type CompanyPickerSelectedCompany = EntityForSelect & {
domainName: string;
};
export function CompanyPickerCell({
export const CompanyPickerCell = ({
companyId,
onSubmit,
onCancel,
createModeEnabled,
width,
}: OwnProps) {
}: OwnProps) => {
const [isCreateMode, setIsCreateMode] = useRecoilScopedState(
isCreateModeScopedState,
);
@ -47,18 +47,18 @@ export function CompanyPickerCell({
selectedIds: [companyId ?? ''],
});
async function handleCompanySelected(
const handleCompanySelected = async (
company: CompanyPickerSelectedCompany | null | undefined,
) {
) => {
onSubmit(company ?? null);
}
};
function handleStartCreation() {
const handleStartCreation = () => {
setIsCreateMode(true);
setHotkeyScope(TableHotkeyScope.CellDoubleTextInput);
}
};
async function handleCreate(firstValue: string, secondValue: string) {
const handleCreate = async (firstValue: string, secondValue: string) => {
const insertCompanyRequest = await insertCompany({
variables: {
data: {
@ -77,7 +77,7 @@ export function CompanyPickerCell({
domainName: companyCreated.domainName,
});
setIsCreateMode(false);
}
};
return isCreateMode ? (
<DoubleTextCellEdit
firstValue={relationPickerSearchFilter}
@ -99,4 +99,4 @@ export function CompanyPickerCell({
width={width}
/>
);
}
};

16
front/src/modules/companies/components/CompanyProgressPicker.tsx
View File

@ -25,11 +25,11 @@ export type OwnProps = {
onCancel?: () => void;
};
export function CompanyProgressPicker({
export const CompanyProgressPicker = ({
companyId,
onSubmit,
onCancel,
}: OwnProps) {
}: OwnProps) => {
const containerRef = useRef<HTMLDivElement>(null);
const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
@ -53,16 +53,16 @@ export function CompanyProgressPicker({
[currentPipeline],
);
function handlePipelineStageChange(newPipelineStageId: string) {
const handlePipelineStageChange = (newPipelineStageId: string) => {
setSelectedPipelineStageId(newPipelineStageId);
setIsProgressSelectionUnfolded(false);
}
};
async function handleEntitySelected(
const handleEntitySelected = async (
selectedCompany: EntityForSelect | null | undefined,
) {
) => {
onSubmit(selectedCompany ?? null, selectedPipelineStageId);
}
};
useEffect(() => {
if (currentPipelineStages?.[0]?.id) {
@ -125,4 +125,4 @@ export function CompanyProgressPicker({
)}
</StyledDropdownMenu>
);
}
};

4
front/src/modules/companies/components/CompanyTeam.tsx
View File

@ -42,7 +42,7 @@ const StyledTitle = styled.div`
line-height: ${({ theme }) => theme.text.lineHeight.lg};
`;
export function CompanyTeam({ company }: CompanyTeamPropsType) {
export const CompanyTeam = ({ company }: CompanyTeamPropsType) => {
const { data } = useGetPeopleQuery({
variables: {
orderBy: [],
@ -77,4 +77,4 @@ export function CompanyTeam({ company }: CompanyTeamPropsType) {
)}
</>
);
}
};

4
front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx
View File

@ -7,7 +7,7 @@ import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/
import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
export function FilterDropdownCompanySearchSelect() {
export const FilterDropdownCompanySearchSelect = () => {
const { ViewBarRecoilScopeContext } = useViewBarContext();
const filterDropdownSearchInput = useRecoilScopedValue(
@ -30,4 +30,4 @@ export function FilterDropdownCompanySearchSelect() {
return (
<FilterDropdownEntitySearchSelect entitiesForSelect={usersForSelect} />
);
}
};

4
front/src/modules/companies/components/HooksCompanyBoardEffect.tsx
View File

@ -24,7 +24,7 @@ import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
export function HooksCompanyBoardEffect() {
export const HooksCompanyBoardEffect = () => {
const [, setAvailableFilters] = useRecoilScopedState(
availableFiltersScopedState,
CompanyBoardRecoilScopeContext,
@ -134,4 +134,4 @@ export function HooksCompanyBoardEffect() {
]);
return <></>;
}
};

12
front/src/modules/companies/components/NewCompanyProgressButton.tsx
View File

@ -12,7 +12,7 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
import { useCreateCompanyProgress } from '../hooks/useCreateCompanyProgress';
import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
export function NewCompanyProgressButton() {
export const NewCompanyProgressButton = () => {
const [isCreatingCard, setIsCreatingCard] = useState(false);
const pipelineStageId = useContext(BoardColumnIdContext);
@ -25,7 +25,7 @@ export function NewCompanyProgressButton() {
const createCompanyProgress = useCreateCompanyProgress();
function handleEntitySelect(company: any) {
const handleEntitySelect = (company: any) => {
setIsCreatingCard(false);
goBackToPreviousHotkeyScope();
@ -38,7 +38,7 @@ export function NewCompanyProgressButton() {
}
createCompanyProgress(company.id, pipelineStageId);
}
};
const handleNewClick = useCallback(() => {
setIsCreatingCard(true);
@ -47,10 +47,10 @@ export function NewCompanyProgressButton() {
);
}, [setIsCreatingCard, setHotkeyScopeAndMemorizePreviousScope]);
function handleCancel() {
const handleCancel = () => {
goBackToPreviousHotkeyScope();
setIsCreatingCard(false);
}
};
const [relationPickerSearchFilter] = useRecoilScopedState(
relationPickerSearchFilterScopedState,
@ -76,4 +76,4 @@ export function NewCompanyProgressButton() {
)}
</>
);
}
};

12
front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx
View File

@ -33,7 +33,7 @@ const StyledEditableTitleInput = styled.input<{
width: calc(100% - ${({ theme }) => theme.spacing(2)});
`;
export function CompanyNameEditableField({ company }: OwnProps) {
export const CompanyNameEditableField = ({ company }: OwnProps) => {
const [internalValue, setInternalValue] = useState(company.name);
const [updateCompany] = useUpdateOneCompanyMutation();
@ -42,11 +42,11 @@ export function CompanyNameEditableField({ company }: OwnProps) {
setInternalValue(company.name);
}, [company.name]);
async function handleChange(newValue: string) {
const handleChange = async (newValue: string) => {
setInternalValue(newValue);
}
};
async function handleSubmit() {
const handleSubmit = async () => {
await updateCompany({
variables: {
where: {
@ -57,7 +57,7 @@ export function CompanyNameEditableField({ company }: OwnProps) {
},
},
});
}
};
return (
<RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
@ -69,4 +69,4 @@ export function CompanyNameEditableField({ company }: OwnProps) {
/>
</RecoilScope>
);
}
};

4
front/src/modules/companies/hooks/useCompanyQuery.ts
View File

@ -3,7 +3,7 @@ import { useSetRecoilState } from 'recoil';
import { genericEntitiesFamilyState } from '@/ui/editable-field/states/genericEntitiesFamilyState';
import { useGetCompanyQuery } from '~/generated/graphql';
export function useCompanyQuery(id: string) {
export const useCompanyQuery = (id: string) => {
const updateCompanyShowPage = useSetRecoilState(
genericEntitiesFamilyState(id),
);
@ -13,4 +13,4 @@ export function useCompanyQuery(id: string) {
updateCompanyShowPage(data?.findUniqueCompany);
},
});
}
};

8
front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx
View File

@ -8,15 +8,15 @@ import { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export function useCompanyTableActionBarEntries() {
export const useCompanyTableActionBarEntries = () => {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleActivityClick(type: ActivityType) {
const handleActivityClick = async (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
}
};
const deleteSelectedCompanies = useDeleteSelectedComapnies();
return {
@ -40,4 +40,4 @@ export function useCompanyTableActionBarEntries() {
},
]),
};
}
};

8
front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
View File

@ -8,15 +8,15 @@ import { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export function useCompanyTableContextMenuEntries() {
export const useCompanyTableContextMenuEntries = () => {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
const handleButtonClick = async (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
}
};
const deleteSelectedCompanies = useDeleteSelectedComapnies();
@ -41,4 +41,4 @@ export function useCompanyTableContextMenuEntries() {
},
]),
};
}
};

4
front/src/modules/companies/hooks/useCreateCompanyProgress.ts
View File

@ -8,7 +8,7 @@ import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
import { useCreateOneCompanyPipelineProgressMutation } from '~/generated/graphql';
export function useCreateCompanyProgress() {
export const useCreateCompanyProgress = () => {
const [createOneCompanyPipelineProgress] =
useCreateOneCompanyPipelineProgressMutation({
refetchQueries: [
@ -44,4 +44,4 @@ export function useCreateCompanyProgress() {
},
[createOneCompanyPipelineProgress, currentPipeline],
);
}
};

8
front/src/modules/companies/hooks/useDeleteCompanies.ts
View File

@ -7,7 +7,7 @@ import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowI
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
export function useDeleteSelectedComapnies() {
export const useDeleteSelectedComapnies = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const resetRowSelection = useResetTableRowSelection();
@ -18,7 +18,7 @@ export function useDeleteSelectedComapnies() {
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
async function deleteSelectedCompanies() {
const deleteSelectedCompanies = async () => {
const rowIdsToDelete = selectedRowIds;
resetRowSelection();
@ -46,7 +46,7 @@ export function useDeleteSelectedComapnies() {
});
},
});
}
};
return deleteSelectedCompanies;
}
};

6
front/src/modules/companies/hooks/useFilteredSearchCompanyQuery.ts
View File

@ -3,7 +3,7 @@ import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEn
import { useSearchCompanyQuery } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
export function useFilteredSearchCompanyQuery({
export const useFilteredSearchCompanyQuery = ({
searchFilter,
selectedIds = [],
limit,
@ -11,7 +11,7 @@ export function useFilteredSearchCompanyQuery({
searchFilter: string;
selectedIds?: string[];
limit?: number;
}) {
}) => {
return useFilteredSearchEntityQuery({
queryHook: useSearchCompanyQuery,
filters: [
@ -32,4 +32,4 @@ export function useFilteredSearchCompanyQuery({
selectedIds: selectedIds,
limit,
});
}
};

6
front/src/modules/companies/hooks/useSpreadsheetCompanyImport.ts
View File

@ -9,7 +9,7 @@ import { fieldsForCompany } from '../utils/fieldsForCompany';
export type FieldCompanyMapping = (typeof fieldsForCompany)[number]['key'];
export function useSpreadsheetCompanyImport() {
export const useSpreadsheetCompanyImport = () => {
const { openSpreadsheetImport } = useSpreadsheetImport<FieldCompanyMapping>();
const { enqueueSnackBar } = useSnackBar();
@ -23,7 +23,7 @@ export function useSpreadsheetCompanyImport() {
) => {
openSpreadsheetImport({
...options,
async onSubmit(data) {
onSubmit: async (data) => {
// TODO: Add better type checking in spreadsheet import later
const createInputs = data.validData.map((company) => ({
id: uuidv4(),
@ -56,4 +56,4 @@ export function useSpreadsheetCompanyImport() {
};
return { openCompanySpreadsheetImport };
}
};

Some files were not shown because too many files have changed in this diff Show More