[frontend] POC rtk-redux-query

src/frontend/web_application/package.json

@@ -47,7 +47,8 @@
   "dependencies": {
     "@babel/runtime": "^7.12.13",
     "@lingui/react": "^2.9.1",
-    "@reduxjs/toolkit": "^1.5.0",
+    "@reduxjs/toolkit": "^1.5.1",
+    "@rtk-incubator/rtk-query": "^0.3.0",
     "argv": "^0.0.2",
     "async-validator": "^3.2.4",
     "axios": "^0.20.0",
@@ -64,6 +65,7 @@
     "foundation-sites": "~6.3.0",
     "history": "^4.10.1",
     "iron": "4.0.5",
+    "isomorphic-fetch": "^3.0.0",
     "jquery": "^3.5.0",
     "jssha": "^2.3.1",
     "linkifyjs": "^2.1.9",

src/frontend/web_application/src/modules/contact/components/ContactList/components/ContactItem/index.tsx

@@ -2,11 +2,8 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { Trans, withI18n, withI18nProps } from '@lingui/react';
 import { ContactAvatarLetter, SIZE_MEDIUM } from 'src/modules/avatar';
-import {
-  getCleanedTagCollection,
-  getTagLabel,
-  useTags,
-} from 'src/modules/tags';
+import { getCleanedTagCollection, getTagLabel } from 'src/modules/tags';
+import { useGetTagsQuery } from 'src/modules/tags/store';
 import { Button, Link, TextBlock, Icon, Checkbox, Badge } from 'src/components';
 import { formatName } from 'src/services/contact';
 import { ContactPayload } from 'src/modules/contact/types';
@@ -102,7 +99,7 @@ function ContactItem({
   selectDisabled,
   i18n,
 }: Props) {
-  const { tags } = useTags();
+  const { data: tags = [] } = useGetTagsQuery();
   const { contact_display_format } = useSettings();
 
   const onCheckboxChange = (ev) => {

src/frontend/web_application/src/modules/importance/index.ts

@@ -0,0 +1 @@
+export * as store from './store';

src/frontend/web_application/src/modules/importance/store/index.ts

@@ -0,0 +1 @@
+export * from './selectors';

src/frontend/web_application/src/modules/importance/store/selectors.ts

@@ -0,0 +1,4 @@
+import { RootState } from 'src/store/reducer';
+
+export const importanceLevelSelector = (state: RootState) =>
+  state.importanceLevel.range;

src/frontend/web_application/src/modules/tags/actions/updateTagCollection/index.js → src/frontend/web_application/src/modules/tags/actions/updateTagCollection/index.ts

@@ -8,9 +8,10 @@ import {
   updateTags as updateContactTags,
 } from 'src/modules/contact/store/reducer';
 import { tryCatchAxiosPromise } from '../../../../services/api-client';
-import { requestTags } from '../requestTags';
-import { createTag } from '../createTag';
 import { getTagLabel } from '../../services/getTagLabel';
+import { tagsApi } from '../../store';
+import { AppDispatch } from 'src/types';
+import { TagCommon } from '../../types';
 
 const getUpdateAction = (type) => {
   switch (type) {
@@ -26,6 +27,7 @@ const getUpdateAction = (type) => {
 export const updateTags = (type, entity, { tags }) => (dispatch) => {
   const action = getUpdateAction(type);
 
+  // @ts-ignore: cf. store typing
   return tryCatchAxiosPromise(dispatch(action({ [type]: entity, tags })));
 };
 
@@ -34,11 +36,16 @@ const getTagFromLabel = (i18n, tags, label) =>
     (tag) => getTagLabel(i18n, tag).toLowerCase() === label.toLowerCase()
   );
 
-const createMissingTags = (i18n, tagCollection) => async (
-  dispatch,
+const createMissingTags = (i18n, tagCollection: TagCommon[]) => async (
+  dispatch: AppDispatch,
   getState
 ) => {
-  const { tags: userTags } = getState().tag;
+  // @ts-ignore: cf. reducer typing
+  const { data: { tags: userTags } = { tags: [] } } = await dispatch(
+    // @ts-ignore: cf.axios-middleware typing
+    tagsApi.endpoints.getTags.initiate()
+  );
+
   const knownLabels = userTags.map((tag) =>
     getTagLabel(i18n, tag).toLowerCase()
   );
@@ -52,9 +59,13 @@ const createMissingTags = (i18n, tagCollection) => async (
     return userTags;
   }
 
-  await Promise.all(newTags.map((tag) => dispatch(createTag(tag))));
+  await Promise.all(
+    // @ts-ignore: cf.axios-middleware typing
+    newTags.map((tag) => dispatch(tagsApi.endpoints.createTag.initiate(tag)))
+  );
 
-  return dispatch(requestTags());
+  // @ts-ignore: cf.axios-middleware typing
+  return dispatch(tagsApi.endpoints.getTags.initiate());
 };
 
 const getRequestEntityAct = (type) => {
@@ -71,8 +82,15 @@ const getRequestEntityAct = (type) => {
 export const updateTagCollection = (
   i18n,
   { type, entity, tags: tagCollection, lazy = false }
-) => async (dispatch) => {
-  const upToDateTags = await dispatch(createMissingTags(i18n, tagCollection));
+) => async (dispatch: AppDispatch) => {
+  // @ts-ignore: cf.axios-middleware typing
+  await dispatch(createMissingTags(i18n, tagCollection));
+  // @ts-ignore: cf. reducer typing
+  const { data: { tags: upToDateTags } = { tags: [] } } = await dispatch(
+    // @ts-ignore: cf.axios-middleware typing
+    tagsApi.endpoints.getTags.initiate()
+  );
+
   const normalizedTags = tagCollection.reduce(
     (acc, tag) => [
       ...acc,
@@ -81,29 +99,26 @@ export const updateTagCollection = (
     []
   );
   const tagNames = normalizedTags.map((tag) => tag.name);
-
   if (
     !isEqual(
       entity.tags,
       tagCollection.map((tag) => tag.name)
     )
   ) {
     await dispatch(
+      // @ts-ignore: cf.axios-middleware typing
       updateTags(type, entity, {
         tags: tagNames,
       })
     );
-
     if (lazy) {
       return {
         ...entity,
         tags: tagNames,
       };
     }
     const request = getRequestEntityAct(type);
-
     return tryCatchAxiosPromise(dispatch(request(entity[`${type}_id`])));
   }
-
   return entity;
 };

src/frontend/web_application/src/modules/tags/components/WithTags/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useGetTagsQuery } from '../../store';
+import { TagPayload } from '../../types';
+
+interface WithTagsProps {
+  render: (tag: TagPayload[]) => React.ReactNode;
+}
+
+const EMPTY_ARRAY: TagPayload[] = [];
+export default function WithTags({ render }: WithTagsProps) {
+  const { data: { tags } = { tags: EMPTY_ARRAY } } = useGetTagsQuery();
+
+  return render(tags);
+}

src/frontend/web_application/src/modules/tags/index.ts

@@ -3,13 +3,7 @@ export { default as TagItem } from './components/TagItem';
 export { default as TagFieldGroup } from './components/TagFieldGroup';
 export { default as TagsForm } from './components/TagsForm';
 export { default as WithTags } from './components/WithTags';
-export { default as withTagActions } from './hoc/withTagActions';
 export { default as withTags } from './hoc/withTags';
-export * from './hooks/useTags';
-export { requestTags } from './actions/requestTags';
-export { updateTag } from './actions/updateTag';
-export * from './actions/createTag';
-export * from './actions/deleteTag';
 export * from './actions/updateTagCollection';
 export * from './actions/updateMessagesTags';
 export * from './actions/updateContactTags';