-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #137 from game-node-app/dev
Enables PSN in the Importer system
- Loading branch information
Showing
13 changed files
with
276 additions
and
201 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 5 additions & 12 deletions
17
src/components/preferences/handlers/connections/PreferencesConnectionModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
216 changes: 216 additions & 0 deletions
216
src/components/preferences/handlers/connections/PreferencesConnectionSetup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| import React, { useEffect, useMemo } from "react"; | ||
| import { BaseModalChildrenProps } from "@/util/types/modal-props"; | ||
| import { z } from "zod"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { zodResolver } from "@hookform/resolvers/zod"; | ||
| import { ConnectionsService, UserConnectionDto } from "@/wrapper/server"; | ||
| import { useOwnUserConnectionByType } from "@/components/connections/hooks/useOwnUserConnectionByType"; | ||
| import { useMutation, useQueryClient } from "@tanstack/react-query"; | ||
| import { notifications } from "@mantine/notifications"; | ||
| import { getErrorMessage } from "@/util/getErrorMessage"; | ||
| import { getCapitalizedText } from "@/util/getCapitalizedText"; | ||
| import CenteredErrorMessage from "@/components/general/CenteredErrorMessage"; | ||
| import { Button, Stack, Switch, Text, TextInput } from "@mantine/core"; | ||
| import { useAvailableConnections } from "@/components/connections/hooks/useAvailableConnections"; | ||
|
|
||
| const ConnectionSetupFormSchema = z.object({ | ||
| userIdentifier: z.string().min(1, "A username must be provided."), | ||
| isImporterEnabled: z.boolean().default(true), | ||
| }); | ||
|
|
||
| type ConnectionSetupFormValues = z.infer<typeof ConnectionSetupFormSchema>; | ||
|
|
||
| export interface Props extends BaseModalChildrenProps { | ||
| type: UserConnectionDto.type; | ||
| } | ||
|
|
||
| const PreferencesConnectionSetup = ({ type, onClose }: Props) => { | ||
| const { | ||
| register, | ||
| watch, | ||
| setValue, | ||
| handleSubmit, | ||
| formState: { errors }, | ||
| } = useForm<ConnectionSetupFormValues>({ | ||
| mode: "onBlur", | ||
| defaultValues: { | ||
| isImporterEnabled: true, | ||
| }, | ||
| resolver: zodResolver(ConnectionSetupFormSchema), | ||
| }); | ||
|
|
||
| const userConnection = useOwnUserConnectionByType(type); | ||
|
|
||
| const availableConnections = useAvailableConnections(); | ||
|
|
||
| const queryClient = useQueryClient(); | ||
|
|
||
| const connectionCreateMutation = useMutation({ | ||
| mutationFn: async (data: ConnectionSetupFormValues) => { | ||
| await ConnectionsService.connectionsControllerCreateOrUpdateV1({ | ||
| type: type, | ||
| userIdentifier: data.userIdentifier, | ||
| isImporterEnabled: data.isImporterEnabled, | ||
| }); | ||
| }, | ||
| onSuccess: () => { | ||
| notifications.show({ | ||
| color: "green", | ||
| message: `Successfully set up ${getCapitalizedText(type)} connection!`, | ||
| }); | ||
| if (onClose) { | ||
| onClose(); | ||
| } | ||
| }, | ||
| onError: (err) => { | ||
| notifications.show({ | ||
| color: "red", | ||
| message: getErrorMessage(err), | ||
| }); | ||
| }, | ||
| onSettled: () => { | ||
| queryClient.resetQueries({ | ||
| queryKey: ["connections", "own"], | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const connectionDeleteMutation = useMutation({ | ||
| mutationFn: async () => { | ||
| if (userConnection.data == undefined) { | ||
| return; | ||
| } | ||
|
|
||
| return ConnectionsService.connectionsControllerDeleteV1( | ||
| userConnection.data.id, | ||
| ); | ||
| }, | ||
| onSuccess: () => { | ||
| notifications.show({ | ||
| color: "green", | ||
| message: `Successfully removed ${getCapitalizedText(type)} connection!`, | ||
| }); | ||
| if (onClose) { | ||
| onClose(); | ||
| } | ||
| }, | ||
| onSettled: () => { | ||
| queryClient.resetQueries({ | ||
| queryKey: ["connections"], | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const isImporterViable = useMemo(() => { | ||
| if (availableConnections.data != undefined) { | ||
| return availableConnections.data.some((connection) => { | ||
| return connection.type === type && connection.isImporterViable; | ||
| }); | ||
| } | ||
|
|
||
| return false; | ||
| }, [availableConnections.data, type]); | ||
|
|
||
| const identifierInfo = useMemo((): { | ||
| label: string; | ||
| description: string; | ||
| } => { | ||
| switch (type) { | ||
| case UserConnectionDto.type.STEAM: | ||
| return { | ||
| label: "Your public Steam profile URL", | ||
| description: | ||
| "e.g.: https://steamcommunity.com/id/your-username/", | ||
| }; | ||
| case UserConnectionDto.type.PSN: | ||
| return { | ||
| label: "Your PSN online id", | ||
| description: "Usually, it's your username.", | ||
| }; | ||
| } | ||
| }, [type]); | ||
|
|
||
| /** | ||
| * Effect to synchronize form state with user connection info. | ||
| */ | ||
| useEffect(() => { | ||
| if (userConnection.data) { | ||
| setValue( | ||
| "isImporterEnabled", | ||
| userConnection.data.isImporterEnabled, | ||
| ); | ||
| } | ||
| }, [setValue, userConnection.data]); | ||
|
|
||
| return ( | ||
| <form | ||
| className={"w-full h-full"} | ||
| onSubmit={handleSubmit((data) => { | ||
| connectionCreateMutation.mutate(data); | ||
| })} | ||
| > | ||
| <Stack className={"w-full h-full"}> | ||
| {connectionCreateMutation.error && ( | ||
| <CenteredErrorMessage | ||
| message={getErrorMessage( | ||
| connectionCreateMutation.error, | ||
| )} | ||
| /> | ||
| )} | ||
| {connectionDeleteMutation.error && ( | ||
| <CenteredErrorMessage | ||
| message={getErrorMessage( | ||
| connectionDeleteMutation.error, | ||
| )} | ||
| /> | ||
| )} | ||
| <TextInput | ||
| error={errors.userIdentifier?.message} | ||
| label={identifierInfo.label} | ||
| description={identifierInfo.description} | ||
| defaultValue={userConnection.data?.sourceUsername} | ||
| {...register("userIdentifier")} | ||
| /> | ||
| {isImporterViable && ( | ||
| <Stack> | ||
| <Switch | ||
| error={errors.isImporterEnabled?.message} | ||
| label={"Allow importing"} | ||
| labelPosition={"left"} | ||
| defaultChecked={ | ||
| userConnection.data | ||
| ? userConnection.data.isImporterEnabled | ||
| : true | ||
| } | ||
| description={ | ||
| "If this connection can be used by the Importer system to import games." | ||
| } | ||
| {...register("isImporterEnabled")} | ||
| /> | ||
| </Stack> | ||
| )} | ||
|
|
||
| <Button | ||
| type={"submit"} | ||
| loading={connectionCreateMutation.isPending} | ||
| > | ||
| Submit | ||
| </Button> | ||
| {userConnection.data != undefined && ( | ||
| <Button | ||
| color={"blue"} | ||
| type={"button"} | ||
| loading={connectionDeleteMutation.isPending} | ||
| onClick={() => { | ||
| connectionDeleteMutation.mutate(); | ||
| }} | ||
| > | ||
| Disconnect | ||
| </Button> | ||
| )} | ||
| </Stack> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default PreferencesConnectionSetup; |
Oops, something went wrong.