Made some subtle changes to ui

inshapardaz · Dec 22, 2023 · 8a09ac1 · 8a09ac1
1 parent 6c00deb
commit 8a09ac1
Show file tree

Hide file tree

Showing 12 changed files with 8,232 additions and 5,675 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,41 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^5.1.4",
-    "@lexical/clipboard": "^0.11.3",
-    "@lexical/file": "^0.11.3",
-    "@lexical/list": "^0.11.3",
-    "@lexical/mark": "^0.11.3",
-    "@lexical/overflow": "^0.11.3",
-    "@lexical/react": "^0.11.3",
-    "@lexical/rich-text": "^0.11.3",
-    "@lexical/selection": "^0.11.3",
-    "@lexical/table": "^0.11.3",
-    "@lexical/utils": "^0.11.3",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "antd": "^5.11.1",
-    "antd-img-crop": "^4.17.0",
+    "@ant-design/icons": "^5.2.6",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "antd": "^5.12.2",
+    "antd-img-crop": "^4.18.0",
     "async-mutex": "^0.4.0",
-    "axios": "^1.4.0",
-    "i18next": "^23.2.3",
-    "lexical": "^0.11.3",
+    "axios": "^1.6.2",
+    "i18next": "^23.7.11",
     "moment": "^2.29.4",
     "pdfjs-dist": "^4.0.269",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.2.0",
+    "react-hotkeys-hook": "^4.4.1",
+    "react-i18next": "^13.5.0",
     "react-icons": "^4.12.0",
-    "react-markdown": "^8.0.5",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.8.1",
+    "react-markdown": "^9.0.1",
+    "react-redux": "^9.0.4",
+    "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1",
-    "sass": "^1.58.3",
+    "sass": "^1.69.5",
+    "urdu-web-editor": "1.0.0-beta.3",
     "usehooks-ts": "^2.9.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/components/books/pages/PageImageEditor.jsx b/src/components/books/pages/PageImageEditor.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useHotkeys } from 'react-hotkeys-hook';
 
 // 3rd party libraries
 import { Button, Card, Space, Slider, Switch, Tooltip, Result } from "antd";
@@ -25,11 +26,18 @@ export const PageImageEditor = ({ image, t, zoom = 100, onUpdate = () => { } })
         setDirty(true)
     };
 
