Merge branch 'next' into apple-music

Author: stijnvdkolk

next.config.js

@@ -52,6 +52,11 @@ module.exports = withBundleAnalyzer({
         destination: '/settings/profile',
         permanent: false,
       },
+      {
+        source: '/import',
+        destination: '/settings/imports',
+        permanent: true,
+      },
       {
         source: '/discord',
         destination: 'https://stats.fm/discord',
@@ -108,15 +113,23 @@ module.exports = withBundleAnalyzer({
       },
       {
         source: '/:id/listeningClocks',
-        destination: '/user/:id/listeningClocks',
+        destination: '/user/:id/listening-clocks',
+      },
+      {
+        source: '/:id/listening-clocks',
+        destination: '/user/:id/listening-locks',
       },
       {
         source: '/:id/genres',
         destination: '/user/:id/genres',
       },
       {
         source: '/:id/recentStreams',
-        destination: '/user/:id/recentStreams',
+        destination: '/user/:id/recent-streams',
+      },
+      {
+        source: '/:id/recent-streams',
+        destination: '/user/:id/recent-streams',
       },
     ];
   },

src/components/settings/Nav.tsx

@@ -55,14 +55,7 @@ const NavBody: FC = () => (
       </NavGroup>
 
       <NavGroup title="Stats">
-        <SideNavItem external href="/import">
-          Import
-        </SideNavItem>
-        {/* <SideNavItem disabled href="/settings/algorithms">
-          Algorithms
-        </SideNavItem> */}
-        {/* <SideNavItem href="/account/algorithms">Stats & Algorithms</SideNavItem> */}
-        {/* <SideNavItem href="/account/lang">Language & Theme</SideNavItem> */}
+        <SideNavItem href="/settings/imports">Import</SideNavItem>
       </NavGroup>
     </aside>
   </nav>

src/hooks/use-api.ts

@@ -1,7 +1,7 @@
 import * as statsfm from '@/utils/statsfm';
 import Cookies from 'js-cookie';
 
-let apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'https://beta-api.stats.fm/api';
+let apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'https://api.stats.fm/api';
 
 if (process.env.NODE_ENV === 'development')
   apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'https://beta-api.stats.fm/api';

src/middleware.ts

@@ -28,5 +28,5 @@ export const middleware = (request: NextRequest) => {
 };
 
 export const config = {
-  matcher: ['/import', '/settings/:path*'],
+  matcher: ['/settings/:path*'],
 };

src/pages/import.tsx src/pages/settings/imports.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 /* eslint-disable no-continue */
-import { Container } from '@/components/Container';
 import { Divider } from '@/components/Divider';
 import { ImportList } from '@/components/Import/ImportList';
 import { UploadedItem } from '@/components/Import/UploadedItem';
@@ -23,8 +22,7 @@ import { MdFileUpload, MdWarning } from 'react-icons/md';
 import { BlobReader, TextWriter, ZipReader } from '@zip.js/zip.js';
 import { Button } from '@/components/Button';
 import { Platform } from '@/utils/statsfm';
-
-type Props = {};
+import { AccountLayout } from '@/components/settings/Layout';
 
 export const getServerSideProps: GetServerSideProps<SSRProps> = async (ctx) => {
   const user = await fetchUser(ctx);
@@ -44,7 +42,7 @@ interface ImportService {
   handleFileUpload: (file: File[]) => Promise<void> | void;
 }
 
-const ImportPage: NextPage<Props> = () => {
+const Imports = () => {
   const { user } = useAuth();
   const api = useApi();
   const toaster = useToaster();
@@ -226,8 +224,8 @@ const ImportPage: NextPage<Props> = () => {
   if (!user) return <></>;
 
   return (
-    <Container className="pt-20">
-      <Title>Import</Title>
+    <div className="relative w-full">
+      <Title>Imports</Title>
       {importWarning?.asBoolean() && (
         <div className="my-8 w-full flex-row rounded-md border-l-4 border-l-yellow-400/80 bg-yellow-400/20 p-4">
           <div className="flex w-full flex-col">
@@ -250,7 +248,7 @@ const ImportPage: NextPage<Props> = () => {
           target="blank"
           onClick={() => event('IMPORT_guide_click')}
         >
-          here in the support docs
+          in the support documentation.
         </a>
         .
       </p>
@@ -259,17 +257,19 @@ const ImportPage: NextPage<Props> = () => {
           {importAvailable?.asBoolean() ? (
             <>
               <div className="mt-5 flex flex-col items-center justify-center">
-                <SegmentedControls
-                  onChange={(id) => {
-                    setImportService(services.find((x) => x.id === id)!);
-                  }}
-                >
-                  {services.map((service) => (
-                    <Segment key={service.id} value={service.id}>
-                      {service.name}
-                    </Segment>
-                  ))}
-                </SegmentedControls>
+                {services.length > 1 && (
+                  <SegmentedControls
+                    onChange={(id) => {
+                      setImportService(services.find((x) => x.id === id)!);
+                    }}
+                  >
+                    {services.map((service) => (
+                      <Segment key={service.id} value={service.id}>
+                        {service.name}
+                      </Segment>
+                    ))}
+                  </SegmentedControls>
+                )}
                 <div className="mt-2 flex w-full items-center justify-center">
                   <Dropzone
                     onDrop={(files) => importService.handleFileUpload(files)}
@@ -302,7 +302,9 @@ const ImportPage: NextPage<Props> = () => {
                               {Object.values(importService.acceptFiles)
                                 .flatMap((x) => x)
                                 .join(', ')}{' '}
-                              for this service.
+                              for{' '}
+                              {services.length > 1 ? 'this service' : 'Spotify'}
+                              .
                             </p>
                             <input {...getInputProps()} />
                           </>
@@ -372,7 +374,17 @@ const ImportPage: NextPage<Props> = () => {
           you need stats.fm Plus.
         </h4>
       )}
-    </Container>
+    </div>
+  );
+};
+
+const ImportPage: NextPage = () => {
+  const { user } = useAuth();
+  if (!user) return null;
+  return (
+    <AccountLayout>
+      <Imports />
+    </AccountLayout>
   );
 };
 

src/pages/user/[id]/[[...deeplink]].tsx

@@ -66,8 +66,8 @@ function activeScrollIntoViewFromDeepLink(
     id !== 'tracks' &&
     id !== 'albums' &&
     id !== 'artists' &&
-    id !== 'listeningClocks' &&
-    id !== 'recentStreams'
+    id !== 'listening-clocks' &&
+    id !== 'recent-streams'
   )
     return null;
 
@@ -110,7 +110,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
   const oembedUrl = encodeURIComponent(`https://stats.fm${ctx.resolvedUrl}`);
   ctx.res.setHeader(
     'Link',
-    `<https://beta-api.stats.fm/api/v1/oembed?url=${oembedUrl}&format=json>; rel="alternate"; type="application/json+oembed"; title=""`
+    `<https://api.stats.fm/api/v1/oembed?url=${oembedUrl}&format=json>; rel="alternate"; type="application/json+oembed"; title=""`
   );
 
   return {
@@ -286,8 +286,8 @@ const User: NextPage<Props> = ({
       albums: topAlbumsRef,
       artists: topArtistsRef,
       genres: topGenresRef,
-      listeningClocks: listeningClocksRef,
-      recentStreams: recentStreamsRef,
+      'listening-clocks': listeningClocksRef,
+      'recent-streams': recentStreamsRef,
     };
 
     if (scrollIntoView) refs[scrollIntoView].current?.scrollIntoView();

src/utils/index.ts

@@ -8,5 +8,5 @@ export type UserScrollIntoView =
   | 'tracks'
   | 'albums'
   | 'artists'
-  | 'listeningClocks'
-  | 'recentStreams';
+  | 'listening-clocks'
+  | 'recent-streams';

src/utils/ssrUtils.ts

@@ -11,8 +11,7 @@ export const getApiInstance = (accessToken?: string) => {
       accessToken,
     },
     http: {
-      apiUrl:
-        process.env.NEXT_PUBLIC_API_URL ?? 'https://beta-api.stats.fm/api',
+      apiUrl: process.env.NEXT_PUBLIC_API_URL ?? 'https://api.stats.fm/api',
     },
   });
 };