Skip to content

Commit

Permalink
Move to new GraphQL hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
@lemonmade
lemonmade committed Aug 27, 2024
1 parent ba62fe6 commit 62c4b14
Show file tree
Hide file tree
Showing 32 changed files with 621 additions and 587 deletions.
115 changes: 56 additions & 59 deletions app/features/Account/Account.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@ import {SpoilerAvoidance} from '~/shared/spoilers.ts';
import {Page} from '~/shared/page.ts';
import {useGithubOAuthModal, GithubOAuthFlow} from '~/shared/github.ts';
import {useGoogleOAuthModal, GoogleOAuthFlow} from '~/shared/google.ts';
import {useQuery, useMutation} from '~/shared/graphql.ts';
import {
useGraphQLQuery,
useGraphQLQueryRefetchOnMount,
useGraphQLQueryData,
useGraphQLMutation,
} from '~/shared/graphql.ts';
import {SignInWithAppleAction} from '~/shared/auth.ts';

import {SearchParam, PaymentStatus} from '~/global/subscriptions.ts';
Expand Down Expand Up @@ -59,11 +64,12 @@ const MEMBER_COST = {amount: 3, currency: 'CAD'};
const PATRON_COST = {amount: 5, currency: 'CAD'};

export default function Account() {
const {data, refetch, isLoading} = useQuery(accountQuery);
const query = useGraphQLQuery(accountQuery);
useGraphQLQueryRefetchOnMount(query);

usePerformanceNavigation({state: isLoading ? 'loading' : 'complete'});
const {me} = useGraphQLQueryData(query);

if (data == null) return null;
usePerformanceNavigation();

const {
email,
Expand All @@ -75,10 +81,10 @@ export default function Account() {
googleAccount,
settings,
passkeys,
} = data.me;
} = me;

const handleUpdate = async () => {
await refetch();
await query.rerun();
};

return (
Expand All @@ -96,13 +102,11 @@ export default function Account() {
<GoogleSection account={googleAccount} onUpdate={handleUpdate} />
<GithubSection
account={githubAccount ?? undefined}
onConnectionChange={() => {
refetch();
}}
onConnectionChange={() => query.rerun()}
/>
<SpoilerAvoidanceSection
spoilerAvoidance={settings.spoilerAvoidance}
refetch={refetch}
refetch={() => query.rerun()}
/>
</BlockStack>
</Page>
Expand All @@ -123,7 +127,7 @@ function AccountSection({
}) {
const navigate = useNavigate();
const currentUrl = useCurrentURL();
const signOut = useMutation(signOutMutation);
const signOut = useGraphQLMutation(signOutMutation);

const paymentStatus = currentUrl.searchParams.get(SearchParam.PaymentStatus);

Expand Down Expand Up @@ -168,12 +172,8 @@ function AccountSection({
<TextBlock>Email: {email}</TextBlock>
<Action
onPress={async () => {
signOut.mutateAsync(
{},
{
onSettled: () => navigate('/signed-out'),
},
);
await signOut.run();
navigate('/signed-out');
}}
>
Sign out
Expand Down Expand Up @@ -315,7 +315,7 @@ function DeleteAccountAction() {

function DeleteAccountModal() {
const navigate = useNavigate();
const deleteAccount = useMutation(deleteAccountMutation);
const deleteAccount = useGraphQLMutation(deleteAccountMutation);

return (
<Modal padding>
Expand All @@ -327,12 +327,8 @@ function DeleteAccountModal() {
<Action
role="destructive"
onPress={async () => {
await deleteAccount.mutateAsync(
{},
{
onSuccess: () => navigate('/goodbye'),
},
);
await deleteAccount.run();
navigate('/goodbye');
}}
>
Delete account
Expand All @@ -351,7 +347,7 @@ function CancelSubscriptionAction({onUpdate}: {onUpdate(): Promise<void>}) {
}

function CancelSubscriptionModal({onUpdate}: {onUpdate(): Promise<void>}) {
const cancelSubscription = useMutation(cancelSubscriptionMutation);
const cancelSubscription = useGraphQLMutation(cancelSubscriptionMutation);

return (
<Modal padding>
Expand All @@ -364,7 +360,7 @@ function CancelSubscriptionModal({onUpdate}: {onUpdate(): Promise<void>}) {
<Action
role="destructive"
onPress={async () => {
await cancelSubscription.mutateAsync({});
await cancelSubscription.run();
await onUpdate();
}}
>
Expand Down Expand Up @@ -446,14 +442,14 @@ function SubscribeAction({
level: PrepareSubscriptionMutationVariables['level'];
}>) {
const navigate = useNavigate();
const prepareSubscription = useMutation(prepareSubscriptionMutation);
const prepareSubscription = useGraphQLMutation(prepareSubscriptionMutation);

return (
<Action
to="../my/payment"
inlineSize="fill"
onPress={async () => {
await prepareSubscription.mutateAsync({
await prepareSubscription.run({
level,
});

Expand All @@ -467,13 +463,15 @@ function SubscribeAction({

function AccountGiftCodeModal({onUpdate}: {onUpdate(): Promise<void>}) {
const code = useSignal('');
const redeemAccountGiftCard = useMutation(redeemAccountGiftCardMutation);
const redeemAccountGiftCard = useGraphQLMutation(
redeemAccountGiftCardMutation,
);

return (
<Modal padding>
<Form
onSubmit={async () => {
await redeemAccountGiftCard.mutateAsync({
await redeemAccountGiftCard.run({
code: code.value,
});

Expand All @@ -497,8 +495,8 @@ function PasskeySection({
passkeys: AccountQueryData.Me['passkeys'];
onUpdate(): Promise<void>;
}) {
const startPasskeyCreate = useMutation(startPasskeyCreateMutation);
const finishPasskeyCreate = useMutation(finishPasskeyCreateMutation);
const startPasskeyCreate = useGraphQLMutation(startPasskeyCreateMutation);
const finishPasskeyCreate = useGraphQLMutation(finishPasskeyCreateMutation);

return (
<Section>
Expand All @@ -517,17 +515,22 @@ function PasskeySection({
onPress={async () => {
const [{startRegistration}, result] = await Promise.all([
import('@simplewebauthn/browser'),
startPasskeyCreate.mutateAsync({}),
startPasskeyCreate.run(),
]);

if (result.data == null) {
// TODO: handle error
return;
}

const registrationOptions = JSON.parse(
result.startPasskeyCreate.result,
result.data.startPasskeyCreate.result,
);

const registrationResult =
await startRegistration(registrationOptions);

await finishPasskeyCreate.mutateAsync({
await finishPasskeyCreate.run({
credential: JSON.stringify(registrationResult),
});

Expand Down Expand Up @@ -558,7 +561,7 @@ function Passkey(props: PasskeyProps) {
}

function PasskeyManageMenu({passkey: {id}, onUpdate}: PasskeyProps) {
const deletePasskey = useMutation(deletePasskeyMutation);
const deletePasskey = useGraphQLMutation(deletePasskeyMutation);

return (
<Popover>
Expand All @@ -567,7 +570,7 @@ function PasskeyManageMenu({passkey: {id}, onUpdate}: PasskeyProps) {
icon="delete"
role="destructive"
onPress={async () => {
await deletePasskey.mutateAsync({id});
await deletePasskey.run({id});
await onUpdate();
}}
>
Expand All @@ -586,8 +589,10 @@ function AppleSection({
onUpdate(): Promise<void>;
}) {
const currentUrl = useCurrentURL();
const connectAppleAccount = useMutation(connectAppleAccountMutation);
const disconnectAppleAccount = useMutation(disconnectAppleAccountMutation);
const connectAppleAccount = useGraphQLMutation(connectAppleAccountMutation);
const disconnectAppleAccount = useGraphQLMutation(
disconnectAppleAccountMutation,
);

return (
<Section>
Expand All @@ -597,7 +602,7 @@ function AppleSection({
{account ? (
<Action
onPress={async () => {
await disconnectAppleAccount.mutateAsync({});
await disconnectAppleAccount.run();
await onUpdate();
}}
>
Expand All @@ -609,7 +614,7 @@ function AppleSection({
new URL('/internal/auth/apple/connect/callback', currentUrl)
}
onPress={async ({idToken, authorizationCode}) => {
await connectAppleAccount.mutateAsync({
await connectAppleAccount.run({
idToken,
authorizationCode,
});
Expand All @@ -632,7 +637,7 @@ function GoogleSection({
account?: AccountQueryData.Me.GoogleAccount | null;
onUpdate(): Promise<void>;
}) {
const disconnectAccount = useMutation(disconnectGoogleAccountMutation);
const disconnectAccount = useGraphQLMutation(disconnectGoogleAccountMutation);

if (account == null) {
return <ConnectGoogleAccount onUpdate={onUpdate} />;
Expand All @@ -647,7 +652,7 @@ function GoogleSection({
<TextBlock>username: {email}</TextBlock>
<Action
onPress={async () => {
await disconnectAccount.mutateAsync({});
await disconnectAccount.run();
await onUpdate();
}}
>
Expand Down Expand Up @@ -702,7 +707,7 @@ function GithubSection({
account?: AccountQueryData.Me.GithubAccount;
onConnectionChange(): void;
}) {
const disconnectAccount = useMutation(disconnectGithubAccountMutation);
const disconnectAccount = useGraphQLMutation(disconnectGithubAccountMutation);

if (account == null) {
return <ConnectGithubAccount onConnectionChange={onConnectionChange} />;
Expand All @@ -719,13 +724,9 @@ function GithubSection({
Visit profile
</Action>
<Action
onPress={() => {
disconnectAccount.mutate(
{},
{
onSettled: () => onConnectionChange(),
},
);
onPress={async () => {
await disconnectAccount.run();
onConnectionChange();
}}
>
<Text>
Expand Down Expand Up @@ -789,7 +790,7 @@ function SpoilerAvoidanceSection({
spoilerAvoidance,
]);

const updateAccountSpoilerAvoidance = useMutation(
const updateAccountSpoilerAvoidance = useGraphQLMutation(
updateAccountSpoilerAvoidanceMutation,
);

Expand All @@ -799,14 +800,10 @@ function SpoilerAvoidanceSection({
<Heading divider>Settings</Heading>
<SpoilerAvoidance
value={spoilerAvoidanceSignal}
onChange={(spoilerAvoidance) => {
onChange={async (spoilerAvoidance) => {
spoilerAvoidanceSignal.value = spoilerAvoidance;
updateAccountSpoilerAvoidance.mutate(
{spoilerAvoidance},
{
onSettled: () => refetch(),
},
);
await updateAccountSpoilerAvoidance.run({spoilerAvoidance});
await refetch();
}}
/>
</BlockStack>
Expand Down
2 changes: 1 addition & 1 deletion app/features/Account/CheckYourEmail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {usePerformanceNavigation} from '@quilted/quilt/performance';
import {View, TextBlock} from '@lemon/zest';

export default function CheckYourEmail() {
usePerformanceNavigation({state: 'complete'});
usePerformanceNavigation();

return (
<View padding="base">
Expand Down
Loading

0 comments on commit 62c4b14

Please sign in to comment.