new releases/singles sections

lib/useAPI.ts

@@ -95,13 +95,15 @@ export default function useAPI() {
 	/* region API */
 	const getNewReleases = (
 		from: string,
+		params: object = {},
 		config?: AxiosRequestConfig<any> | undefined
 	) => {
 		return get(`/api/user/releases`, {
 			...config,
 			params: {
 				...defaultParams(),
 				from: from,
+				...params,
 				sort: '-releaseDate',
 				// weekly: 1,
 				// weeks: 1,
@@ -113,13 +115,15 @@ export default function useAPI() {
 	}
 	const getNewSingles = (
 		from: string,
+		params: object = {},
 		config?: AxiosRequestConfig<any> | undefined
 	) => {
 		return get(`/api/user/releases`, {
 			...config,
 			params: {
 				...defaultParams(),
 				from: from,
+				...params,
 				sort: '-releaseDate',
 				hide_albums: 1,
 				hide_eps: 1,

src/components/PageComponents/NewReleases/NewReleasesSection.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Album } from '@/types/Items'
-import { getFrom } from '@/src/helpers/releases'
+import { getFromViaWeeks, getToViaWeeks } from '@/src/helpers/releases'
 import useAPI from '@/lib/useAPI'
 import AlbumsSection from '../../LayoutComponents/AlbumsSection/AlbumsSection'
 
@@ -14,15 +14,35 @@ export interface NewReleasesSectionProps {
 
 	newNav?: boolean
 	full?: boolean
+
+	weeks?: number
 }
 
 function NewReleasesSection({
 	data = [] as Album[],
 	grid = false,
+	weeks = 0,
+	title,
 	...props
 }: NewReleasesSectionProps) {
 	const api = useAPI()
-	const from = getFrom()
+	// const from = getFrom()
+	const from = getFromViaWeeks(weeks)
+	const params = useMemo(
+		() =>
+			weeks
+				? {
+						// 	weekly: 1,
+						// 	weeks: weeks * -1,
+						weekly: 0,
+						to: getToViaWeeks(weeks),
+					}
+				: {},
+		[weeks]
+	)
+	if (!title && weeks) {
+		title = getFromViaWeeks(weeks, 'll')
+	}
 
 	const hasData = Boolean(data.length)
 
@@ -35,7 +55,9 @@ function NewReleasesSection({
 		async (signal?: AbortSignal) => {
 			try {
 				if (!hasData && !newReleasesLoaded && !newReleasesLoading) {
-					const res = await api.getNewReleases(from, { signal })
+					const res = await api.getNewReleases(from, params, {
+						signal,
+					})
 					setNewReleases(res.data.data)
 					setNewReleasesLoading(true)
 				}
@@ -46,7 +68,7 @@ function NewReleasesSection({
 				setNewReleasesLoading(false)
 			}
 		},
-		[api, from, hasData, newReleasesLoaded, newReleasesLoading]
+		[api, from, params, hasData, newReleasesLoaded, newReleasesLoading]
 	)
 
 	useEffect(() => {
@@ -84,7 +106,7 @@ function NewReleasesSection({
 	return (
 		<AlbumsSection
 			id={props.id || 'newReleases'}
-			title={props.title}
+			title={title}
 			key={props.id || 'newReleases'}
 			items={newReleases}
 			scroll={false}

src/components/PageComponents/NewSingles/NewSinglesSection.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Album } from '@/types/Items'
-import { getFrom } from '@/src/helpers/releases'
+import { getFromViaWeeks, getToViaWeeks } from '@/src/helpers/releases'
 import useAPI from '@/lib/useAPI'
 import AlbumsSection from '../../LayoutComponents/AlbumsSection/AlbumsSection'
 
@@ -14,15 +14,37 @@ export interface NewSinglesSectionProps {
 
 	newNav?: boolean
 	full?: boolean
+
+	weeks?: number
 }
 
 function NewSinglesSection({
 	data = [] as Album[],
 	grid = false,
+	weeks = 0,
+	title,
 	...props
 }: NewSinglesSectionProps) {
 	const api = useAPI()
-	const from = getFrom()
+	// const from = getFrom()
+	const from = getFromViaWeeks(weeks)
+
+	const params = useMemo(
+		() =>
+			weeks
+				? {
+						// 	weekly: 1,
+						// 	weeks: weeks * -1,
+						weekly: 0,
+						to: getToViaWeeks(weeks),
+					}
+				: {},
+		[weeks]
+	)
+	if (!title && weeks) {
+		// title = `${weeks} week${weeks > 1 ? 's' : ''} ago`
+		title = getFromViaWeeks(weeks, 'll')
+	}
 
 	const hasData = Boolean(data.length)
 
@@ -35,7 +57,9 @@ function NewSinglesSection({
 		async (signal?: AbortSignal) => {
 			try {
 				if (!hasData && !newSinglesLoaded && !newSinglesLoading) {
-					const res = await api.getNewSingles(from, { signal })
+					const res = await api.getNewSingles(from, params, {
+						signal,
+					})
 					setNewSingles(res.data.data)
 					setNewSinglesLoading(true)
 				}
@@ -46,7 +70,7 @@ function NewSinglesSection({
 				setNewSinglesLoading(false)
 			}
 		},
-		[api, from, hasData, newSinglesLoading, newSinglesLoaded]
+		[api, from, params, hasData, newSinglesLoading, newSinglesLoaded]
 	)
 
 	useEffect(() => {
@@ -85,7 +109,7 @@ function NewSinglesSection({
 	return (
 		<AlbumsSection
 			id={props.id || 'newSingles'}
-			title={props.title}
+			title={title}
 			key={props.id || 'newSingles'}
 			items={newSingles}
 			// mobileScroll={true}

src/components/Pages/User/NewReleasesGridPage.tsx

@@ -16,6 +16,14 @@ export default function NewReleasesGridPage({
 			{...props}
 		>
 			<NewReleasesGridSection full />
+			{[...Array(6)].map((value, index) =>
+				!index ? null : (
+					<NewReleasesGridSection
+						key={`NewReleasesGridSection${index}`}
+						weeks={-index}
+					/>
+				)
+			)}
 		</AppPage>
 	)
 }

src/components/Pages/User/NewSinglesGridPage.tsx

@@ -16,6 +16,12 @@ export default function NewSinglesGridPage({
 			{...props}
 		>
 			<NewSinglesGridSection full />
+			<NewSinglesGridSection weeks={-1} />
+			<NewSinglesGridSection weeks={-2} />
+			<NewSinglesGridSection weeks={-3} />
+			<NewSinglesGridSection weeks={-4} />
+			<NewSinglesGridSection weeks={-5} />
+			<NewSinglesGridSection weeks={-6} />
 		</AppPage>
 	)
 }

src/components/Views/Collections/AlbumsCollectionView/AlbumsCollectionView.module.css

@@ -21,6 +21,7 @@
 .gridNotScrollable {
 	@apply max-sm:grid-cols-2 max-md:grid-cols-4 grid-cols-6;
 	@apply overflow-x-hidden;
+	@apply grid-rows-none;
 }
 
 .gridScrollable {

src/helpers/releases.ts

@@ -1,3 +1,19 @@
 import moment from 'moment'
 
-export const getFrom = () => moment().subtract(7, 'days').format('YYYY-MM-DD')
+export const DATE_FORMAT = 'YYYY-MM-DD'
+export const getFrom = (format: string = DATE_FORMAT) =>
+	moment().subtract(7, 'days').format(format)
+export const getFromViaWeeks = (
+	weeks: number = 0,
+	format: string = DATE_FORMAT
+) =>
+	moment()
+		.add((weeks - 1) * 7, 'days')
+		.format(format)
+export const getToViaWeeks = (
+	weeks: number = 0,
+	format: string = DATE_FORMAT
+) =>
+	moment(getFromViaWeeks(weeks + 1))
+		.subtract(1, 'days')
+		.format(format)