wip

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

@@ -1,7 +1,6 @@
-import React from 'react'
+import React from "react";
 import useFilters from "../hooks/useFilters";
-import {DateRangePicker, Select} from "@openfun/cunningham-react";
-
+import { DateRangePicker, Select } from "@openfun/cunningham-react";
 
 const VIDEO_IDS = [
   "uuid://0aecfa93-cef3-45ae-b7f5-a603e9e45f50",
@@ -18,20 +17,30 @@ const VIDEO_IDS = [
 
 // todo : to be replaced by a proper range component.
 const Wip = () => {
-
-  const {setDate, setVideoIds} = useFilters()
+  const { date, setDate, setVideoIds } = useFilters();
 
   return (
-    <div style={{display: 'flex', gap: '1rem'}}>
+    <div style={{ display: "flex", gap: "1rem" }}>
       <Select
-        label={'Videos'}
-        defaultValue="uuid://0aecfa93-cef3-45ae-b7f5-a603e9e45f50"
-        options={VIDEO_IDS.map((item, index) => ({'value': item, 'label': index.toString(), 'disabled': false}))}
+        label={"Videos"}
+        defaultValue={VIDEO_IDS[0]}
+        options={VIDEO_IDS.map((item, index) => ({
+          value: item,
+          label: index.toString(),
+          disabled: false,
+        }))}
         multi={true}
         onChange={(e) => setVideoIds(e?.target?.value)}
       />
-      <DateRangePicker startLabel={'Start'} endLabel={'End'} onChange={(value) => value ? setDate(value) : setDate(['', ''])} />
+      <DateRangePicker
+        startLabel={"Start"}
+        endLabel={"End"}
+        value={date}
+        // 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.
+        onChange={(value) => (value ? setDate(value) : setDate(["", ""]))}
+      />
     </div>
-  )
-}
-export default Wip;
+  );
+};
+export default Wip;

src/frontend/packages/ui/contexts/filtersContext.tsx

@@ -1,23 +1,27 @@
-import React, {createContext, Dispatch, SetStateAction, useState} from 'react'
-
+import React, {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useState,
+} from "react";
 
 export interface FiltersContextType {
   date: [string, string];
   videoIds: Array<string>;
-  setDate: Dispatch<SetStateAction<[string, string]>>,
-  setVideoIds: Dispatch<SetStateAction<Array<string>>>,
+  setDate: Dispatch<SetStateAction<[string, string]>>;
+  setVideoIds: Dispatch<SetStateAction<Array<string>>>;
 }
 
-const FiltersContext = createContext<FiltersContextType | null>(null)
+const FiltersContext = createContext<FiltersContextType | null>(null);
 
 export const FiltersProvider: React.FC<{ children: any }> = ({ children }) => {
-  const [date, setDate] = useState<[string, string]>(['', ''])
-  const [videoIds, setVideoIds] = useState<Array<string>>([])
+  const [date, setDate] = useState<[string, string]>(["", ""]);
+  const [videoIds, setVideoIds] = useState<Array<string>>([]);
   return (
-    <FiltersContext.Provider value={{date, setDate, videoIds, setVideoIds}}>
+    <FiltersContext.Provider value={{ date, setDate, videoIds, setVideoIds }}>
       {children}
     </FiltersContext.Provider>
-  )
-}
+  );
+};
 
-export default FiltersContext
+export default FiltersContext;

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

@@ -1,23 +1,22 @@
-import React, {useEffect, useMemo, useRef, useState} from "react";
+import React, { useMemo } from "react";
 import ReactECharts from "echarts-for-react";
 import type { EChartsOption } from "echarts-for-react";
 
 import cloneDeep from "lodash.clonedeep";
-import {useVideosViews} from "./api/getVideosViews";
-import {DailyViewsResponseItem} from "./types";
+import { useVideosViews } from "./api/getVideosViews";
+import { DailyVideoViewsResponse } from "./types";
 import useFilters from "../hooks/useFilters";
