From 32d45ae0ba613119dc7b638eddfbf0d83c6dd7e8 Mon Sep 17 00:00:00 2001 From: Alexis Benoliel Date: Thu, 24 Oct 2024 14:50:14 +0200 Subject: [PATCH] B 2594 add prefill label (#2708) --- .../me/fetch/update-my-application.ts | 20 ----- api-client/resources/me/mutations/index.ts | 1 - .../me/mutations/use-update-my-application.ts | 33 -------- api-client/resources/me/types.ts | 3 - .../contributor-details.tsx | 15 +--- .../apply-issue-card/apply-issue-card.tsx | 4 +- .../apply-issue-card.types.ts | 2 +- .../apply-issue-drawer.constants.ts | 44 +++++++++++ .../apply-issue-drawer.hooks.ts | 61 ++++----------- .../apply-issue-drawer.loading.tsx | 2 - .../apply-issue-drawer/apply-issue-drawer.tsx | 75 ++++++++----------- .../apply-issue-drawer.types.ts | 5 +- .../features/projects/apply-issue-drawer.json | 5 +- .../project-application-details.json | 3 +- 14 files changed, 104 insertions(+), 169 deletions(-) delete mode 100644 api-client/resources/me/fetch/update-my-application.ts delete mode 100644 api-client/resources/me/mutations/use-update-my-application.ts create mode 100644 components/features/apply-issue-drawer/apply-issue-drawer.constants.ts diff --git a/api-client/resources/me/fetch/update-my-application.ts b/api-client/resources/me/fetch/update-my-application.ts deleted file mode 100644 index ece3e0f565..0000000000 --- a/api-client/resources/me/fetch/update-my-application.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { FetchAdapter } from "api-client/adapter/fetch/fetch-adapter"; -import { IFetchAdapater } from "api-client/adapter/fetch/fetch-adapter.types"; -import { ParametersInterface } from "api-client/types/parameters-interface"; - -import adapters from "../adapters"; -import { ProjectApplicationUpdatePathParams } from "../types"; - -export function updateMyApplication({ - pathParams, -}: ParametersInterface<{ - PathParams: ProjectApplicationUpdatePathParams; -}>): IFetchAdapater { - const fetchAdapter = new FetchAdapter(adapters.update_my_application); - - if (pathParams) { - fetchAdapter.setPathParams(pathParams); - } - - return fetchAdapter; -} diff --git a/api-client/resources/me/mutations/index.ts b/api-client/resources/me/mutations/index.ts index 181b35b35b..74c7578b01 100644 --- a/api-client/resources/me/mutations/index.ts +++ b/api-client/resources/me/mutations/index.ts @@ -1,5 +1,4 @@ export * from "./use-update-my-committee-assignment-project"; export * from "./use-logout-user"; export * from "./use-post-my-application"; -export * from "./use-update-my-application"; export * from "./use-delete-banner-by-id"; diff --git a/api-client/resources/me/mutations/use-update-my-application.ts b/api-client/resources/me/mutations/use-update-my-application.ts deleted file mode 100644 index 9e61471649..0000000000 --- a/api-client/resources/me/mutations/use-update-my-application.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { DefaultError } from "@tanstack/query-core"; -import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { useReactQueryAdapter } from "api-client/adapter/react-query/react-query-adapter"; -import { ParametersInterfaceWithReactQuery } from "api-client/types/parameters-interface"; -import { bootstrap } from "core/bootstrap"; - -import { PROJECT_TAGS } from "src/api/Project/tags"; - -import { updateMyApplication } from "../fetch/update-my-application"; -import { ProjectApplicationUpdateRequest } from "../types"; - -export function useUpdateMyApplication( - { options, ...fetch }: ParametersInterfaceWithReactQuery, - projectId: string -) { - const { mutation } = useReactQueryAdapter(updateMyApplication(fetch), options); - const queryClient = useQueryClient(); - - return useMutation({ - ...mutation, - onSuccess: async () => { - await queryClient.invalidateQueries({ - queryKey: PROJECT_TAGS.good_first_issues(projectId), - exact: false, - }); - const projectStoragePort = bootstrap.getProjectStoragePortForClient(); - await queryClient.invalidateQueries({ - queryKey: projectStoragePort.getProjectPublicIssues({ pathParams: { projectId } }).tag, - exact: false, - }); - }, - }); -} diff --git a/api-client/resources/me/types.ts b/api-client/resources/me/types.ts index 82dd49c8ef..a793702198 100644 --- a/api-client/resources/me/types.ts +++ b/api-client/resources/me/types.ts @@ -55,9 +55,6 @@ export interface GetMyOnboardingResponse extends MyOnboardingResponse {} export type PostProjectApplicationCreateRequest = components["schemas"]["ProjectApplicationCreateRequest"]; export type PostProjectApplicationCreateResponse = components["schemas"]["ProjectApplicationCreateResponse"]; -export type ProjectApplicationUpdateRequest = components["schemas"]["ProjectApplicationUpdateRequest"]; -export type ProjectApplicationUpdatePathParams = operations["updateProjectApplication"]["parameters"]["path"]; - /* --------------------------------- My Banners -------------------------------- */ export type CloseBannerPathParams = operations["closeBanner"]["parameters"]["path"]; diff --git a/app/p/[slug]/applications/[issueId]/features/contributor-details/contributor-details.tsx b/app/p/[slug]/applications/[issueId]/features/contributor-details/contributor-details.tsx index f87ff8f120..a6da650486 100644 --- a/app/p/[slug]/applications/[issueId]/features/contributor-details/contributor-details.tsx +++ b/app/p/[slug]/applications/[issueId]/features/contributor-details/contributor-details.tsx @@ -74,22 +74,11 @@ export function ContributorDetails({ githubId, applicationId }: TContributorDeta - {application?.motivation} - - - - - - - - {application?.problemSolvingApproach} + {application?.githubComment} diff --git a/app/p/[slug]/components/apply-issue-card/apply-issue-card.tsx b/app/p/[slug]/components/apply-issue-card/apply-issue-card.tsx index 5c6d9365fc..61a50161f8 100644 --- a/app/p/[slug]/components/apply-issue-card/apply-issue-card.tsx +++ b/app/p/[slug]/components/apply-issue-card/apply-issue-card.tsx @@ -8,8 +8,8 @@ export function ApplyIssueCard({ container = "2", iconProps, titleProps, childre return (
- - + {iconProps ? : null} +
{children}
diff --git a/app/p/[slug]/components/apply-issue-card/apply-issue-card.types.ts b/app/p/[slug]/components/apply-issue-card/apply-issue-card.types.ts index bcd3a11ef5..1db296c011 100644 --- a/app/p/[slug]/components/apply-issue-card/apply-issue-card.types.ts +++ b/app/p/[slug]/components/apply-issue-card/apply-issue-card.types.ts @@ -7,7 +7,7 @@ import { TIcon } from "components/layout/icon/icon.types"; export namespace TApplyIssueCard { export interface Props extends PropsWithChildren { container?: PaperPort<"article">["container"]; - iconProps: TIcon.Props; + iconProps?: TIcon.Props; titleProps: TypoPort<"span">; className?: string; } diff --git a/components/features/apply-issue-drawer/apply-issue-drawer.constants.ts b/components/features/apply-issue-drawer/apply-issue-drawer.constants.ts new file mode 100644 index 0000000000..62a646f5e4 --- /dev/null +++ b/components/features/apply-issue-drawer/apply-issue-drawer.constants.ts @@ -0,0 +1,44 @@ +export const ApplyIssuesPrefillLabels = [ + "Can I take this issue?", + "I'd love to work on this!", + "Can I be assigned to this?", + "Can I handle this task?", + "I'd like to take this issue.", + "Can I tackle this one?", + "Let me try this one!", + "May I pick this up?", + "I'd love to give this a go.", + "Can I work on this, please?", + "Is this issue still available?", + "Could I take a shot at this?", + "May I take care of this?", + "Can I jump on this task?", + "Let me handle this issue!", + "I'd be happy to do this.", + "Could I try solving this?", + "Can I contribute to this one?", + "Is it okay if I take this?", + "May I try my hand at this?", + "I’d like to resolve this.", + "Could I take on this issue?", + "Can I start working on this?", + "May I take this issue on?", + "I’d like to work on this.", + "Mind if I take this issue?", + "Could I grab this task?", + "I’m interested in this one.", + "Can I attempt this issue?", + "Would love to tackle this!", + "May I be assigned to this?", + "I'd like to handle this task.", + "Can I try solving this issue?", + "Mind if I try this one?", + "I’d like to help with this.", + "Can I take this from here?", + "Can I take care of this issue?", + "Could I be assigned to this?", + "May I handle this issue?", + "I’d love to work on this task.", + "Is it okay if I tackle this?", + "Could I take over this issue?", +]; diff --git a/components/features/apply-issue-drawer/apply-issue-drawer.hooks.ts b/components/features/apply-issue-drawer/apply-issue-drawer.hooks.ts index 167a586734..e63c9d96f2 100644 --- a/components/features/apply-issue-drawer/apply-issue-drawer.hooks.ts +++ b/components/features/apply-issue-drawer/apply-issue-drawer.hooks.ts @@ -11,6 +11,7 @@ import { FetchError } from "src/api/query.type"; import { HttpStatusStrings } from "src/api/query.utils"; import useMutationAlert from "src/api/useMutationAlert"; +import { ApplyIssuesPrefillLabels } from "components/features/apply-issue-drawer/apply-issue-drawer.constants"; import { TApplyIssueDrawer } from "components/features/apply-issue-drawer/apply-issue-drawer.types"; import { usePublicRepoScope } from "components/features/grant-permission/hooks/use-public-repo-scope"; @@ -43,15 +44,6 @@ export function useApplyIssueDrawer({ state }: Pick({ resolver: zodResolver(TApplyIssueDrawer.validation), defaultValues: { - motivations: application?.motivation ?? "", - problemSolvingApproach: application?.problemSolvingApproach ?? "", + githubComment: application?.githubComment ?? "", }, }); useEffect(() => { - if (application) { - form.reset({ - motivations: application.motivation ?? "", - problemSolvingApproach: application.problemSolvingApproach ?? "", - }); - } + form.reset({ + githubComment: application?.githubComment ?? "", + }); }, [application]); async function getPermissionsOnError(err: FetchError) { @@ -110,8 +88,7 @@ export function useApplyIssueDrawer({ state }: Pick { setState(prevState => ({ ...prevState, isOpen: false })); @@ -121,21 +98,10 @@ export function useApplyIssueDrawer({ state }: Pick { - setState(prevState => ({ ...prevState, isOpen: false })); - }) - .catch(async (err: FetchError) => { - await getPermissionsOnError(err); - }); - } - - function handleCancel() { - deleteAsync({}) .then(() => { setState(prevState => ({ ...prevState, isOpen: false })); setTimeout(() => { @@ -155,10 +121,8 @@ export function useApplyIssueDrawer({ state }: Pick - - diff --git a/components/features/apply-issue-drawer/apply-issue-drawer.tsx b/components/features/apply-issue-drawer/apply-issue-drawer.tsx index e30a6a5f07..6ecb6d71db 100644 --- a/components/features/apply-issue-drawer/apply-issue-drawer.tsx +++ b/components/features/apply-issue-drawer/apply-issue-drawer.tsx @@ -16,7 +16,10 @@ import { TagIcon } from "components/atoms/tag/variants/tag-icon"; import { Textarea } from "components/atoms/textarea"; import { Typo } from "components/atoms/typo/variants/typo-default"; import { SkeletonEl } from "components/ds/skeleton/skeleton"; -import { useApplyIssueDrawer } from "components/features/apply-issue-drawer/apply-issue-drawer.hooks"; +import { + useApplyIssueDrawer, + useApplyIssuePrefillLabel, +} from "components/features/apply-issue-drawer/apply-issue-drawer.hooks"; import { ApplyIssueDrawerLoading } from "components/features/apply-issue-drawer/apply-issue-drawer.loading"; import { TApplyIssueDrawer } from "components/features/apply-issue-drawer/apply-issue-drawer.types"; import { GrantPermission } from "components/features/grant-permission/grant-permission"; @@ -24,6 +27,7 @@ import { usePublicRepoScope } from "components/features/grant-permission/hooks/u import { BaseLink } from "components/layout/base-link/base-link"; import { Icon } from "components/layout/icon/icon"; import { Translate } from "components/layout/translate/translate"; +import { CheckboxButton } from "components/molecules/checkbox-button"; import { Drawer } from "components/molecules/drawer"; import { NEXT_ROUTER } from "constants/router"; @@ -36,25 +40,27 @@ export function ApplyIssueDrawer({ state }: TApplyIssueDrawer.Props) { const [isOpenGrantPermission, setIsOpenGrantPermission] = useState(false); const { isAuthenticated } = useAuth0(); const { capture } = usePosthog(); + const prefillLabel = useApplyIssuePrefillLabel(); const { user } = useCurrentUser(); const router = useRouter(); + const [shouldDeleteGithubComment, setShouldDeleteGithubComment] = useState(false); const { project: { data: project }, - form: { control, reset, setValue, getValues, handleSubmit }, + form: { control, reset, setValue, getValues, handleSubmit, watch }, issue, getIssue: { isLoading: issueIsLoading }, application, getApplication: { isLoading: applicationIsLoading }, createApplication: { isPending: createIsPending }, - updateApplication: { isPending: updateIsPending }, deleteApplication: { isPending: deleteIsPending }, handleCreate, - handleUpdate, handleCancel, } = useApplyIssueDrawer({ state }); const isLoading = issueIsLoading || applicationIsLoading; + const githubComment = watch("githubComment"); + useEffect(() => { if (isOpen && project) { capture("issue_viewed", { @@ -72,29 +78,35 @@ export function ApplyIssueDrawer({ state }: TApplyIssueDrawer.Props) { }, [isOpen]); useEffect(() => { - setValue("motivations", application?.motivation ?? ""); - setValue("problemSolvingApproach", application?.problemSolvingApproach ?? ""); + if (prefillLabel && !githubComment) { + setValue("githubComment", prefillLabel); + } + }, [prefillLabel, githubComment]); + + useEffect(() => { + if (application) { + setValue("githubComment", application?.githubComment ?? ""); + } }, [application]); const { canApply, handleVerifyPermissions } = usePublicRepoScope({ onSuccessCallback: actionType => { - const payload = { - motivations: getValues("motivations"), - problemSolvingApproach: getValues("problemSolvingApproach"), - }; - switch (actionType) { case "create": - handleCreate(payload); + handleCreate({ + githubComment: getValues("githubComment"), + }); break; - case "update": - handleUpdate(payload); + case "delete": + handleCancel(shouldDeleteGithubComment); break; } }, }); function handleApplication(actionType: TApplyIssueDrawer.ActionType) { + if (createIsPending || deleteIsPending) return; + if (!isAuthenticated) { router.push(NEXT_ROUTER.signup.root); return; @@ -152,12 +164,12 @@ export function ApplyIssueDrawer({ state }: TApplyIssueDrawer.Props) { const EndContent = hasApplied ? (
- -
) : (