diff --git a/plugins/gatsby-source-animethemes-db/src/create-schema-customization.js b/plugins/gatsby-source-animethemes-db/src/create-schema-customization.js index f2e22eff7519..35af28536000 100644 --- a/plugins/gatsby-source-animethemes-db/src/create-schema-customization.js +++ b/plugins/gatsby-source-animethemes-db/src/create-schema-customization.js @@ -30,6 +30,7 @@ module.exports = ({ actions }) => { idRaw: Int slug: String! type: String! + sequence: Int! group: String song: Song! @link(by: "id") anime: Anime! @link(by: "id") diff --git a/plugins/gatsby-source-animethemes-db/src/source-nodes.js b/plugins/gatsby-source-animethemes-db/src/source-nodes.js index f62a008a7c85..d8b369855751 100644 --- a/plugins/gatsby-source-animethemes-db/src/source-nodes.js +++ b/plugins/gatsby-source-animethemes-db/src/source-nodes.js @@ -76,6 +76,7 @@ module.exports = async ({ actions, createNodeId, createContentDigest, reporter } idRaw: theme.theme_id, slug: theme.slug, type: theme.type, + sequence: theme.sequence || 0, group: theme.group, song: createNodeId(`Song-${theme.song_id}`), anime: createNodeId(`Anime-${theme.anime_id}`) diff --git a/schema.graphql b/schema.graphql index a64f8d5263cd..3a971f74c7f3 100644 --- a/schema.graphql +++ b/schema.graphql @@ -413,6 +413,7 @@ type Theme implements Node & Entity { idRaw: Int slug: String! type: String! + sequence: Int! group: String song: Song! anime: Anime! @@ -778,7 +779,7 @@ type Query { allAnime(filter: AnimeFilterInput, sort: AnimeSortInput, skip: Int, limit: Int): AnimeConnection! synonym(idRaw: IntQueryOperatorInput, text: StringQueryOperatorInput, anime: AnimeFilterInput, id: StringQueryOperatorInput, parent: NodeFilterInput, children: NodeFilterListInput, internal: InternalFilterInput): Synonym allSynonym(filter: SynonymFilterInput, sort: SynonymSortInput, skip: Int, limit: Int): SynonymConnection! - theme(idRaw: IntQueryOperatorInput, slug: StringQueryOperatorInput, type: StringQueryOperatorInput, group: StringQueryOperatorInput, song: SongFilterInput, anime: AnimeFilterInput, entries: EntryFilterListInput, id: StringQueryOperatorInput, parent: NodeFilterInput, children: NodeFilterListInput, internal: InternalFilterInput): Theme + theme(idRaw: IntQueryOperatorInput, slug: StringQueryOperatorInput, type: StringQueryOperatorInput, sequence: IntQueryOperatorInput, group: StringQueryOperatorInput, song: SongFilterInput, anime: AnimeFilterInput, entries: EntryFilterListInput, id: StringQueryOperatorInput, parent: NodeFilterInput, children: NodeFilterListInput, internal: InternalFilterInput): Theme allTheme(filter: ThemeFilterInput, sort: ThemeSortInput, skip: Int, limit: Int): ThemeConnection! entry(idRaw: IntQueryOperatorInput, version: IntQueryOperatorInput, episodes: StringQueryOperatorInput, nsfw: BooleanQueryOperatorInput, spoiler: BooleanQueryOperatorInput, theme: ThemeFilterInput, videos: VideoFilterListInput, id: StringQueryOperatorInput, parent: NodeFilterInput, children: NodeFilterListInput, internal: InternalFilterInput): Entry allEntry(filter: EntryFilterInput, sort: EntrySortInput, skip: Int, limit: Int): EntryConnection! @@ -1972,6 +1973,7 @@ input ThemeFilterInput { idRaw: IntQueryOperatorInput slug: StringQueryOperatorInput type: StringQueryOperatorInput + sequence: IntQueryOperatorInput group: StringQueryOperatorInput song: SongFilterInput anime: AnimeFilterInput @@ -2183,6 +2185,7 @@ enum AnimeFieldsEnum { synonyms___anime___themes___idRaw synonyms___anime___themes___slug synonyms___anime___themes___type + synonyms___anime___themes___sequence synonyms___anime___themes___group synonyms___anime___themes___entries synonyms___anime___themes___id @@ -2269,6 +2272,7 @@ enum AnimeFieldsEnum { themes___idRaw themes___slug themes___type + themes___sequence themes___group themes___song___idRaw themes___song___title @@ -2276,6 +2280,7 @@ enum AnimeFieldsEnum { themes___song___themes___idRaw themes___song___themes___slug themes___song___themes___type + themes___song___themes___sequence themes___song___themes___group themes___song___themes___entries themes___song___themes___id @@ -2313,6 +2318,7 @@ enum AnimeFieldsEnum { themes___anime___themes___idRaw themes___anime___themes___slug themes___anime___themes___type + themes___anime___themes___sequence themes___anime___themes___group themes___anime___themes___entries themes___anime___themes___id @@ -2366,6 +2372,7 @@ enum AnimeFieldsEnum { themes___entries___theme___idRaw themes___entries___theme___slug themes___entries___theme___type + themes___entries___theme___sequence themes___entries___theme___group themes___entries___theme___entries themes___entries___theme___id @@ -2458,6 +2465,7 @@ enum AnimeFieldsEnum { series___anime___themes___idRaw series___anime___themes___slug series___anime___themes___type + series___anime___themes___sequence series___anime___themes___group series___anime___themes___entries series___anime___themes___id @@ -2644,6 +2652,7 @@ enum AnimeFieldsEnum { studios___anime___themes___idRaw studios___anime___themes___slug studios___anime___themes___type + studios___anime___themes___sequence studios___anime___themes___group studios___anime___themes___entries studios___anime___themes___id @@ -2890,6 +2899,7 @@ enum SynonymFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -3198,6 +3208,7 @@ enum ThemeFieldsEnum { idRaw slug type + sequence group song___idRaw song___title @@ -3205,6 +3216,7 @@ enum ThemeFieldsEnum { song___themes___idRaw song___themes___slug song___themes___type + song___themes___sequence song___themes___group song___themes___song___idRaw song___themes___song___title @@ -3360,6 +3372,7 @@ enum ThemeFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -3553,6 +3566,7 @@ enum ThemeFieldsEnum { entries___theme___idRaw entries___theme___slug entries___theme___type + entries___theme___sequence entries___theme___group entries___theme___song___idRaw entries___theme___song___title @@ -3800,6 +3814,7 @@ enum EntryFieldsEnum { theme___idRaw theme___slug theme___type + theme___sequence theme___group theme___song___idRaw theme___song___title @@ -3807,6 +3822,7 @@ enum EntryFieldsEnum { theme___song___themes___idRaw theme___song___themes___slug theme___song___themes___type + theme___song___themes___sequence theme___song___themes___group theme___song___themes___entries theme___song___themes___id @@ -3844,6 +3860,7 @@ enum EntryFieldsEnum { theme___anime___themes___idRaw theme___anime___themes___slug theme___anime___themes___type + theme___anime___themes___sequence theme___anime___themes___group theme___anime___themes___entries theme___anime___themes___id @@ -3897,6 +3914,7 @@ enum EntryFieldsEnum { theme___entries___theme___idRaw theme___entries___theme___slug theme___entries___theme___type + theme___entries___theme___sequence theme___entries___theme___group theme___entries___theme___entries theme___entries___theme___id @@ -3991,6 +4009,7 @@ enum EntryFieldsEnum { videos___entries___theme___idRaw videos___entries___theme___slug videos___entries___theme___type + videos___entries___theme___sequence videos___entries___theme___group videos___entries___theme___entries videos___entries___theme___id @@ -4205,6 +4224,7 @@ enum VideoFieldsEnum { entries___theme___idRaw entries___theme___slug entries___theme___type + entries___theme___sequence entries___theme___group entries___theme___song___idRaw entries___theme___song___title @@ -4450,6 +4470,7 @@ enum SongFieldsEnum { themes___idRaw themes___slug themes___type + themes___sequence themes___group themes___song___idRaw themes___song___title @@ -4457,6 +4478,7 @@ enum SongFieldsEnum { themes___song___themes___idRaw themes___song___themes___slug themes___song___themes___type + themes___song___themes___sequence themes___song___themes___group themes___song___themes___entries themes___song___themes___id @@ -4494,6 +4516,7 @@ enum SongFieldsEnum { themes___anime___themes___idRaw themes___anime___themes___slug themes___anime___themes___type + themes___anime___themes___sequence themes___anime___themes___group themes___anime___themes___entries themes___anime___themes___id @@ -4547,6 +4570,7 @@ enum SongFieldsEnum { themes___entries___theme___idRaw themes___entries___theme___slug themes___entries___theme___type + themes___entries___theme___sequence themes___entries___theme___group themes___entries___theme___entries themes___entries___theme___id @@ -4626,6 +4650,7 @@ enum SongFieldsEnum { performances___song___themes___idRaw performances___song___themes___slug performances___song___themes___type + performances___song___themes___sequence performances___song___themes___group performances___song___themes___entries performances___song___themes___id @@ -4855,6 +4880,7 @@ enum PerformanceFieldsEnum { song___themes___idRaw song___themes___slug song___themes___type + song___themes___sequence song___themes___group song___themes___song___idRaw song___themes___song___title @@ -5282,6 +5308,7 @@ enum ArtistFieldsEnum { performances___song___themes___idRaw performances___song___themes___slug performances___song___themes___type + performances___song___themes___sequence performances___song___themes___group performances___song___themes___entries performances___song___themes___id @@ -6362,6 +6389,7 @@ enum SeriesFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -6960,6 +6988,7 @@ enum StudioFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -7306,6 +7335,7 @@ enum AnimeSeriesFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -7509,6 +7539,7 @@ enum AnimeSeriesFieldsEnum { series___anime___themes___idRaw series___anime___themes___slug series___anime___themes___type + series___anime___themes___sequence series___anime___themes___group series___anime___themes___entries series___anime___themes___id @@ -7729,6 +7760,7 @@ enum EntryVideoFieldsEnum { entry___theme___idRaw entry___theme___slug entry___theme___type + entry___theme___sequence entry___theme___group entry___theme___song___idRaw entry___theme___song___title @@ -7868,6 +7900,7 @@ enum EntryVideoFieldsEnum { video___entries___theme___idRaw video___entries___theme___slug video___entries___theme___type + video___entries___theme___sequence video___entries___theme___group video___entries___theme___entries video___entries___theme___id @@ -8111,6 +8144,7 @@ enum AnimeResourceFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -8859,6 +8893,7 @@ enum AnimeImageFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -9607,6 +9642,7 @@ enum AnimeStudioFieldsEnum { anime___themes___idRaw anime___themes___slug anime___themes___type + anime___themes___sequence anime___themes___group anime___themes___song___idRaw anime___themes___song___title @@ -9810,6 +9846,7 @@ enum AnimeStudioFieldsEnum { studio___anime___themes___idRaw studio___anime___themes___slug studio___anime___themes___type + studio___anime___themes___sequence studio___anime___themes___group studio___anime___themes___entries studio___anime___themes___id @@ -10692,6 +10729,7 @@ enum BracketRoundFieldsEnum { pairings___characterA___theme___idRaw pairings___characterA___theme___slug pairings___characterA___theme___type + pairings___characterA___theme___sequence pairings___characterA___theme___group pairings___characterA___theme___entries pairings___characterA___theme___id @@ -10723,6 +10761,7 @@ enum BracketRoundFieldsEnum { pairings___characterB___theme___idRaw pairings___characterB___theme___slug pairings___characterB___theme___type + pairings___characterB___theme___sequence pairings___characterB___theme___group pairings___characterB___theme___entries pairings___characterB___theme___id @@ -11050,6 +11089,7 @@ enum BracketPairingFieldsEnum { characterA___theme___idRaw characterA___theme___slug characterA___theme___type + characterA___theme___sequence characterA___theme___group characterA___theme___song___idRaw characterA___theme___song___title @@ -11174,6 +11214,7 @@ enum BracketPairingFieldsEnum { characterB___theme___idRaw characterB___theme___slug characterB___theme___type + characterB___theme___sequence characterB___theme___group characterB___theme___song___idRaw characterB___theme___song___title @@ -11423,6 +11464,7 @@ enum BracketCharacterFieldsEnum { pairing___characterA___theme___idRaw pairing___characterA___theme___slug pairing___characterA___theme___type + pairing___characterA___theme___sequence pairing___characterA___theme___group pairing___characterA___theme___entries pairing___characterA___theme___id @@ -11454,6 +11496,7 @@ enum BracketCharacterFieldsEnum { pairing___characterB___theme___idRaw pairing___characterB___theme___slug pairing___characterB___theme___type + pairing___characterB___theme___sequence pairing___characterB___theme___group pairing___characterB___theme___entries pairing___characterB___theme___id @@ -11519,6 +11562,7 @@ enum BracketCharacterFieldsEnum { theme___idRaw theme___slug theme___type + theme___sequence theme___group theme___song___idRaw theme___song___title @@ -11526,6 +11570,7 @@ enum BracketCharacterFieldsEnum { theme___song___themes___idRaw theme___song___themes___slug theme___song___themes___type + theme___song___themes___sequence theme___song___themes___group theme___song___themes___entries theme___song___themes___id @@ -11563,6 +11608,7 @@ enum BracketCharacterFieldsEnum { theme___anime___themes___idRaw theme___anime___themes___slug theme___anime___themes___type + theme___anime___themes___sequence theme___anime___themes___group theme___anime___themes___entries theme___anime___themes___id @@ -11616,6 +11662,7 @@ enum BracketCharacterFieldsEnum { theme___entries___theme___idRaw theme___entries___theme___slug theme___entries___theme___type + theme___entries___theme___sequence theme___entries___theme___group theme___entries___theme___entries theme___entries___theme___id diff --git a/src/components/card/AnimeSummaryCard.js b/src/components/card/AnimeSummaryCard.js index 7b0f59bce8b9..85fcd106e565 100644 --- a/src/components/card/AnimeSummaryCard.js +++ b/src/components/card/AnimeSummaryCard.js @@ -7,6 +7,7 @@ import createVideoSlug from "utils/createVideoSlug"; import { Flex } from "components/box"; import { Icon } from "components/icon"; import { SummaryCard } from "components/card"; +import { chain, themeSequenceComparator, themeTypeComparator } from "utils/comparators"; export function AnimeSummaryCard({ anime, hideThemes = false, maxThemes = 4 }) { const { smallCover } = useImage(anime); @@ -42,8 +43,9 @@ export function AnimeSummaryCard({ anime, hideThemes = false, maxThemes = 4 }) { {!hideThemes && ( {anime.themes - .slice(0, maxThemes) .filter((theme) => "entries" in theme && theme.entries.length && theme.entries[0].videos.length) + .sort(chain(themeTypeComparator, themeSequenceComparator)) + .slice(0, maxThemes) .map((theme) => { const entry = theme.entries[0]; const video = entry.videos[0]; @@ -81,6 +83,8 @@ export const query = graphql` year season themes { + type + sequence slug } resources { diff --git a/src/components/filter/AnimeThemeFilter.js b/src/components/filter/AnimeThemeFilter.js index b9b1ece6d23a..246ceab6581b 100644 --- a/src/components/filter/AnimeThemeFilter.js +++ b/src/components/filter/AnimeThemeFilter.js @@ -3,6 +3,7 @@ import { Box, Flex } from "components/box"; import { ThemeDetailCard } from "components/card"; import { Listbox } from "components/listbox"; import { HorizontalScroll } from "components/utils"; +import { chain, themeSequenceComparator, themeTypeComparator } from "utils/comparators"; export function AnimeThemeFilter({ themes }) { const groups = useMemo(() => themes.reduce((groups, theme) => { @@ -25,7 +26,9 @@ export function AnimeThemeFilter({ themes }) { const hasMultipleTypes = activeThemes.find((theme) => theme.type === "OP") && activeThemes.find((theme) => theme.type === "ED"); const [ filterType, setFilterType ] = useState(null); - const filteredThemes = activeThemes.filter((theme) => !filterType || theme.type === filterType); + const filteredThemes = activeThemes + .filter((theme) => !filterType || theme.type === filterType) + .sort(chain(themeTypeComparator, themeSequenceComparator)); return ( diff --git a/src/templates/season.js b/src/templates/season.js index 14fe3a6d4930..2cbd05e34960 100644 --- a/src/templates/season.js +++ b/src/templates/season.js @@ -30,20 +30,8 @@ export const query = graphql` query($year: Int!, $season: String) { allAnime(filter: {year: {eq: $year}, season: {eq: $season}}) { nodes { - slug - name - themes { - slug - ...VideoSlug - } - resources { - link - site - } - images { - facet - link - } + ...AnimeCard + ...AnimeCardThemes } } } diff --git a/src/templates/series.js b/src/templates/series.js index 65de72d33027..5c01145987bc 100644 --- a/src/templates/series.js +++ b/src/templates/series.js @@ -32,10 +32,10 @@ const StyledCover = styled.img` `; const sortByComparators = new Map([ - [ "A ➜ Z", animeNameComparator ], - [ "Z ➜ A", reverse(animeNameComparator) ], [ "Old ➜ New", chain(animePremiereComparator, animeNameComparator) ], - [ "New ➜ Old", chain(reverse(animePremiereComparator), animeNameComparator) ] + [ "New ➜ Old", chain(reverse(animePremiereComparator), animeNameComparator) ], + [ "A ➜ Z", animeNameComparator ], + [ "Z ➜ A", reverse(animeNameComparator) ] ]); const sortByOptions = [ ...sortByComparators.keys() ]; @@ -104,22 +104,8 @@ export const query = graphql` slug name anime { - slug - name - year - season - themes { - slug - ...VideoSlug - } - resources { - link - site - } - images { - facet - link - } + ...AnimeCard + ...AnimeCardThemes } } } diff --git a/src/templates/studio.js b/src/templates/studio.js index e4d024da7099..1eb29e96bb35 100644 --- a/src/templates/studio.js +++ b/src/templates/studio.js @@ -49,7 +49,7 @@ export default function StudioDetailPage({ data: { studio } }) { ].map((images) => images.largeCover).filter((image) => !!image); const [ showFilter, toggleShowFilter ] = useToggle(); - const [ sortBy, setSortBy ] = useState(sortByComparators[0]); + const [ sortBy, setSortBy ] = useState(sortByOptions[0]); const animeSorted = [ ...anime ].sort(sortByComparators.get(sortBy)); @@ -103,22 +103,8 @@ export const query = graphql` slug name anime { - slug - name - year - season - themes { - slug - ...VideoSlug - } - resources { - link - site - } - images { - facet - link - } + ...AnimeCard + ...AnimeCardThemes } } } diff --git a/src/templates/year.js b/src/templates/year.js index b4886b5067fb..9c5cf6c1ac9e 100644 --- a/src/templates/year.js +++ b/src/templates/year.js @@ -49,20 +49,8 @@ export const query = graphql` groupedBySeason: group(field: season, limit: 3) { fieldValue nodes { - slug - name - themes { - slug - ...VideoSlug - } - resources { - link - site - } - images { - facet - link - } + ...AnimeCard + ...AnimeCardThemes } } } diff --git a/src/utils/comparators.js b/src/utils/comparators.js index 9ea8ef6d9bec..f815919f2cdc 100644 --- a/src/utils/comparators.js +++ b/src/utils/comparators.js @@ -4,6 +4,10 @@ const seasonOrder = [ "summer", "fall" ]; +const themeTypeOrder = [ + "op", + "ed" +]; export const reverse = (comparator) => (a, b) => comparator(b, a); export const chain = (...comparators) => (a, b) => { @@ -21,3 +25,5 @@ export const animeYearComparator = (a, b) => a.year - b.year; export const animeSeasonComparator = (a, b) => seasonOrder.indexOf(a.season.toLowerCase()) - seasonOrder.indexOf(b.season.toLowerCase()); export const animePremiereComparator = chain(animeYearComparator, animeSeasonComparator); export const songTitleComparator = (a, b) => a.song.title.localeCompare(b.song.title); +export const themeTypeComparator = (a, b) => themeTypeOrder.indexOf(a.type.toLowerCase()) - themeTypeOrder.indexOf(b.type.toLowerCase()); +export const themeSequenceComparator = (a, b) => a.sequence - b.sequence;