@akemona-org/strapi-plugin-i18n 3.7.0

package/admin/src/containers/SettingsPage/tests/__snapshots__/SettingsPage.test.js.snap

@@ -0,0 +1,241 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`i18n settings page permissions shows nothing when the user doesn't have read permission 1`] = `
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 15px;
+  font-weight: 600;
+  font-size: 1.3rem;
+  border-radius: 2px;
+  cursor: pointer;
+  outline: 0;
+  background-color: #ffffff;
+  background-color: #007EFF;
+  border: 1px solid #007EFF;
+  color: #ffffff;
+}
+
+.c3:hover,
+.c3:active {
+  -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
+  box-shadow: inset 0 0 30px [object Object];
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c3 > span svg {
+  font-size: 10px;
+}
+
+.c3 > svg {
+  height: 10px;
+  width: auto;
+  margin-right: 10px;
+}
+
+.c0 {
+  margin-bottom: 30px;
+  position: relative;
+  width: 100%;
+  height: 50px;
+}
+
+.c0 .justify-content-end {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c0 .header-title p {
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.3rem;
+  font-weight: 400;
+  line-height: normal;
+  color: #787e8f;
+}
+
+.c0 .sticky {
+  position: fixed;
+  top: 0;
+  left: 30.6rem;
+  z-index: 1050;
+  background-color: white;
+  width: calc(100vw - 30.6rem);
+  padding-right: 15px;
+  height: 60px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c0 .sticky .row {
+  width: 100%;
+  margin: auto;
+  margin-top: 16px;
+}
+
+.c0 .sticky .row .header-title p {
+  display: none;
+}
+
+.c0 .sticky .row > div > div {
+  padding-top: 0;
+}
+
+.c0 .sticky .row > div > div h1 {
+  font-size: 2rem;
+}
+
+.c0 .sticky .row > div > div h1 svg {
+  margin-top: 8px;
+}
+
+.c0 .sticky .row > div > div button {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 100%;
+  padding-top: 1rem;
+}
+
+.c2 > button {
+  margin-right: 0;
+  margin-left: 1rem;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  outline: 0;
+}
+
+.c1 {
+  position: relative;
+  padding-top: 0.5rem;
+}
+
+.c1 h1 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 100%;
+  margin-bottom: 0;
+  padding-right: 18px;
+  font-size: 2.4rem;
+  line-height: normal;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c1 svg {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-top: 12px;
+  font-size: 12px;
+  color: rgba(16,22,34,0.35);
+  cursor: pointer;
+  outline: 0;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="sticky-wrapper"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col-sm-6 header-title"
+        >
+          <div
+            class="c1"
+          >
+            <h1>
+              Plugin.name
+            </h1>
+          </div>
+          <p>
+            Settings.list.description
+          </p>
+        </div>
+        <div
+          class="col-sm-6 justify-content-end"
+        >
+          <div
+            class="c2"
+          >
+            <button
+              class="c3"
+              color="primary"
+              style="padding-left: 15px; padding-right: 15px;"
+              type="button"
+            >
+              <svg
+                fill="#ffffff"
+                height="11px"
+                viewBox="0 0 13 13"
+                width="11px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <path
+                    d="M6.5.5v12m6-6H.5"
+                    fill="none"
+                    stroke="#ffffff"
+                    stroke-linecap="round"
+                  />
+                </g>
+              </svg>
+              Settings.list.actions.add
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div />
+</div>
+`;

package/admin/src/hooks/constants.js

@@ -0,0 +1,6 @@
+import pluginId from '../pluginId';
+
+export const RESOLVE_LOCALES = `${pluginId}/locales/resolve-locales`;
+export const ADD_LOCALE = `${pluginId}/locales/add`;
+export const DELETE_LOCALE = `${pluginId}/locales/delete`;
+export const UPDATE_LOCALE = `${pluginId}/locales/update`;

package/admin/src/hooks/reducers.js

@@ -0,0 +1,63 @@
+import produce from 'immer';
+import set from 'lodash/set';
+import pluginId from '../pluginId';
+import { RESOLVE_LOCALES, ADD_LOCALE, DELETE_LOCALE, UPDATE_LOCALE } from './constants';
+
+export const initialState = {
+  isLoading: true,
+  locales: [],
+};
+
+const localeReducer = produce((draftState = initialState, action) => {
+  switch (action.type) {
+    case RESOLVE_LOCALES: {
+      draftState.isLoading = false;
+      draftState.locales = action.locales;
+      break;
+    }
+
+    case ADD_LOCALE: {
+      if (action.newLocale.isDefault) {
+        draftState.locales.forEach(locale => {
+          locale.isDefault = false;
+        });
+      }
+
+      draftState.locales.push(action.newLocale);
+      break;
+    }
+
+    case DELETE_LOCALE: {
+      const locales = draftState.locales.filter(locale => locale.id !== action.id);
+
+      set(draftState, 'locales', locales);
+      break;
+    }
+
+    case UPDATE_LOCALE: {
+      if (action.editedLocale.isDefault) {
+        draftState.locales.forEach(locale => {
+          locale.isDefault = false;
+        });
+      }
+
+      const indexToEdit = draftState.locales.findIndex(
+        locale => locale.id === action.editedLocale.id
+      );
+
+      set(draftState.locales, indexToEdit, action.editedLocale);
+      break;
+    }
+
+    default:
+      return draftState;
+  }
+
+  return draftState;
+});
+
+const reducers = {
+  [`${pluginId}_locales`]: localeReducer,
+};
+
+export default reducers;