+    //------------------------------------------------------
+    useHotkeys('ctrl+keyup', () => setSliderValue(e => e + 10), { enabled : checked, preventDefault: true })
+    useHotkeys('ctrl+keydown', () => setSliderValue(e => e - 10), { enabled: checked, preventDefault: true })
+    useHotkeys('ctrl+shift+v', () => setChecked(true), { enabled: !checked })
+    useHotkeys('alt+ctrl+s', () => save(), { enabled: !checked, preventDefault: true })
+    //------------------------------------------------------
+
     useEffect(() => {
         setChecked(image?.split);
         setSliderValue(Number((image?.splitValue ? (image?.splitValue * max) / 100 : max / 2).toFixed()));
         setDirty(false)
-    }, [image?.split, image?.splitValue]);
+    }, [image, image?.split, image?.splitValue]);
 
     if (!image) {
         return (<Result
@@ -44,14 +52,15 @@ export const PageImageEditor = ({ image, t, zoom = 100, onUpdate = () => { } })
         newImage.splitValue = (sliderValue / max) * 100;
         onUpdate(newImage);
     };
+
     //------------------------------------------------------
     const toolbar = (<Space>
         {t('book.actions.split.title')}
         <Switch
             size="small"
             checked={checked}
             onChange={onChangeSplit} />
-        <Tooltip title={t('actions.save')}>
+        <Tooltip title={t('actions.save') } >
             <Button onClick={save} icon={<FaRegSave />}  disabled={!dirty} />
         </Tooltip>
     </Space>);

diff --git a/src/components/layout/dataContainer.jsx b/src/components/layout/dataContainer.jsx
@@ -21,6 +21,7 @@ const DataContainer = ({
     actions,
     extra,
     bordered = true,
+    style = null,
     children,
 }) => {
     const content = error ? (
@@ -46,6 +47,7 @@ const DataContainer = ({
             bordered={bordered}
             className={styles["api_container"]}
             loading={busy && !busyContent}
+            style={style}
         >
             {content}
         </Card>

diff --git a/src/editor/editor.module.scss b/src/editor/editor.module.scss
diff --git a/src/editor/index.jsx b/src/editor/index.jsx
diff --git a/src/features/api/booksSlice.js b/src/features/api/booksSlice.js
@@ -303,7 +303,7 @@ export const booksApi = createApi({
                     }
                 });
             },
-            invalidatesTags: [ 'BookPages' ]
+            invalidatesTags: [ 'Book', 'BookPages' ]
         }),
         addBookContent: builder.mutation({
             query: ({ book, payload }) => {

diff --git a/src/helpers/axios.helpers.js b/src/helpers/axios.helpers.js
@@ -1,25 +1,36 @@
 import axios from "axios";
+import { Mutex } from 'async-mutex';
 
 import { store } from "../store";
 import { refreshToken } from '../features/auth/authSlice'
 
 export const axiosPublic = axios.create({ baseURL: process.env.REACT_APP_API_URL });
 export const axiosPrivate = axios.create({ baseURL: process.env.REACT_APP_API_URL });
 
+const mutex = new Mutex();
+
 axiosPrivate.interceptors.request.use(
   async (config) => {
-    const user = store?.getState()?.auth?.user;
-    let currentDate = new Date();
-    if (user?.accessToken) {
-      if (new Date(user.accessTokenExpiry) < currentDate.getTime()) {
-        await store.dispatch(refreshToken());
-      }
+    await mutex.waitForUnlock()
+    const release = await mutex.acquire()
+
+      try {
+        const user = store?.getState()?.auth?.user;
+        let currentDate = new Date();
+        if (user?.accessToken) {
+          if (new Date(user.accessTokenExpiry) < currentDate.getTime()) {
+            await store.dispatch(refreshToken());
+          }
 
-      if (config?.headers) {
-        config.headers["authorization"] = `Bearer ${store?.getState()?.auth?.user?.accessToken
-          }`;
+          if (config?.headers) {
+            config.headers["authorization"] = `Bearer ${store?.getState()?.auth?.user?.accessToken
+              }`;
+          }
+        }
+      }
+      finally {
+        release()
       }
-    }
     return config;
   },
   (error) => {
@@ -28,17 +39,11 @@ axiosPrivate.interceptors.request.use(
 );
 
 
-export const axiosBaseQuery = () =>
-    async ({ url, method, payload, params, headers = {
-                'content-type': 'application/json'
-              }}) => {
-        try {
-          const result = await axiosPrivate(url, {
-              method,
-              data: payload,
-              headers,
-              params
-          })
+export const axiosBaseQuery =
+  ({ baseUrl } = { baseUrl: process.env.REACT_APP_API_URL }) =>
+    async ({ url, method, data, params }) => {
+      try {
+        const result = await axiosPrivate({ url: baseUrl + url, method, data, params })
         return result
       } catch (axiosError) {
         let err = axiosError

diff --git a/src/i18n/ur.js b/src/i18n/ur.js
@@ -28,7 +28,7 @@ const ur = {
         "cancel": "اخراج",
         "resizeImage": "تصویر کی تدوین",
         "zoonIn": "زوم ان",
-        "zoonOut": "زوق آؤٹ",
+        "zoonOut": "زوم آؤٹ",
         "next": "اگلا",
         "previous": "پچھلا"
 	},

diff --git a/src/pages/books/chapters/edit.jsx b/src/pages/books/chapters/edit.jsx
@@ -1,4 +1,11 @@
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+// 3rd party imports
+import { App, Button, Spin } from "antd";
+import Editor from 'urdu-web-editor'
+import { FaCheckCircle, FaSave } from "react-icons/fa";
 
 // Local imports
 import {
@@ -7,15 +14,17 @@ import {
     useAddChapterContentsMutation,
     useUpdateChapterContentsMutation
 } from "../../../features/api/booksSlice";
-import { App, Button, Spin } from "antd";
+import { selectedLanguage } from '../../../features/ui/uiSlice'
 import PageHeader from "../../../components/layout/pageHeader";
 import EditingStatusIcon from "../../../components/editingStatusIcon";
 import DataContainer from "../../../components/layout/dataContainer";
-import Editor from "../../../editor";
-import { useEffect, useState } from "react";
-import { FaCheckCircle, FaSave } from "react-icons/fa";
 import EditingStatus from "../../../models/editingStatus";
-import { useTranslation } from "react-i18next";
+// ------------------------------------------
+
+const EMPTY_CONTENT =
+  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
+
 
 // ----------------------------------------
 const EditChapter = () =>   {
@@ -33,6 +42,17 @@ const EditChapter = () =>   {
         { skip: !libraryId || !bookId || !chapterNumber }
     );
 
+    const editorConfiguration =   {
+        richText: true,
+        language: selectedLanguage?.key ?? 'en',
+        toolbar: {
+            showAlignment: false,
+            showFontFormat: true,
+            showInsert: true,
+            showExtraFormat: false,
+            showInsertLink: false,
+        }
+    }
     const {
         data: chapterContent,
         error: chapterContentError,
@@ -116,10 +136,9 @@ const EditChapter = () =>   {
                     actions={actions}
                 />
                 <DataContainer error={chapterError | chapterContentError}>
-                    <Editor
-                        rows={20}
-                        value={chapterContent?.content}
-                        onChange={(content) => setText(content)}
+                    <Editor configuration={editorConfiguration}
+                        value={chapterContent?.content ?? EMPTY_CONTENT }
+                        setValue={(content) => setText(content)}
                     />
                 </DataContainer>
             </Spin>

diff --git a/src/pages/books/pages/edit.jsx b/src/pages/books/pages/edit.jsx
@@ -19,6 +19,8 @@ import {
     MdImage,
 } from "react-icons/md";
 
+import Editor from 'urdu-web-editor'
+
 // Local imports
 import {
     useGetBookPageQuery,
@@ -30,7 +32,6 @@ import PageHeader from "../../../components/layout/pageHeader";
 import DataContainer from "../../../components/layout/dataContainer";
 import EditingStatusIcon from "../../../components/editingStatusIcon";
 import helpers from "../../../helpers";
-import Editor from "../../../editor";
 import PageStatus from "../../../models/pageStatus";
 import PageOcrButton from "../../../components/books/pages/pageOcrButton";
 
@@ -255,9 +256,8 @@ const PageEditPage = () => {
                     <Row gutter={16}>
                         <Col span={12} style={{display: 'flex'}}>
                             <Editor
-                                rows={20}
                                 value={text}
-                                onChange={(content) => setText(content)}
+                                setValue={(content) => setText(content)}
                             />
                         </Col>
                         {showImage && (