- {recentListens.length > 0 && (
-
+ <>
+
+
+ Recent listens
+
+
+
+
+ {isLoading &&
}
+ {recentListens.length === 0 && (
+
+
+ Could not find any listens!
+
+
+ )}
+
+ {recentListens.length > 0 && (
+
+
{recentListens.map((listen) => (
))}
-
- )}
-
-
+
+
+ )}
+
-
+
);
};
@@ -134,15 +132,19 @@ const ListenItem: React.FC<{ listen: Listen }> = ({ listen }) => {
});
const dateTime = format(new Date(listen.playedAt), "PP p");
return (
-
-
{trackName}
-
{artists}
-
+
+ {trackName}
+
+
+ {artists}
+
+
{timeAgo}
-
-
+
+
);
};
diff --git a/frontend/src/components/ReportListens.tsx b/frontend/src/components/reports/ReportListens.tsx
similarity index 62%
rename from frontend/src/components/ReportListens.tsx
rename to frontend/src/components/reports/ReportListens.tsx
index 644a200..3de8ca5 100644
--- a/frontend/src/components/ReportListens.tsx
+++ b/frontend/src/components/reports/ReportListens.tsx
@@ -10,18 +10,23 @@ import {
XAxis,
YAxis,
} from "recharts";
-import { ListenReportItem } from "../api/entities/listen-report-item";
-import { ListenReportOptions } from "../api/entities/listen-report-options";
-import { TimeOptions } from "../api/entities/time-options";
-import { TimePreset } from "../api/entities/time-preset.enum";
-import { useListensReport } from "../hooks/use-api";
-import { useAuthProtection } from "../hooks/use-auth-protection";
+import { ListenReportItem } from "../../api/entities/listen-report-item";
+import { ListenReportOptions } from "../../api/entities/listen-report-options";
+import { TimeOptions } from "../../api/entities/time-options";
+import { TimePreset } from "../../api/entities/time-preset.enum";
+import { useListensReport } from "../../hooks/use-api";
import { ReportTimeOptions } from "./ReportTimeOptions";
-import { Spinner } from "./Spinner";
+import { Spinner } from "../ui/Spinner";
+import { Label } from "../ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
export const ReportListens: React.FC = () => {
- const { requireUser } = useAuthProtection();
-
const [timeFrame, setTimeFrame] = useState<"day" | "week" | "month" | "year">(
"day",
);
@@ -41,53 +46,53 @@ export const ReportListens: React.FC = () => {
const reportHasItems = report.length !== 0;
- requireUser();
-
return (
-
-
-
-
-
-
-
-
-
-
-
- {isLoading &&
}
- {!reportHasItems && !isLoading && (
-
- )}
- {reportHasItems && (
-
-
-
- )}
-
+ <>
+
+
+ Listen Report
+
-
+
+
+
+
+
+
+
+
+ {isLoading &&
}
+ {!reportHasItems && !isLoading && (
+
+ )}
+ {reportHasItems && (
+
+
+
+ )}
+
+
);
};
diff --git a/frontend/src/components/ReportTimeOptions.tsx b/frontend/src/components/reports/ReportTimeOptions.tsx
similarity index 62%
rename from frontend/src/components/ReportTimeOptions.tsx
rename to frontend/src/components/reports/ReportTimeOptions.tsx
index 62af865..4d95aec 100644
--- a/frontend/src/components/ReportTimeOptions.tsx
+++ b/frontend/src/components/reports/ReportTimeOptions.tsx
@@ -1,7 +1,15 @@
import React from "react";
-import { TimeOptions } from "../api/entities/time-options";
-import { TimePreset } from "../api/entities/time-preset.enum";
-import { DateSelect } from "./inputs/DateSelect";
+import { TimeOptions } from "../../api/entities/time-options";
+import { TimePreset } from "../../api/entities/time-preset.enum";
+import { DateSelect } from "../inputs/DateSelect";
+import { Label } from "../ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
interface ReportTimeOptionsProps {
timeOptions: TimeOptions;
@@ -23,28 +31,34 @@ export const ReportTimeOptions: React.FC
= ({
setTimeOptions,
}) => {
return (
-
+
-
-
{timeOptions.timePreset === TimePreset.CUSTOM && (
-
+
{
+ const [timeOptions, setTimeOptions] = useState({
+ timePreset: TimePreset.LAST_90_DAYS,
+ customTimeStart: new Date("2020"),
+ customTimeEnd: new Date(),
+ });
+
+ const options = useMemo(
+ () => ({
+ time: timeOptions,
+ }),
+ [timeOptions],
+ );
+
+ const { topAlbums, isLoading } = useTopAlbums(options);
+
+ const reportHasItems = topAlbums.length !== 0;
+ const maxCount = getMaxCount(topAlbums);
+
+ return (
+ <>
+
+
+ Top Albums
+
+
+
+
+ {isLoading &&
}
+ {!reportHasItems && !isLoading && (
+
+ )}
+ {reportHasItems &&
+ topAlbums.map(({ album, count }) => (
+
+ ))}
+
+
+ Top Artists
+
+
+
+
+ {isLoading &&
}
+
+ {!reportHasItems && !isLoading && (
+
+ )}
+ {reportHasItems &&
+ topArtists.map(({ artist, count }) => (
+
+ ))}
+
+
+ Top Genres
+
+
+
+
+ {isLoading &&
}
+ {!reportHasItems && !isLoading && (
+
+ )}
+ {reportHasItems &&
+ topGenres.map(({ genre, artists, count }) => (
+
+ ))}
+
+
+ Top Tracks
+
+
+
+
+ {isLoading &&
}
+ {!reportHasItems && !isLoading && (
+
+ )}
+ {reportHasItems &&
+ topTracks.map(({ track, count }) => (
+
+ ))}
+
+
+
+));
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+));
+NavigationMenuIndicator.displayName =
+ NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+ navigationMenuTriggerStyle,
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+};
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..98e7d7f
--- /dev/null
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,119 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+
+import { cn } from "src/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+
+
+
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+ Select,
+ SelectGroup,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
+ SelectLabel,
+ SelectItem,
+ SelectSeparator,
+};
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
new file mode 100644
index 0000000..2eed8a5
--- /dev/null
+++ b/frontend/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "src/lib/utils"
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+ HTMLTableCellElement,
+ React.ThHTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+ HTMLTableCellElement,
+ React.TdHTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/frontend/src/hooks/use-outside-click.tsx b/frontend/src/hooks/use-outside-click.tsx
deleted file mode 100644
index b3d588e..0000000
--- a/frontend/src/hooks/use-outside-click.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { useEffect } from "react";
-
-/**
- * Hook that alerts clicks outside of the passed ref
- */
-export const useOutsideClick = (
- ref: React.MutableRefObject,
- callback: () => void,
-) => {
- useEffect(() => {
- /**
- * Alert if clicked on outside of element
- */
- const handleClickOutside = (event: MouseEvent) => {
- if (ref.current && !ref.current.contains(event.target)) {
- callback();
- }
- };
- // Bind the event listener
- document.addEventListener("mousedown", handleClickOutside);
- return () => {
- // Unbind the event listener on clean up
- document.removeEventListener("mousedown", handleClickOutside);
- };
- }, [ref, callback]);
-};
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index d027794..4b1aab5 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -5,6 +5,7 @@ import { App } from "./App";
import { ProvideApiClient } from "./hooks/use-api-client";
import { ProvideAuth } from "./hooks/use-auth";
import "./index.css";
+import { ThemeProvider } from "./components/ThemeProvider";
const root = createRoot(document.getElementById("root")!);
@@ -13,7 +14,9 @@ root.render(
-
+
+
+
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..ec79801
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index b9f1e83..be6f922 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,8 @@
const colors = require("tailwindcss/colors");
+/** @type {import('tailwindcss').Config} */
module.exports = {
+ darkMode: ["class"],
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
theme: {
colors: {
@@ -12,6 +14,7 @@ module.exports = {
// Tailwind v1 Colors
gray: {
+ 50: "#ffffff",
100: "#f7fafc",
200: "#edf2f7",
300: "#e2e8f0",
@@ -21,9 +24,11 @@ module.exports = {
700: "#4a5568",
800: "#2d3748",
900: "#1a202c",
+ 950: "#0C0F12",
},
green: {
+ 50: "#FFFFFF",
100: "#f0fff4",
200: "#c6f6d5",
300: "#9ae6b4",
@@ -33,6 +38,7 @@ module.exports = {
700: "#2f855a",
800: "#276749",
900: "#22543d",
+ 950: "#1C4A2F",
},
yellow: colors.yellow,
@@ -40,5 +46,29 @@ module.exports = {
violet: colors.violet,
amber: colors.amber,
},
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ keyframes: {
+ "accordion-down": {
+ from: { height: 0 },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: 0 },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
},
+ plugins: [require("tailwindcss-animate")],
};
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index f2850b7..87a2e9c 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -21,5 +21,8 @@
},
"include": [
"src"
- ]
+ ],
+ "paths": {
+ "src/*": ["./src/*"]
+ }
}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 2a22e1b..e200e4a 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,3 +1,4 @@
+import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
@@ -7,6 +8,11 @@ export default defineConfig(() => {
outDir: "build",
},
plugins: [react()],
+ resolve: {
+ alias: {
+ src: path.resolve(__dirname, "./src"),
+ },
+ },
test: {
globals: true,
environment: "jsdom",