refactoring

README.md

@@ -72,5 +72,5 @@ server {
 
 ## TODO
 
--   [ ] externalize albums/songs list components
+-   [ ] groups similar pages/components
 -   [ ] create "cache" for each section for data ?

app/new-releases/page.tsx

@@ -1,67 +1,5 @@
-'use client'
-import useAPI from '@/lib/useAPI'
-import useAuth from '@/lib/useAuth'
-import Loading from '@/src/components/Components/Loading/Loading'
-import AlbumsGridSection from '@/src/components/LayoutComponents/AlbumsGridSection/AlbumsGridSection'
-import PageNavigation from '@/src/components/Pages/PageNavigation/PageNavigation'
-import { Album } from '@/types/Items'
-import moment from 'moment'
-import { useEffect, useState } from 'react'
+import NewReleasesGridPage from '@/src/components/Pages/User/NewReleasesGridPage'
 
 export default function Home() {
-	// Hooks
-	// const { logged } = useMusicKitContext()
-
-	// Auth hook
-	const { user, isLoading, hasTestToken } = useAuth({ middleware: 'auth' }) // todo : redirect to previous page after login
-	const [ready, setReady] = useState<boolean>(false)
-	const [newReleases, setNewReleases] = useState<Album[]>([])
-
-	// API hook
-	const api = useAPI()
-
-	// API calls
-	const from = moment().subtract(7, 'days').format('YYYY-MM-DD')
-
-	const loadNewSingles = async () => {
-		const res = await api.getNewReleases(from)
-		setNewReleases(res.data.data)
-	}
-	const loadData = () => {
-		if (!ready) return
-		loadNewSingles()
-	}
-
-	useEffect(() => {
-		if (!isLoading && (user || hasTestToken)) {
-			setReady(true)
-		}
-	}, [isLoading, user, hasTestToken])
-
-	useEffect(() => {
-		// if (ready) {
-		loadData()
-		// }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ready])
-
-	if (isLoading || !(user || hasTestToken)) {
-		return <Loading subText="Loading new releases page" />
-	}
-
-	return (
-		<PageNavigation title={'New Releases'} goBack={true} largeTitle={true}>
-			<AlbumsGridSection
-				id={'newReleases'}
-				title={''}
-				// title={'New Releases'}
-				key={'newReleases'}
-				items={newReleases}
-				scroll={false}
-				mobileScroll={false}
-				// rows={2}
-				// seeAll={() => console.log('see all 1')}
-			/>
-		</PageNavigation>
-	)
+	return <NewReleasesGridPage />
 }

app/new-singles/page.tsx

@@ -1,67 +1,5 @@
-'use client'
-import useAPI from '@/lib/useAPI'
-import useAuth from '@/lib/useAuth'
-import Loading from '@/src/components/Components/Loading/Loading'
-import AlbumsGridSection from '@/src/components/LayoutComponents/AlbumsGridSection/AlbumsGridSection'
-import PageNavigation from '@/src/components/Pages/PageNavigation/PageNavigation'
-import { Album } from '@/types/Items'
-import moment from 'moment'
-import { useEffect, useState } from 'react'
+import NewSinglesGridPage from '@/src/components/Pages/User/NewSinglesGridPage'
 
 export default function Home() {
-	// Hooks
-	// const { logged } = useMusicKitContext()
-
-	// Auth hook
-	const { user, isLoading, hasTestToken } = useAuth({ middleware: 'auth' }) // todo : redirect to previous page after login
-	const [ready, setReady] = useState<boolean>(false)
-	const [newSingles, setNewSingles] = useState<Album[]>([])
-
-	// API hook
-	const api = useAPI()
-
-	// API calls
-	const from = moment().subtract(7, 'days').format('YYYY-MM-DD')
-
-	const loadNewSingles = async () => {
-		const res = await api.getNewSingles(from)
-		setNewSingles(res.data.data)
-	}
-	const loadData = () => {
-		if (!ready) return
-		loadNewSingles()
-	}
-
-	useEffect(() => {
-		if (!isLoading && (user || hasTestToken)) {
-			setReady(true)
-		}
-	}, [isLoading, user, hasTestToken])
-
-	useEffect(() => {
-		// if (ready) {
-		loadData()
-		// }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ready])
-
-	if (isLoading || !(user || hasTestToken)) {
-		return <Loading subText="Loading new singles page" />
-	}
-
-	return (
-		<PageNavigation title={'New Singles'} goBack={true} largeTitle={true}>
-			<AlbumsGridSection
-				id={'newSingles'}
-				// title={'New Singles'}
-				title={''}
-				key={'newSingles'}
-				items={newSingles}
-				scroll={false}
-				mobileScroll={false}
-				// rows={2}
-				// seeAll={() => console.log('see all 1')}
-			/>
-		</PageNavigation>
-	)
+	return <NewSinglesGridPage />
 }

app/new-songs/page.tsx

@@ -1,66 +1,5 @@
-'use client'
-import useAPI from '@/lib/useAPI'
-import useAuth from '@/lib/useAuth'
-import Loading from '@/src/components/Components/Loading/Loading'
-import SongsListSection from '@/src/components/LayoutComponents/SongsListSection/SongsListSection'
-import PageNavigation from '@/src/components/Pages/PageNavigation/PageNavigation'
-import { Song } from '@/types/Items'
-import moment from 'moment'
-import { useEffect, useState } from 'react'
+import NewSongsListPage from '@/src/components/Pages/User/NewSongsListPage'
 
 export default function Home() {
-	// Hooks
-	// const { logged } = useMusicKitContext()
-
-	// Auth hook
-	const { user, isLoading, hasTestToken } = useAuth({ middleware: 'auth' }) // todo : redirect to previous page after login
-	const [ready, setReady] = useState<boolean>(false)
-	const [newSongs, setNewSongs] = useState<Song[]>([])
-
-	// API hook
-	const api = useAPI()
-
-	// API calls
-	const from = moment().subtract(7, 'days').format('YYYY-MM-DD')
-
-	const loadNewSongs = async () => {
-		const res = await api.getNewSongs(from)
-		setNewSongs(res.data.data)
-	}
-	const loadData = () => {
-		if (!ready) return
-		loadNewSongs()
-	}
-
-	useEffect(() => {
-		if (!isLoading && (user || hasTestToken)) {
-			setReady(true)
-		}
-	}, [isLoading, user, hasTestToken])
-
-	useEffect(() => {
-		// if (ready) {
-		loadData()
-		// }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ready])
-
-	if (isLoading || !(user || hasTestToken)) {
-		return <Loading subText="Loading new songs page" />
-	}
-
-	return (
-		<PageNavigation title={'New Songs'} goBack={true} largeTitle={true}>
-			<SongsListSection
-				id={'newSongs'}
-				// title={'New Songs'}
-				title={''}
-				key={'newSongs'}
-				items={newSongs}
-				scroll={false}
-				// rows={2}
-				// seeAll={() => console.log('see all 1')}
-			/>
-		</PageNavigation>
-	)
+	return <NewSongsListPage />
 }

app/page.tsx

@@ -1,4 +1,4 @@
-import ReleasesPage from '@/src/components/Pages/User/ReleasesPages'
+import ReleasesPage from '@/src/components/Pages/User/ReleasesPage'
 
 export default function Home() {
 	return <ReleasesPage />

app/upcoming-releases/page.tsx

@@ -0,0 +1,5 @@
+import UpcomingReleasesGridPage from '@/src/components/Pages/User/UpcomingReleasesGridPage'
+
+export default function Home() {
+	return <UpcomingReleasesGridPage />
+}

app/upcoming-songs/page.tsx

@@ -0,0 +1,5 @@
+import UpcomingSongsListPage from '@/src/components/Pages/User/UpcomingSongsListPage'
+
+export default function Home() {
+	return <UpcomingSongsListPage />
+}

lib/useAPI.ts

@@ -105,7 +105,7 @@ export default function useAPI() {
 			},
 		})
 	}
-	const getUpcoming = (from: string) => {
+	const getUpcomingReleases = (from: string) => {
 		return get(`/api/user/releases`, {
 			params: {
 				...timestamps(),
@@ -171,7 +171,7 @@ export default function useAPI() {
 		//
 		getNewReleases,
 		getNewSingles,
-		getUpcoming,
+		getUpcomingReleases,
 		getNewSongs,
 		getUpcomingSongs,
 		addResourceToLibrary,

src/components/LayoutComponents/AlbumsSection/AlbumsGridSection.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import AlbumsSection, { AlbumsSectionProps } from './AlbumsSection'
+
+export interface AlbumsGridSectionProps extends AlbumsSectionProps {}
+
+const AlbumsGridSection = ({ ...props }: AlbumsGridSectionProps) => (
+	<AlbumsSection {...props} grid />
+)
+
+export default AlbumsGridSection

src/components/LayoutComponents/AlbumsGridSection/AlbumsGridSection.tsx → src/components/LayoutComponents/AlbumsSection/AlbumsSection.tsx

@@ -6,26 +6,35 @@ import AlbumsCollectionView, {
 import { Album, SectionCollectionProps } from '@/types/Items'
 import Loading from '../../Components/Loading/Loading'
 
-interface AlbumsGridSectionProps
+export interface AlbumsSectionProps
 	extends SectionProps,
 		AlbumCollectionViewProps,
 		SectionCollectionProps {
 	// key: string
 	items: Album[]
+
+	grid?: boolean
 }
 
-const AlbumsGridSection = ({
+const AlbumsSection = ({
 	id,
 	title,
 	seeAll,
 	seeAllPath,
+	grid = false,
 	loading = false,
 	...props
-}: AlbumsGridSectionProps) => {
+}: AlbumsSectionProps) => {
 	if (!loading && !props.items.length) {
 		return null
 	}
 
+	const collectionViewProps = () => {
+		if (!grid) return { ...props }
+
+		return { ...props, grid: grid, mobileScroll: false }
+	}
+
 	return (
 		<>
 			<Section
@@ -40,12 +49,11 @@ const AlbumsGridSection = ({
 						<Loading subText={`${title} loading...`} />
 					</div>
 				) : (
-					<AlbumsCollectionView id={id} {...props} />
+					<AlbumsCollectionView id={id} {...collectionViewProps()} />
 				)}
 			</Section>
 		</>
 	)
 }
 
-export default AlbumsGridSection
-export type { AlbumsGridSectionProps }
+export default AlbumsSection