✨(frontend) Filter video views

CHANGELOG.md

@@ -21,5 +21,6 @@ and this project adheres to
 - Remove the elasticsearch backend
 - Add the LTI django application
 - Rename the API directory to a more descriptive name.
+- Add a select and date range picker to the web dashboard.
 
 [unreleased]: https://github.com/openfun/warren

src/frontend/apps/docs/pages/index.tsx

@@ -1,11 +1,13 @@
 import { DailyViews } from "ui";
 import AppProvider from "ui/provider/app";
+import Filters from "ui/components/filters";
 
 export default function Docs() {
   return (
     <AppProvider>
       <h1>Docs</h1>
-      <DailyViews videoIds={["uuid://8d386f48-3baa-4acf-8a46-0f2be4ae243e"]} />
+      <Filters />
+      <DailyViews />
     </AppProvider>
   );
 }

src/frontend/apps/web/pages/index.tsx

@@ -4,23 +4,13 @@ import type { NextPageWithLayout } from "./_app";
 
 import { DailyViews } from "ui";
 import AppProvider from "ui/provider/app";
+import Filters from "ui/components/filters";
 
 const Web: NextPageWithLayout = () => {
-  const videoIds = [
-    "uuid://0aecfa93-cef3-45ae-b7f5-a603e9e45f50",
-    "uuid://1c0c127a-f121-4bd1-8db6-918605c2645d",
-    "uuid://541dab6b-50ae-4444-b230-494f0621f132",
-    "uuid://69d32ad5-3af5-4160-a995-87e09da6865c",
-    "uuid://7d4f3c70-1e79-4243-9b7d-166076ce8bfb",
-    "uuid://8d386f48-3baa-4acf-8a46-0f2be4ae243e",
-    "uuid://b172ec09-97ec-4651-bc57-6eabebf47ed0",
-    "uuid://d613b564-5d18-4238-a69c-0fc8cee5d0e7",
-    "uuid://dd38149d-956a-483d-8975-c1506de1e1a9",
-    "uuid://e151ee65-7a72-478c-ac57-8a02f19e748b",
-  ];
   return (
     <AppProvider>
-      <DailyViews videoIds={videoIds} />
+      <Filters />
+      <DailyViews />
     </AppProvider>
   );
 };

src/frontend/packages/ui/components/filters.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import useFilters from "../hooks/useFilters";
+import { DateRangePicker, Select } from "@openfun/cunningham-react";
+
+type VideoOption = {
+  value: string;
+  label: string;
+};
+
+const VIDEO_IDS = [
+  "uuid://0aecfa93-cef3-45ae-b7f5-a603e9e45f50",
+  "uuid://1c0c127a-f121-4bd1-8db6-918605c2645d",
+  "uuid://541dab6b-50ae-4444-b230-494f0621f132",
+  "uuid://69d32ad5-3af5-4160-a995-87e09da6865c",
+  "uuid://7d4f3c70-1e79-4243-9b7d-166076ce8bfb",
+  "uuid://8d386f48-3baa-4acf-8a46-0f2be4ae243e",
+  "uuid://b172ec09-97ec-4651-bc57-6eabebf47ed0",
+  "uuid://d613b564-5d18-4238-a69c-0fc8cee5d0e7",
+  "uuid://dd38149d-956a-483d-8975-c1506de1e1a9",
+  "uuid://e151ee65-7a72-478c-ac57-8a02f19e748b",
+];
+
+const Filters: React.FC = () => {
+  const { date, setDate, setVideoIds } = useFilters();
+
+  const getVideoOptions = (): VideoOption[] => {
+    return VIDEO_IDS.map((item) => ({
+      value: item,
+      label: item.slice(-5),
+    }));
+  };
+
+  const handleVideoIdsChange = (
+    value: string | number | string[] | undefined
+  ): void => {
+    const videoIds = Array.isArray(value)
+      ? value
+      : value
+      ? [value.toString()]
+      : [];
+    setVideoIds(videoIds);
+  };
+
+  const handleDateChange = (value: [string, string] | null): void => {
+    // todo - handle start at 00:00:00 and end at 23:59:59
+    // todo - component api is going to change soon. Let's wait for its change.
+    value ? setDate(value) : setDate(["", ""]);
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <Select
+        label="Videos"
+        defaultValue={VIDEO_IDS[0]}
+        options={getVideoOptions()}
+        multi={true}
+        onChange={(e) => handleVideoIdsChange(e.target.value)}
+      />
+      <DateRangePicker
+        startLabel="Start"
+        endLabel="End"
+        value={date}
+        onChange={(value) => handleDateChange(value)}
+      />
+    </div>
+  );
+};
+export default Filters;

src/frontend/packages/ui/video/Views.tsx

@@ -5,6 +5,7 @@ import { useQuery, useQueries, useQueryClient } from "@tanstack/react-query";
 
 import cloneDeep from "lodash.clonedeep";
 import { axios } from "../libs/axios";
+import useFilters from "../hooks/useFilters";
 
 type DailyViewsResponseItem = {
   day: string;
@@ -16,11 +17,9 @@ type VideoViewsResponse = {
   daily_views: Array<DailyViewsResponseItem>;
 };
 
-type DailyViewsProps = {
-  videoIds: Array<string>;
-};
+export const DailyViews = () => {
+  const { videoIds } = useFilters();
 
-export const DailyViews = ({ videoIds }: DailyViewsProps) => {
   const baseOption: EChartsOption = {
     grid: { top: 80, right: 8, bottom: 100, left: 50 },
     xAxis: {