feat: force setup if app is not initialized

src/components/Discover/index.tsx

@@ -44,7 +44,7 @@ const Discover: React.FC = () => {
   );
 
   const { data: media, error: mediaError } = useSWR<MediaResultsResponse>(
-    '/api/v1/media?filter=available&take=20'
+    '/api/v1/media?filter=available&take=20&sort=modified'
   );
 
   const { data: requests, error: requestError } = useSWR<MediaRequest[]>(

src/components/Setup/index.tsx

@@ -6,12 +6,33 @@ import SettingsPlex from '../Settings/SettingsPlex';
 import SettingsServices from '../Settings/SettingsServices';
 import LoginWithPlex from './LoginWithPlex';
 import SetupSteps from './SetupSteps';
+import axios from 'axios';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  finish: 'Finish Setup',
+  finishing: 'Finishing...',
+  continue: 'Continue',
+});
 
 const Setup: React.FC = () => {
+  const [isUpdating, setIsUpdating] = useState(false);
   const [currentStep, setCurrentStep] = useState(1);
   const [plexSettingsComplete, setPlexSettingsComplete] = useState(false);
   const router = useRouter();
 
+  const finishSetup = async () => {
+    setIsUpdating(false);
+    const response = await axios.get<{ initialized: boolean }>(
+      '/api/v1/settings/initialize'
+    );
+
+    setIsUpdating(false);
+    if (response.data.initialized) {
+      router.push('/');
+    }
+  };
+
   return (
     <div className="min-h-screen bg-cool-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
       <ImageFader
@@ -68,7 +89,7 @@ const Setup: React.FC = () => {
                       disabled={!plexSettingsComplete}
                       onClick={() => setCurrentStep(3)}
                     >
-                      Continue
+                      <FormattedMessage {...messages.continue} />
                     </Button>
                   </span>
                 </div>
@@ -83,9 +104,14 @@ const Setup: React.FC = () => {
                   <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
-                      onClick={() => router.push('/')}
+                      onClick={() => finishSetup()}
+                      disabled={isUpdating}
                     >
-                      Finish Setup
+                      {isUpdating ? (
+                        <FormattedMessage {...messages.finishing} />
+                      ) : (
+                        <FormattedMessage {...messages.finish} />
+                      )}
                     </Button>
                   </span>
                 </div>

src/pages/_app.tsx

@@ -96,29 +96,47 @@ CoreApp.getInitialProps = async (initialProps) => {
   let locale = 'en';
 
   if (ctx.res) {
-    try {
-      // Attempt to get the user by running a request to the local api
-      const response = await axios.get<User>(
-        `http://localhost:${process.env.PORT || 3000}/api/v1/auth/me`,
-        { headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined }
-      );
-      user = response.data;
+    // Check if app is initialized and redirect if necessary
+    let initialized = true;
 
-      if (router.pathname.match(/login/)) {
+    const response = await axios.get<{ initialized: boolean }>(
+      `http://localhost:${process.env.PORT || 3000}/api/v1/settings/public`
+    );
+
+    initialized = response.data.initialized;
+
+    if (!initialized) {
+      if (!router.pathname.match(/(setup|login\/plex)/)) {
         ctx.res.writeHead(307, {
-          Location: '/',
+          Location: '/setup',
         });
         ctx.res.end();
       }
-    } catch (e) {
-      // If there is no user, and ctx.res is set (to check if we are on the server side)
-      // _AND_ we are not already on the login or setup route, redirect to /login with a 307
-      // before anything actually renders
-      if (!router.pathname.match(/(login|setup)/)) {
-        ctx.res.writeHead(307, {
-          Location: '/login',
-        });
-        ctx.res.end();
+    } else {
+      try {
+        // Attempt to get the user by running a request to the local api
+        const response = await axios.get<User>(
+          `http://localhost:${process.env.PORT || 3000}/api/v1/auth/me`,
+          { headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined }
+        );
+        user = response.data;
+
+        if (router.pathname.match(/login/)) {
+          ctx.res.writeHead(307, {
+            Location: '/',
+          });
+          ctx.res.end();
+        }
+      } catch (e) {
+        // If there is no user, and ctx.res is set (to check if we are on the server side)
+        // _AND_ we are not already on the login or setup route, redirect to /login with a 307
+        // before anything actually renders
+        if (!router.pathname.match(/(login|setup)/)) {
+          ctx.res.writeHead(307, {
+            Location: '/login',
+          });
+          ctx.res.end();
+        }
       }
     }