-import {get} from "axios";
 
 type Series = {
-  id: string,
+  id: string;
   name: string;
-  data: Array<number>,
-  type: string,
-  smooth: number,
-  symbol: string,
-  areaStyle: any,
-  stack: string,
-  emphasis: any,
+  data: Array<number>;
+  type: string;
+  smooth: number;
+  symbol: string;
+  areaStyle: any;
+  stack: string;
+  emphasis: any;
 };
 
 const baseOption: EChartsOption = {
@@ -51,33 +50,32 @@ const baseOption: EChartsOption = {
 };
 
 export const DailyViews = () => {
+  const {
+    date: [since, until],
+    videoIds,
+  } = useFilters();
 
-  const {date: [since, until], videoIds} = useFilters();
+  const results = useVideosViews({ videoIds, since, until });
 
-  const results = useVideosViews({videoIds, since, until});
-  const data = useMemo(() =>
-    results.filter((r) => r.isSuccess
-  ).map((result) => result.data), [results])
+  const data: Array<DailyVideoViewsResponse> = useMemo(
+    () => results.filter((r) => r.isSuccess).map((result) => result.data),
+    [results]
+  );
 
   const formattedOption = useMemo(() => {
-
     const newOption = cloneDeep(baseOption);
-
-    // newOption.xAxis.data = data[0].data.x;
-    newOption.series = data.map((d) => (
-      {
-        id: d?.id,
-        data: d?.data.series,
-        type: "line",
-        smooth: 0.2,
-        symbol: "none",
-        emphasis: {
-          focus: "series",
-        },
-      }
-    ))
-    return newOption
-  }, [data])
+    newOption.series = data.map((d: DailyVideoViewsResponse) => ({
+      id: d?.id,
+      data: d.count_by_date.map((day) => day.count),
+      type: "line",
+      smooth: 0.2,
+      symbol: "none",
+      emphasis: {
+        focus: "series",
+      },
+    }));
+    return newOption;
+  }, [data]);
 
   return (
     <>
@@ -86,7 +84,6 @@ export const DailyViews = () => {
         option={formattedOption}
         notMerge={true}
         style={{ height: 500 }}
-        showLoading={results.some((result) => result.isLoading)}
       />
     </>
   );

src/frontend/packages/ui/video/api/getVideosViews.ts

@@ -1,11 +1,18 @@
-
-import {useQueries} from "@tanstack/react-query";
-import {axios} from "../../libs/axios";
-
+import { useQueries } from "@tanstack/react-query";
+import { axios } from "../../libs/axios";
 
 const getVideoViews = (videoId: string, since: string, until: string) => {
-  return axios.get(`video/${videoId}/views`, {params: {...since && {since: since}, ...until && {until: until}}})
-    .then((res) => res.data);
+  return axios
+    .get(`video/${videoId}/views`, {
+      params: {
+        ...(since && { since: since }),
+        ...(until && { until: until }),
+      },
+    })
+    .then((res) => ({
+      id: videoId,
+      ...res?.data?.content,
+    }));
 };
 
 type UseVideosViewsOptions = {
@@ -14,22 +21,17 @@ type UseVideosViewsOptions = {
   until: string;
 };
 
-export const useVideosViews = ({videoIds, since, until}: UseVideosViewsOptions) => {
+export const useVideosViews = ({
+  videoIds,
+  since,
+  until,
+}: UseVideosViewsOptions) => {
   return useQueries({
-    queries: videoIds?.map((videoId) => {
-      return {
+    queries: [
+      ...videoIds?.map((videoId) => ({
         queryKey: ["videoViews", videoId, since, until],
-        queryFn: async () => {
-          const data = await getVideoViews(videoId, since, until)
-          return {
-            id: videoId,
-            data: {
-              series: data?.content.count_by_date?.map((i) => i.count),
-              x: data?.content.count_by_date?.map((i) => i.date),
-            }
-          };
-        },
-      };
-    }),
+        queryFn: () => getVideoViews(videoId, since, until),
+      })),
+    ],
   });
-}
+};

src/frontend/packages/ui/video/types/index.ts

@@ -1,11 +1,12 @@
 
 
-export type DailyViewsResponseItem = {
+export type DailyVideoViewsResponseItem = {
   date: string;
   count: number;
 };
 
-export type VideoViewsResponse = {
+export type DailyVideoViewsResponse = {
+  id: string;
   total_views: number;
-  count_by_date: Array<DailyViewsResponseItem>;
+  count_by_date: Array<DailyVideoViewsResponseItem>;
 };