-
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.
chore(gatsby-oauth): storybook integration
- Loading branch information
1 parent
fea4b3c
commit 0bab335
Showing
15 changed files
with
359 additions
and
102 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 was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { UserProfile } from '@custom/ui/routes/UserProfile'; | ||
| import { useSession } from 'next-auth/react'; | ||
| import React, { useEffect, useState } from 'react'; | ||
|
|
||
| export async function getCurrentUser(accessToken: string): Promise<any> { | ||
| const host = process.env.GATSBY_DRUPAL_URL || 'http://127.0.0.1:8888'; | ||
| const endpoint = `${host}/graphql`; | ||
| const headers = { | ||
| 'Content-Type': 'application/json', | ||
| Authorization: `Bearer ${accessToken}`, | ||
| }; | ||
| const graphqlQuery = { | ||
| query: ` | ||
| query CurrentUser { | ||
| currentUser { | ||
| id | ||
| name | ||
| memberFor | ||
| } | ||
| } | ||
| `, | ||
| variables: {}, | ||
| }; | ||
| const options = { | ||
| method: 'POST', | ||
| headers, | ||
| body: JSON.stringify(graphqlQuery), | ||
| }; | ||
| return await fetch(endpoint, options); | ||
| } | ||
|
|
||
| export default function ProfilePage() { | ||
| const session = useSession(); | ||
| const [user, setUser] = useState(null); | ||
| const [error, setError] = useState(null); | ||
| useEffect(() => { | ||
| if (session && session.status === 'authenticated') { | ||
| // @ts-ignore | ||
| const accessToken = session.data.user.tokens.access_token; | ||
| getCurrentUser(accessToken) | ||
| .then((response) => response.json()) | ||
| .then((result) => { | ||
| setUser(result.data.currentUser); | ||
| return result; | ||
| }) | ||
| .catch((error) => setError(error)); | ||
| } | ||
| }, [session]); | ||
| return <UserProfile user={user} error={error} />; | ||
| } |
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
11 changes: 11 additions & 0 deletions
11
packages/ui/src/components/Molecules/UserButton.stories.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,11 @@ | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { UserButton } from './UserButton'; | ||
|
|
||
| export default { | ||
| component: UserButton, | ||
| } satisfies Meta<typeof UserButton>; | ||
|
|
||
| // @todo add signed in and signed out states. | ||
| // @todo fix next-auth errors | ||
| export const UserButtonStory = {} satisfies StoryObj<typeof UserButton>; |
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,55 @@ | ||
| import { Link } from '@custom/schema'; | ||
| import { signIn, signOut, useSession } from 'next-auth/react'; | ||
| import React from 'react'; | ||
| import { useIntl } from 'react-intl'; | ||
|
|
||
| export function UserButton() { | ||
| const session = useSession(); | ||
| const intl = useIntl(); | ||
| const hostWithScheme = `${location.protocol}//${location.host}`; | ||
| return ( | ||
| <> | ||
| {!session && <></>} | ||
| {session?.status !== 'authenticated' && ( | ||
| <Link | ||
| href={new URL(`${hostWithScheme}/api/auth/signin`)} | ||
| className="text-gray-500 underline" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| signIn(); | ||
| }} | ||
| > | ||
| {intl.formatMessage({ | ||
| defaultMessage: 'Sign in', | ||
| id: 'SQJto2', | ||
| })} | ||
| </Link> | ||
| )} | ||
| {session?.status === 'authenticated' && session.data.user && ( | ||
| <> | ||
| <Link | ||
| href={new URL(`${hostWithScheme}/${intl.locale}/profile`)} | ||
| className="text-gray-700 mr-2" | ||
| > | ||
| {session.data.user.name | ||
| ? session.data.user.name | ||
| : session.data.user.email} | ||
| </Link> | ||
| <Link | ||
| href={new URL(`${hostWithScheme}/api/auth/signout`)} | ||
| className="text-gray-500" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| signOut(); | ||
| }} | ||
| > | ||
| {intl.formatMessage({ | ||
| defaultMessage: 'Sign out', | ||
| id: 'xXbJso', | ||
| })} | ||
| </Link> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.