diff --git a/packages/bdt-astro/src/pages/index.astro b/packages/bdt-astro/src/pages/index.astro index df0252d6..9cad104e 100644 --- a/packages/bdt-astro/src/pages/index.astro +++ b/packages/bdt-astro/src/pages/index.astro @@ -1,17 +1,62 @@ --- -import BaseLayout from '../layouts/BaseLayout.astro' +import BaseLayout from "../layouts/BaseLayout.astro"; +import GeneralCalendar from "@components/interactions/general.tsx"; +import Switcher from "@components/interactions/switcher.tsx"; +import { films as filmsStore } from "@components/stores/films.ts"; +import { podcasts as podcastsStore } from "@components/stores/podcasts.ts"; +import { allFormats } from "@components/stores/allFormats.ts"; + +import getAllFilms, { + groupFilmsByDate, + aggregateFilms, +} from "@film-fetcher/getAllFilms.ts"; + +import getAllPodcasts, { + groupPodcastsByDate, + aggregatePodcasts, +} from "@podcast-fetcher/getAllPodcasts.ts"; + +const allFilms = await getAllFilms(); +const groupedFilms = groupFilmsByDate(allFilms); +const filmData = aggregateFilms(groupedFilms); + +const allPodcasts = await getAllPodcasts(); +const groupedPodcasts = groupPodcastsByDate(allPodcasts); +const podcastData = aggregatePodcasts(groupedPodcasts); + +const calendarData = [ + { + dataName: "Podcasts", + grouped: groupedPodcasts, + aggregated: podcastData, + store: podcastsStore, + }, + { + dataName: "Films", + grouped: groupedFilms, + aggregated: filmData, + store: filmsStore, + }, +]; + +allFormats.set({ + formatName: "Podcasts", + grouped: groupedPodcasts, + aggregated: podcastData, + store: podcastsStore, +}); ---

Playground

-
-

This mini project has evolved from a little spreadsheet/graph Gatsby experiment into a bit of an anything goes, - "let's have some fun and lob some code up over there".

-

I recently migrated it over to Astro in an effort to simplify things. I'm - hoping to bring more banality over here soon. For now, you can have a browse at what films I've - watched recently (via Letterboxd), maybe the podcasts that have been absorbing my time.

-
+ +
-
\ No newline at end of file + diff --git a/packages/bdt-components/src/interactions/general.tsx b/packages/bdt-components/src/interactions/general.tsx new file mode 100644 index 00000000..8b178c27 --- /dev/null +++ b/packages/bdt-components/src/interactions/general.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { CalendarDatum } from "@nivo/calendar"; +import Calendar from "../visualisations/calendar"; +import { WritableAtom } from "nanostores"; + +import { useStore } from "@nanostores/react"; +import { allFormats } from "../stores/allFormats"; + +const GeneralCalendar = ({ + formatName, + aggregated, + grouped, + responsive = true, + store, +}: { + formatName: string; + aggregated: CalendarDatum[]; + grouped: Record; + responsive?: Boolean; + store: WritableAtom; +}) => { + const formats = useStore(allFormats); + if (formats.formatName === "") { + allFormats.set({ formatName, aggregated, grouped, store }); + } + + const { + aggregated: a, + grouped: g, + store: s, + formatName: name, + } = useStore(allFormats); + + return ( + <> +

{name}

+ { + s.set({ + ...s.get(), + selected: datum.day, + films: g[datum.day] ? g[datum.day] : [], + }); + }} + /> + + ); +}; + +export default GeneralCalendar; diff --git a/packages/bdt-components/src/interactions/switcher.tsx b/packages/bdt-components/src/interactions/switcher.tsx new file mode 100644 index 00000000..37df7411 --- /dev/null +++ b/packages/bdt-components/src/interactions/switcher.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { allFormats } from "../stores/allFormats"; + +const Switcher = ({ data }: { data: any[] }) => { + const changeFormat = (e: any): void => { + const selected = data.filter((item) => item.dataName === e.target.value)[0]; + console.log(selected.store); + allFormats.set({ + formatName: selected.dataName, + grouped: selected.grouped, + aggregated: selected.aggregated, + store: selected.store, + }); + }; + return ( + + ); +}; + +export default Switcher; diff --git a/packages/bdt-components/src/stores/allFormats.ts b/packages/bdt-components/src/stores/allFormats.ts new file mode 100644 index 00000000..b2170af7 --- /dev/null +++ b/packages/bdt-components/src/stores/allFormats.ts @@ -0,0 +1,7 @@ +import { atom } from "nanostores"; + +export const allFormats = atom({ + formatName: "", + grouped: {}, + aggregated: [], +});