package/admin/src/hooks/tests/reducers.test.js

@@ -0,0 +1,203 @@
+import reducers, { initialState } from '../reducers';
+import { RESOLVE_LOCALES, ADD_LOCALE, DELETE_LOCALE, UPDATE_LOCALE } from '../constants';
+
+describe('i18n reducer', () => {
+  it('resolves the initial state when the action is not known', () => {
+    const action = {
+      type: 'UNKNWON_ACTION',
+    };
+
+    const actual = reducers.i18n_locales(initialState, action);
+    const expected = initialState;
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('resolves a list of locales when triggering RESOLVE_LOCALES', () => {
+    const action = {
+      type: RESOLVE_LOCALES,
+      locales: [{ id: 1, displayName: 'French', isDefault: false }],
+    };
+
+    const actual = reducers.i18n_locales(initialState, action);
+    const expected = {
+      isLoading: false,
+      locales: [
+        {
+          displayName: 'French',
+          id: 1,
+          isDefault: false,
+        },
+      ],
+    };
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('adds a locale when triggering ADD_LOCALE', () => {
+    const action = {
+      type: ADD_LOCALE,
+      newLocale: { id: 1, displayName: 'French', isDefault: false },
+    };
+
+    const actual = reducers.i18n_locales(initialState, action);
+    const expected = {
+      isLoading: true,
+      locales: [
+        {
+          displayName: 'French',
+          id: 1,
+          isDefault: false,
+        },
+      ],
+    };
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('adds a locale when triggering ADD_LOCALE and set it to default', () => {
+    const action = {
+      type: ADD_LOCALE,
+      newLocale: { id: 1, displayName: 'French', isDefault: true },
+    };
+
+    const locales = [
+      {
+        displayName: 'English',
+        id: 2,
+        isDefault: true,
+      },
+    ];
+
+    const actual = reducers.i18n_locales({ ...initialState, locales }, action);
+    const expected = {
+      isLoading: true,
+      locales: [
+        {
+          displayName: 'English',
+          id: 2,
+          isDefault: false,
+        },
+        {
+          displayName: 'French',
+          id: 1,
+          isDefault: true,
+        },
+      ],
+    };
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('removes a locale when triggering DELETE_LOCALE ', () => {
+    const action = {
+      type: DELETE_LOCALE,
+      id: 2,
+    };
+
+    const locales = [
+      {
+        displayName: 'French',
+        id: 1,
+        isDefault: true,
+      },
+      {
+        displayName: 'English',
+        id: 2,
+        isDefault: false,
+      },
+    ];
+
+    const actual = reducers.i18n_locales({ ...initialState, locales }, action);
+    const expected = {
+      isLoading: true,
+      locales: [
+        {
+          displayName: 'French',
+          id: 1,
+          isDefault: true,
+        },
+      ],
+    };
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('updates a locale when triggering UPDATE_LOCALE', () => {
+    const action = {
+      type: UPDATE_LOCALE,
+      editedLocale: { id: 1, displayName: 'Frenchie', isDefault: false },
+    };
+
+    const locales = [
+      {
+        displayName: 'English',
+        id: 2,
+        isDefault: true,
+      },
+      {
+        displayName: 'French',
+        id: 1,
+        isDefault: false,
+      },
+    ];
+
+    const actual = reducers.i18n_locales({ ...initialState, locales }, action);
+    const expected = {
+      isLoading: true,
+      locales: [
+        {
+          displayName: 'English',
+          id: 2,
+          isDefault: true,
+        },
+        {
+          displayName: 'Frenchie',
+          id: 1,
+          isDefault: false,
+        },
+      ],
+    };
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('updates a locale when triggering UPDATE_LOCALE and set it to default', () => {
+    const action = {
+      type: UPDATE_LOCALE,
+      editedLocale: { id: 1, displayName: 'Frenchie', isDefault: true },
+    };
+
+    const locales = [
+      {
+        displayName: 'English',
+        id: 2,
+        isDefault: true,
+      },
+      {
+        displayName: 'French',
+        id: 1,
+        isDefault: false,
+      },
+    ];
+
+    const actual = reducers.i18n_locales({ ...initialState, locales }, action);
+    const expected = {
+      isLoading: true,
+      locales: [
+        {
+          displayName: 'English',
+          id: 2,
+          isDefault: false,
+        },
+        {
+          displayName: 'Frenchie',
+          id: 1,
+          isDefault: true,
+        },
+      ],
+    };
+
+    expect(actual).toEqual(expected);
+  });
+});

package/admin/src/hooks/useAddLocale/index.js

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { request } from 'strapi-helper-plugin';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { getTrad } from '../../utils';
+import { ADD_LOCALE } from '../constants';
+
+const addLocale = async ({ code, name, isDefault }) => {
+  const data = await request(`/i18n/locales`, {
+    method: 'POST',
+    body: {
+      name,
+      code,
+      isDefault,
+    },
+  });
+
+  strapi.notification.toggle({
+    type: 'success',
+    message: { id: getTrad('Settings.locales.modal.create.success') },
+  });
+
+  return data;
+};
+
+const useAddLocale = () => {
+  const [isLoading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  const persistLocale = async locale => {
+    setLoading(true);
+
+    try {
+      const newLocale = await addLocale(locale);
+      dispatch({ type: ADD_LOCALE, newLocale });
+    } catch (e) {
+      const message = get(e, 'response.payload.message', null);
+
+      if (message && message.includes('already exists')) {
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: getTrad('Settings.locales.modal.create.alreadyExist') },
+        });
+      } else {
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      }
+
+      throw e;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { isAdding: isLoading, addLocale: persistLocale };
+};
+
+export default useAddLocale;

package/admin/src/hooks/useContentTypePermissions/index.js

@@ -0,0 +1,16 @@
+import { useSelector } from 'react-redux';
+import selectCollectionTypesRelatedPermissions from '../../selectors/selectCollectionTypesRelatedPermissions';
+
+const useContentTypePermissions = slug => {
+  const collectionTypesRelatedPermissions = useSelector(selectCollectionTypesRelatedPermissions);
+
+  const currentCTRelatedPermissions = collectionTypesRelatedPermissions[slug];
+  const readPermissions =
+    currentCTRelatedPermissions['plugins::content-manager.explorer.read'] || [];
+  const createPermissions =
+    currentCTRelatedPermissions['plugins::content-manager.explorer.create'] || [];
+
+  return { createPermissions, readPermissions };
+};
+
+export default useContentTypePermissions;

package/admin/src/hooks/useDefaultLocales/index.js

@@ -0,0 +1,27 @@
+import { useQuery } from 'react-query';
+import { request } from 'strapi-helper-plugin';
+
+const fetchDefaultLocalesList = async () => {
+  try {
+    const data = await request('/i18n/iso-locales', {
+      method: 'GET',
+    });
+
+    return data;
+  } catch (e) {
+    strapi.notification.toggle({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return [];
+  }
+};
+
+const useDefaultLocales = () => {
+  const { isLoading, data } = useQuery('default-locales', fetchDefaultLocalesList);
+
+  return { defaultLocales: data, isLoading };
+};
+
+export default useDefaultLocales;

package/admin/src/hooks/useDeleteLocale/index.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { request } from 'strapi-helper-plugin';
+import { useDispatch } from 'react-redux';
+import { getTrad } from '../../utils';
+import { DELETE_LOCALE } from '../constants';
+
+const deleteLocale = async id => {
+  try {
+    const data = await request(`/i18n/locales/${id}`, {
+      method: 'DELETE',
+    });
+
+    strapi.notification.toggle({
+      type: 'success',
+      message: { id: getTrad('Settings.locales.modal.delete.success') },
+    });
+
+    return data;
+  } catch (e) {
+    strapi.notification.toggle({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return e;
+  }
+};
+
+const useDeleteLocale = () => {
+  const [isLoading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  const removeLocale = async id => {
+    setLoading(true);
+
+    await deleteLocale(id);
+
+    dispatch({ type: DELETE_LOCALE, id });
+    setLoading(false);
+  };
+
+  return { isDeleting: isLoading, deleteLocale: removeLocale };
+};
+
+export default useDeleteLocale;

package/admin/src/hooks/useEditLocale/index.js

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { request } from 'strapi-helper-plugin';
+import { useDispatch } from 'react-redux';
+import { getTrad } from '../../utils';
+import { UPDATE_LOCALE } from '../constants';
+
+const editLocale = async (id, payload) => {
+  try {
+    const data = await request(`/i18n/locales/${id}`, {
+      method: 'PUT',
+      body: payload,
+    });
+
+    strapi.notification.toggle({
+      type: 'success',
+      message: { id: getTrad('Settings.locales.modal.edit.success') },
+    });
+
+    return data;
+  } catch {
+    strapi.notification.toggle({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return null;
+  }
+};
+
+const useEditLocale = () => {
+  const [isLoading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  const modifyLocale = async (id, payload) => {
+    setLoading(true);
+
+    const editedLocale = await editLocale(id, payload);
+
+    dispatch({ type: UPDATE_LOCALE, editedLocale });
+    setLoading(false);
+  };
+
+  return { isEditing: isLoading, editLocale: modifyLocale };
+};
+
+export default useEditLocale;