refactor: cleaner way of handling serverType change using MediaServer…

…Type instead of strings instead of using strings now it will use MediaServerType enums for serverType
fallenbagel · Mar 13, 2024 · 1aac3c5 · 1aac3c5
1 parent 1bc4bd3
commit 1aac3c5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 30 deletions.
diff --git a/overseerr-api.yml b/overseerr-api.yml
@@ -3574,7 +3574,7 @@ paths:
                 email:
                   type: string
                 serverType:
-                  type: string
+                  type: number
               required:
                 - username
                 - password

diff --git a/server/routes/auth.ts b/server/routes/auth.ts
@@ -1,6 +1,6 @@
 import JellyfinAPI from '@server/api/jellyfin';
 import PlexTvAPI from '@server/api/plextv';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
@@ -220,7 +220,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
     password?: string;
     hostname?: string;
     email?: string;
-    serverType?: string;
+    serverType?: number;
   };
 
   //Make sure jellyfin login is enabled, but only if jellyfin && Emby is not already configured
@@ -296,7 +296,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       // User doesn't exist, and there are no users in the database, we'll create the user
       // with admin permissions
       switch (body.serverType) {
-        case 'Emby':
+        case MediaServerType.EMBY:
           settings.main.mediaServerType = MediaServerType.EMBY;
           user = new User({
             email: body.email,
@@ -311,7 +311,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             userType: UserType.EMBY,
           });
           break;
-        case 'Jellyfin':
+        case MediaServerType.JELLYFIN:
           settings.main.mediaServerType = MediaServerType.JELLYFIN;
           user = new User({
             email: body.email,
@@ -342,12 +342,12 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       logger.info(
         `Found matching ${
           settings.main.mediaServerType === MediaServerType.JELLYFIN
-            ? 'Jellyfin'
-            : 'Emby'
+            ? ServerType.JELLYFIN
+            : ServerType.EMBY
         } user; updating user with ${
           settings.main.mediaServerType === MediaServerType.JELLYFIN
-            ? 'Jellyfin'
-            : 'Emby'
+            ? ServerType.JELLYFIN
+            : ServerType.EMBY
         }`,
         {
           label: 'API',

diff --git a/src/components/Login/JellyfinLogin.tsx b/src/components/Login/JellyfinLogin.tsx
@@ -41,15 +41,15 @@ const messages = defineMessages({
 interface JellyfinLoginProps {
   revalidate: () => void;
   initial?: boolean;
-  onToggle?: (option: string) => void;
-  serverType?: string;
+  serverType?: MediaServerType;
+  onServerTypeChange?: (type: MediaServerType) => void;
 }
 
 const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
   revalidate,
   initial,
-  onToggle,
   serverType,
+  onServerTypeChange,
 }) => {
   const toasts = useToasts();
   const intl = useIntl();
@@ -81,12 +81,13 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
 
     const mediaServerFormatValues = {
       mediaServerName:
-        serverType === ServerType.JELLYFIN
+        serverType === MediaServerType.JELLYFIN
           ? ServerType.JELLYFIN
-          : serverType === ServerType.EMBY
+          : serverType === MediaServerType.EMBY
           ? ServerType.EMBY
           : 'Media Server',
     };
+
     return (
       <Formik
         initialValues={{
@@ -148,18 +149,17 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                   <button
                     type="button"
                     className={`server-type-button jellyfin-server ${
-                      serverType === ServerType.JELLYFIN
+                      serverType === MediaServerType.JELLYFIN
                         ? 'bg-gradient-to-r from-[#AA5CC3] to-[#00A4DC]'
                         : ''
                     }`}
                     onClick={() => {
-                      if (onToggle) {
-                        onToggle(ServerType.JELLYFIN);
-                      }
+                      onServerTypeChange &&
+                        onServerTypeChange(MediaServerType.JELLYFIN);
                       setFieldValue('serverType', ServerType.JELLYFIN);
                     }}
                   >
-                    {serverType === ServerType.JELLYFIN ? (
+                    {serverType === MediaServerType.JELLYFIN ? (
                       <JellyfinLogoInverted />
                     ) : (
                       <JellyfinLogo />
@@ -168,16 +168,15 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                   <button
                     type="button"
                     className={`server-type-button emby-server ${
-                      serverType === ServerType.EMBY ? 'bg-[#51B44A]' : ''
+                      serverType === MediaServerType.EMBY ? 'bg-[#51B44A]' : ''
                     }`}
                     onClick={() => {
-                      if (onToggle) {
-                        onToggle(ServerType.EMBY);
-                      }
+                      onServerTypeChange &&
+                        onServerTypeChange(MediaServerType.EMBY);
                       setFieldValue('serverType', ServerType.EMBY);
                     }}
                   >
-                    {serverType === ServerType.EMBY ? (
+                    {serverType === MediaServerType.EMBY ? (
                       <EmbyLogoInverted />
                     ) : (
                       <EmbyLogo />

diff --git a/src/components/Setup/SetupLogin.tsx b/src/components/Setup/SetupLogin.tsx
@@ -26,12 +26,14 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
   );
   const { user, revalidate } = useUser();
   const intl = useIntl();
-  const [serverType, setserverType] = useState<string | undefined>(undefined);
+  const [serverType, setserverType] = useState<MediaServerType | undefined>(
+    undefined
+  );
 
   // Function to handle toggle changes
-  const handleToggle = (option: string) => {
+  const handleServerTypeChange = (type: MediaServerType) => {
     // Toggle between 'emby' and 'jellyfin'
-    setserverType(option);
+    setserverType(type);
   };
 
   // Effect that is triggered when the `authToken` comes back from the Plex OAuth
@@ -102,8 +104,11 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
               >
                 {intl.formatMessage(messages.signinWithJellyfin, {
                   mediaServerName:
-                    serverType ??
-                    `${ServerType.JELLYFIN} or ${ServerType.EMBY}`,
+                    serverType === MediaServerType.JELLYFIN
+                      ? ServerType.JELLYFIN
+                      : serverType === MediaServerType.EMBY
+                      ? ServerType.EMBY
+                      : `${ServerType.JELLYFIN} or ${ServerType.EMBY}`,
                 })}
               </button>
               <AccordionContent isOpen={openIndexes.includes(1)}>
@@ -115,7 +120,7 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
                     initial={true}
                     revalidate={revalidate}
                     serverType={serverType}
-                    onToggle={handleToggle}
+                    onServerTypeChange={handleServerTypeChange}
                   />
                 </div>
               </AccordionContent>