+
-
-
Manage Existing Tokens
- {isLoading &&
}
- {sortedTokens.length === 0 && (
-
-
Could not find any api tokens!
-
- )}
+
+
+ You can use API Tokens to access the Listory API directly. You can
+ find the API docs{" "}
+
+ here
+
+ .
+
+
+
+
- {sortedTokens.length > 0 && (
-
- {sortedTokens.map((apiToken) => (
-
- ))}
+
Manage Existing Tokens
+ {isLoading &&
}
+ {sortedTokens.length === 0 && (
+
+
Could not find any api tokens!
)}
+
+ {sortedTokens.length > 0 && (
+
+ {sortedTokens.map((apiToken) => (
+
+ ))}
+
+ )}
+
-
+
);
};
@@ -93,7 +97,7 @@ const NewTokenForm: React.FC<{
createToken,
setNewToken,
setNewTokenDescription,
- ],
+ ]
);
return (
diff --git a/frontend/src/components/ImportListens.tsx b/frontend/src/components/ImportListens.tsx
deleted file mode 100644
index f0699b6..0000000
--- a/frontend/src/components/ImportListens.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import Files from "react-files";
-import type { ReactFile } from "react-files";
-import {
- useSpotifyImportExtendedStreamingHistory,
- useSpotifyImportExtendedStreamingHistoryStatus,
-} from "../hooks/use-api";
-import { SpotifyExtendedStreamingHistoryItem } from "../api/entities/spotify-extended-streaming-history-item";
-import { ErrorIcon } from "../icons/Error";
-import { numberToPercent } from "../util/numberToPercent";
-import { Button } from "./ui/button";
-import { Table, TableBody, TableCell, TableRow } from "./ui/table";
-import { Badge } from "./ui/badge";
-import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "./ui/card";
-import { Code } from "./ui/code";
-
-export const ImportListens: React.FC = () => {
- return (
- <>
-
-
- Import Listens from Spotify Extended Streaming History
-
-
-
-
- Here you can import your full Spotify Listen history that was exported
- from the{" "}
-
- Extended streaming history
-
- .
-
-
- The extended streaming history contains additional personally
- identifiable data such as the IP address of the listen (which can be
- linked to locations). To avoid saving this on the server, the data is
- preprocessed in your web browser and only the necessary data
- (timestamp & track ID) are sent to the server.
-
-
- If an error occurs, you can always retry uploading the file, Listory
- deduplicates any listens to make sure that everything is saved only
- once.
-
-
-
-
-
-
- );
-};
-
-interface FileData {
- file: ReactFile;
- status: Status;
- error?: Error;
-}
-
-enum Status {
- Select,
- Import,
- Finished,
- Error,
-}
-
-const FileUpload: React.FC = () => {
- // Using a map is ... meh, need to wrap all state updates in `new Map()` so react re-renders
- const [fileMap, setFileMap] = useState
>(
- new Map(),
- );
-
- const [status, setStatus] = useState(Status.Select);
-
- const addFiles = useCallback(
- (files: ReactFile[]) => {
- setFileMap((_fileMap) => {
- files.forEach((file) =>
- _fileMap.set(file.id, { file, status: Status.Select }),
- );
- return new Map(_fileMap);
- });
- },
- [setFileMap],
- );
-
- const updateFile = useCallback((data: FileData) => {
- setFileMap((_fileMap) => new Map(_fileMap.set(data.file.id, data)));
- }, []);
-
- const clearFiles = useCallback(() => {
- setFileMap(new Map());
- }, [setFileMap]);
-
- const { importHistory } = useSpotifyImportExtendedStreamingHistory();
-
- const handleImport = useCallback(async () => {
- setStatus(Status.Import);
-
- let errorOccurred = false;
-
- for (const data of fileMap.values()) {
- data.status = Status.Import;
- updateFile(data);
-
- let items: SpotifyExtendedStreamingHistoryItem[];
-
- // Scope so these tmp variables can be GC-ed ASAP
- {
- const fileContent = await data.file.text();
-
- const rawItems = JSON.parse(
- fileContent,
- ) as SpotifyExtendedStreamingHistoryItem[];
-
- items = rawItems
- .filter(({ spotify_track_uri }) => spotify_track_uri !== null)
- .map(({ ts, spotify_track_uri }) => ({
- ts,
- spotify_track_uri,
- }));
- }
-
- try {
- await importHistory(items);
-
- data.status = Status.Finished;
- } catch (err) {
- data.error = err as Error;
- data.status = Status.Error;
-
- errorOccurred = true;
- }
- updateFile(data);
- }
-
- if (!errorOccurred) {
- setStatus(Status.Finished);
- }
- }, [fileMap, importHistory, updateFile]);
-
- return (
-
-
- File Upload
-
- Select endsong_XY.json files here and start the import.
-
-
-
-
- Drop files here or click to upload
-
-
-
- {Array.from(fileMap.values()).map((data) => (
-
- ))}
-
-
-
-
-
-
-
-
- );
-};
-
-const File: React.FC<{ data: FileData }> = ({ data }) => {
- const hasErrors = data.status === Status.Error && data.error;
-
- return (
-
- {data.file.name}
-
- {data.file.sizeReadable}
-
-
- {data.status === Status.Select && Prepared for import!}
- {data.status === Status.Import && Loading!}
- {data.status === Status.Finished && Check!}
- {hasErrors && (
-
-
- {data.error?.message}
-
- )}
-
-
- );
-};
-
-const ImportProgress: React.FC = () => {
- const {
- importStatus: { total, imported },
- isLoading,
- reload,
- } = useSpotifyImportExtendedStreamingHistoryStatus();
-
- useEffect(() => {
- const interval = setInterval(() => {
- if (!isLoading) {
- reload();
- }
- }, 1000);
-
- return () => clearInterval(interval);
- }, [isLoading, reload]);
-
- return (
-
-
- Import Progress
-
- Shows how many of the submitted listens are already imported and
- visible to you. This will take a while, and the process might halt for
- a few minutes if we hit the Spotify API rate limit. If this is not
- finished after a few hours, please contact your Listory administrator.
-
-
-
-
-
-
- Imported
-
- {imported}
-
-
-
- Total
-
- {total}
-
-
-
-
- Listory
-
+
+
+ Listory
-
-
+
);
};
@@ -109,7 +111,7 @@ const Pagination: React.FC<{
>
...
);
};
diff --git a/frontend/src/components/reports/ReportListens.tsx b/frontend/src/components/ReportListens.tsx
similarity index 59%
rename from frontend/src/components/reports/ReportListens.tsx
rename to frontend/src/components/ReportListens.tsx
index 3de8ca5..408fb89 100644
--- a/frontend/src/components/reports/ReportListens.tsx
+++ b/frontend/src/components/ReportListens.tsx
@@ -10,25 +10,20 @@ 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 { 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 { ReportTimeOptions } from "./ReportTimeOptions";
-import { Spinner } from "../ui/Spinner";
-import { Label } from "../ui/label";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "../ui/select";
+import { Spinner } from "./Spinner";
export const ReportListens: React.FC = () => {
+ const { requireUser } = useAuthProtection();
+
const [timeFrame, setTimeFrame] = useState<"day" | "week" | "month" | "year">(
- "day",
+ "day"
);
const [timeOptions, setTimeOptions] = useState