From 7a85b623af58a655eefdc5a7699ed0f224a8bf9e Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Wed, 14 Apr 2021 00:21:12 -0400
Subject: [PATCH] Add AuthProvider context story

---
 .../AuthProvider/AuthProvider.stories.mdx     | 131 +++++++++++++++++-
 1 file changed, 127 insertions(+), 4 deletions(-)

diff --git a/src/components/AuthProvider/AuthProvider.stories.mdx b/src/components/AuthProvider/AuthProvider.stories.mdx
index 601e907..7088dae 100644
--- a/src/components/AuthProvider/AuthProvider.stories.mdx
+++ b/src/components/AuthProvider/AuthProvider.stories.mdx
@@ -1,9 +1,132 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import AuthProvider from "./AuthProvider";
 
+<Meta 
+    title="Components/AuthProvider" 
+    component={AuthProvider}
+/>
 
-The AuthProvider component purpose is to give users access tokens on login and to refresh the tokens at set intervals of time. The users career account login information is used to determine if user can be authenticated.
-<Meta title="Components/AuthProvider" component={AuthProvider} />
+# Overview
 
-export const Template = (props) => <AuthProvider {...props} />
+A [context provider](https://reactjs.org/docs/context.html) exposing hooks to access and set login status and token data.
 
+## Basic Usage
+To use AuthProvider, wrap children elements inside it:
+```js
+import AuthProvider from "./AuthProvider";
 
+export default function App(){
+    return (
+        <AuthProvider>
+            <Child />
+        </AuthProvider>
+    );
+}
+```
+
+## Hooks
+| Name | Description | Type |
+| - | - | - |
+| `useLogin` | Indicates whether the client is logged in or not. | `boolean` |
+| `useLoginSetter` | A function to set the login value. | `function` |
+| `useToken` | The current access token. Will be `null` if there is no access token. | `String` |
+| `useLoginSetter` | A function to set the token value. | `function` |
+
+## Examples
+### Use Login Data
+```js
+// LoginMessage.js
+import { useLogin } from "./AuthProvider";
+
+export default function LoginMessage(){
+    const loggedIn = useLogin();
+    return <p>The user is {loggedIn ? "" : "not"} logged in.</p>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import LoginMessage from "./LoginMessage";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <LoginMessage />
+        </AuthProvider>
+    );
+}
+```
+
+### Set Login Data
+```js
+// LoginButton.js
+import { useLoginSetter } from "./AuthProvider";
+
+export default function Login(){
+    const setLogin = useLoginSetter();
+
+    return <button onClick={ _ => setLogin(true)}>Log In</button>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import LoginButton from "./LoginButton";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <LoginButton />
+        </AuthProvider>
+    );
+}
+```
+
+### Use Token Data
+```js
+// TokenMessage.js
+import { useToken } from "./AuthProvider";
+
+export default function TokenMessage(){
+    const token = useToken();
+    return <p>The user's token is {token ? token : "empty"}.</p>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import TokenMessage from "./TokenMessage";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <TokenMessage />
+        </AuthProvider>
+    );
+}
+```
+
+### Set Token Data
+```js
+// TokenMessage.js
+import { useTokenSetter } from "./AuthProvider";
+
+export default function SetTokenButton(){
+    const setToken = useTokenSetter();
+    const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
+    return <button onClick={ _ => setToken(token)}>Set Token</button>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import SetTokenButton from "./SetTokenButton";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <SetTokenButton />
+        </AuthProvider>
+    );
+}
+```
\ No newline at end of file