Merge pull request #5 from sct/feature/ch57

Plex Login Component

src/components/PlexLoginButton/index.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PlexOAuth from '../../utils/plex';
+
+const plexOAuth = new PlexOAuth();
+
+interface PlexLoginButtonProps {
+  onAuthToken: (authToken: string) => void;
+  onError?: (message: string) => void;
+}
+
+const PlexLoginButton: React.FC<PlexLoginButtonProps> = ({
+  onAuthToken,
+  onError,
+}) => {
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const getPlexLogin = async () => {
+    setLoading(true);
+    try {
+      const authToken = await plexOAuth.login();
+      onAuthToken(authToken);
+      setLoading(false);
+    } catch (e) {
+      if (onError) {
+        onError(e.message);
+      }
+      setLoading(false);
+    }
+  };
+  return (
+    <span className="inline-flex rounded-md shadow-sm">
+      <button
+        type="button"
+        onClick={() => getPlexLogin()}
+        disabled={loading}
+        className="plex-button"
+      >
+        {loading ? 'Loading...' : 'Login with Plex'}
+      </button>
+    </span>
+  );
+};
+
+export default PlexLoginButton;

src/pages/plextest.tsx

@@ -1,36 +1,12 @@
 import React, { useState } from 'react';
 import { NextPage } from 'next';
-import PlexOAuth from '../utils/plex';
-
-const plexOAuth = new PlexOAuth();
+import PlexLoginButton from '../components/PlexLoginButton';
 
 const PlexText: NextPage = () => {
-  const [loading, setLoading] = useState<boolean>(false);
   const [authToken, setAuthToken] = useState<string>('');
-
-  const getPlexLogin = async () => {
-    setLoading(true);
-    try {
-      const authToken = await plexOAuth.login();
-      setAuthToken(authToken);
-      setLoading(false);
-    } catch (e) {
-      console.log(e.message);
-      setLoading(false);
-    }
-  };
   return (
     <div>
-      <span className="inline-flex rounded-md shadow-sm">
-        <button
-          type="button"
-          onClick={() => getPlexLogin()}
-          disabled={loading}
-          className="inline-flex items-center px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
-        >
-          {loading ? 'Loading...' : 'Plex Login'}
-        </button>
-      </span>
+      <PlexLoginButton onAuthToken={(authToken) => setAuthToken(authToken)} />
       <div className="mt-4">Auth Token: {authToken}</div>
     </div>
   );

src/styles/globals.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.plex-button {
+  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 transition ease-in-out duration-150;
+  background-color: #cc7b19;
+}