refactor word cloud to rtk

src/actions/utilActions.js

@@ -3,12 +3,7 @@ import { Server } from "../api_client/apiClient";
 import { notification } from "../service/notifications";
 import { UserSchema } from "../store/user/user.zod";
 import { userActions } from "../store/user/userSlice";
-import {
-  DeleteMissingPhotosResponse,
-  GenerateEventAlbumsTitlesResponse,
-  PhotoMonthCount,
-  WordCloudResponse,
-} from "./utilActions.types";
+import { DeleteMissingPhotosResponse, GenerateEventAlbumsTitlesResponse, PhotoMonthCount } from "./utilActions.types";
 
 export function updateAvatar(user, form_data) {
   return function cb(dispatch) {
@@ -108,15 +103,3 @@ export function fetchPhotoMonthCounts(dispatch) {
       dispatch({ type: "FETCH_PHOTO_MONTH_COUNTS_REJECTED", payload: err });
     });
 }
-
-export function fetchWordCloud(dispatch) {
-  dispatch({ type: "FETCH_WORDCLOUD" });
-  Server.get(`wordcloud/`)
-    .then(response => {
-      const data = WordCloudResponse.parse(response.data);
-      dispatch({ type: "FETCH_WORDCLOUD_FULFILLED", payload: data });
-    })
-    .catch(err => {
-      dispatch({ type: "FETCH_WORDCLOUD_REJECTED", payload: err });
-    });
-}

src/api_client/util.ts

@@ -39,16 +39,31 @@ export const COUNT_STATS_DEFAULTS: CountStats = {
   num_albumuser: 0,
 };
 
+export const WordCloud = z.object({
+  label: z.string(),
+  y: z.number(),
+  x: z.number().optional(),
+});
+
+export const WordCloudResponseSchema = z.object({
+  captions: WordCloud.array(),
+  people: WordCloud.array(),
+  locations: WordCloud.array(),
+});
+
+type WordCloudResponse = z.infer<typeof WordCloudResponseSchema>;
+
 enum Endpoints {
   fetchTimezones = "fetchTimezones",
   fetchLocationTree = "fetchLocationTree",
   fetchCountStats = "fetchCountStats",
+  fetchWordCloud = "fetchWordCloud",
 }
 
 const TimezonesSchema = z.string().array();
 type Timezones = z.infer<typeof TimezonesSchema>;
 
-const utilApi = api
+export const util = api
   .injectEndpoints({
     endpoints: builder => ({
       [Endpoints.fetchTimezones]: builder.query<Timezones, void>({
@@ -70,6 +85,23 @@ const utilApi = api
         query: () => "stats/",
         transformResponse: response => CountStatsSchema.parse(response),
       }),
+      [Endpoints.fetchWordCloud]: builder.query<WordCloudResponse, void>({
+        query: () => "wordcloud/",
+        async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+          /**
+           * This is a workaround. For the time being we'll use redux store instead of cache.
+           * The use of cached data is not working properly with Word Cloud component. This could be due to the timing.
+           */
+          dispatch({ type: "FETCH_WORDCLOUD" });
+          try {
+            const { data } = await queryFulfilled;
+            const payload = WordCloudResponseSchema.parse(data);
+            dispatch({ type: "FETCH_WORDCLOUD_FULFILLED", payload });
+          } catch (error) {
+            dispatch({ type: "FETCH_WORDCLOUD_REJECTED", payload: error });
+          }
+        },
+      }),
     }),
   })
   .enhanceEndpoints<"Timezones" | "LocationTree">({
@@ -84,4 +116,4 @@ const utilApi = api
     },
   });
 
-export const { useFetchTimezonesQuery, useFetchLocationTreeQuery, useFetchCountStatsQuery } = utilApi;
+export const { useFetchTimezonesQuery, useFetchLocationTreeQuery, useFetchCountStatsQuery } = util;

src/layouts/dataviz/DataVisualization.tsx

@@ -1,7 +1,7 @@
 import { Divider } from "@mantine/core";
 import React, { useEffect } from "react";
 
-import { fetchWordCloud } from "../../actions/utilActions";
+import { util } from "../../api_client/util";
 import { EventCountMonthGraph } from "../../components/charts/EventCountMonthGraph";
 import FaceClusterScatter from "../../components/charts/FaceClusterGraph";
 import { LocationDurationStackedBar } from "../../components/charts/LocationDurationStackedBar";
@@ -31,7 +31,7 @@ export function WordClouds() {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    fetchWordCloud(dispatch);
+    dispatch(util.endpoints.fetchWordCloud.initiate());
   }, []);
 
   return (