#175 hotfix renew token cms

fdhhhdjd · Mar 25, 2023 · 23db67c · 23db67c
1 parent cb1eb9d
commit 23db67c
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 68 deletions.
diff --git a/frontend-manager-cms/package-lock.json b/frontend-manager-cms/package-lock.json
diff --git a/frontend-manager-cms/package.json b/frontend-manager-cms/package.json
@@ -19,6 +19,7 @@
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.1",
     "nanoid": "^4.0.1",
+    "nprogress": "^0.2.0",
     "postcss": "^8.4.21",
     "react": "^17.0.2",
     "react-bootstrap": "^2.7.2",
@@ -27,6 +28,7 @@
     "react-dom": "^17.0.2",
     "react-dropdown-date": "^2.2.7",
     "react-google-recaptcha": "^2.1.0",
+    "react-hook-form": "^7.43.7",
     "react-icons": "^4.3.1",
     "react-lazy-load-image-component": "^1.5.5",
     "react-redux": "^7.2.6",

diff --git a/frontend-manager-cms/src/App.js b/frontend-manager-cms/src/App.js
@@ -28,6 +28,7 @@ import { NotFound } from 'imports/notfound_import/index';
 import Navigate from 'custom_hook/useNavigate/Navigate';
 import { useDispatch } from 'react-redux';
 import { Renew_Token_Cms_Initial } from 'redux/managers/authentication_slice/auth_thunk';
+import { useEffect } from 'react';
 
 function App() {
   // Navigate
@@ -51,13 +52,18 @@ function App() {
         !originalConfig._retry &&
         !isRefreshing
       ) {
-        originalConfig._retry = CONSTANTS.DELETED_ENABLE;
+        originalConfig._retry = CONSTANTS.DELETED_DISABLE;
         originalConfig.headers = { ...originalConfig.headers };
 
         setIsRefreshing(true);
 
         try {
-          dispatch(Renew_Token_Cms_Initial());
+          const response = await axios.get(`${API_ADMIN.RENEW_TOKEN_CMS}`, {
+            headers: HELPERS.headerBrowser(),
+            withCredentials: CONSTANTS.DELETED_ENABLE,
+          });
+          // Save LocalStorage
+          setToken(CONSTANTS.AUTH_TOKEN, response?.data?.element?.result?.access_token);
 
           setIsRefreshing(false);
 

diff --git a/frontend-manager-cms/src/api/api_media.js b/frontend-manager-cms/src/api/api_media.js
@@ -0,0 +1,15 @@
+const API_MEDIA = {
+  /**
+   * @author Châu Gia Bảo
+   * @created_at 24/03/2023
+   * @descriptionKey API Upload Media
+   */
+  UPLOAD_MEDIA: '/media/v1/media/private/upload',
+  /**
+   * @author Châu Gia Bảo
+   * @created_at 24/03/2023
+   * @descriptionKey API Remove Media
+   */
+  REMOVE_MEDIA: '/media/v1/media/private/remove',
+};
+export default API_MEDIA;
diff --git a/frontend-manager-cms/src/context/global_context.js b/frontend-manager-cms/src/context/global_context.js
@@ -1,18 +1,11 @@
 //! LIBRARY
-import { createContext, useContext, useEffect } from 'react';
+import { createContext, useContext } from 'react';
 
 //! SHARE
-import CONSTANTS from 'configs/constants';
-import { getToken } from 'utils/auth';
 
 //! CONTEXT CHILD
-import { useDispatch } from 'react-redux';
-import HELPERS from 'utils/helper';
 // import AuthStudent from './auth_cms/auth_cms';
 
-//! REDUX THUNK CALL API
-import { Renew_Token_Cms_Initial } from 'redux/managers/authentication_slice/auth_thunk';
-
 /**
  * @author Nguyễn Tiến Tài
  * @created_at 03/03/2023

diff --git a/frontend-manager-cms/src/custom_hook/useUpload/uploadMediaCloud.jsx b/frontend-manager-cms/src/custom_hook/useUpload/uploadMediaCloud.jsx
@@ -0,0 +1,45 @@
+//!LIBRARY
+import { useDispatch } from 'react-redux';
+
+//!REDUX THUNK
+import { Upload_Media_Initial } from 'redux/media/upload_remove_media/media_thunk';
+
+//!SHARE
+import CONSTANTS from 'configs/constants';
+import NOTIFICATION from 'utils/notification';
+
+const useUploadCloud = () => {
+  const dispatch = useDispatch();
+
+  const handleUpload = (e) => {
+    e.preventDefault();
+    try {
+      // Check input file
+      const file = e.target.files[0];
+      if (!file) return NOTIFICATION.notifyError('File not Exists');
+
+      if (file.size > 1024 * 1024)
+        // 1mb
+        return NOTIFICATION.notifyError('Size too large !');
+
+      //Check type file
+      if (file.type !== CONSTANTS.MEDIA_TYPE.JPEG && file.type !== CONSTANTS.MEDIA_TYPE.PNG) {
+        // 1mb
+        return NOTIFICATION.notifyError('File format is incorrect.');
+      }
+
+      // Create Form data save image computer
+      let formData = new FormData();
+      formData.append(CONSTANTS.MEDIA_TYPE.FILE, file);
+
+      //Action upload
+      dispatch(Upload_Media_Initial({ formData }));
+    } catch (error) {
+      console.log(error);
+      NOTIFICATION.notifyError(error.response.data.msg);
+    }
+  };
+  return { handleUpload };
+};
+
+export default useUploadCloud;
diff --git a/frontend-manager-cms/src/index.js b/frontend-manager-cms/src/index.js
@@ -18,11 +18,13 @@ import store from 'redux/store';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { DataProviderCMS } from 'context/global_context';
+import RouterNprogress from 'plugins/Nprogress/RouterNprogress';
 
 ReactDOM.render(
   <Provider store={store}>
     <DataProviderCMS>
       <Router>
+        <RouterNprogress />
         <App />
       </Router>
     </DataProviderCMS>

diff --git a/frontend-manager-cms/src/pages/Author/EditAuthor.jsx b/frontend-manager-cms/src/pages/Author/EditAuthor.jsx
@@ -12,6 +12,7 @@ const EditAuthor = () => {
   const detailAuthor = useSelector((state) => state.author.detail_author?.element?.result);
   const [selectedFile, setSelectedFile] = useState();
   const [preview, setPreview] = useState();
+  const [detail, setDetail] = useState(null);
 
   const onSelectFile = (e) => {
     if (!e.target.files || e.target.files.length === 0) {
@@ -25,7 +26,7 @@ const EditAuthor = () => {
 
   useEffect(() => {
     dispatch(Get_Detail_Author_Cms_Initial({ id }));
-  }, []);
+  }, [dispatch, id]);
 
   useEffect(() => {
     setPreview(detailAuthor?.avatar_uri);
@@ -44,7 +45,9 @@ const EditAuthor = () => {
     return () => URL.revokeObjectURL(objectUrl);
   }, [selectedFile, detailAuthor?.avatar_uri]);
 
-  console.log(moment(detailAuthor?.dob).date());
+  useEffect(() => {
+    setDetail(detailAuthor);
+  }, [detailAuthor]);
 
   return (
     <form className="w-full mt-10" autoComplete="nope">
@@ -59,7 +62,7 @@ const EditAuthor = () => {
                 className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                 id="grid-id"
                 type="text"
-                defaultValue={detailAuthor?.author_id}
+                defaultValue={detail?.author_id}
                 disabled
                 readOnly
               />
@@ -74,7 +77,7 @@ const EditAuthor = () => {
                 className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                 id="name"
                 type="text"
-                defaultValue={detailAuthor?.name}
+                defaultValue={detail?.name}
                 placeholder="Gia Bảo..."
               />
             </div>
@@ -89,13 +92,13 @@ const EditAuthor = () => {
                   className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                   id="gender"
                 >
-                  <option value={1} selected={detailAuthor?.gender === 1}>
+                  <option defaultValue={1} selected={detail?.gender === 1}>
                     Nam
                   </option>
-                  <option value={0} selected={detailAuthor?.gender === 0}>
+                  <option defaultValue={0} selected={detail?.gender === 0}>
                     Nữ
                   </option>
-                  <option value={3} selected={detailAuthor?.gender === 3}>
+                  <option defaultValue={3} selected={detail?.gender === 3}>
                     Khác
                   </option>
                 </select>
@@ -126,7 +129,7 @@ const EditAuthor = () => {
               </label>
               <div className="date-picker">
                 <DayPicker
-                  defaultValue={moment(detailAuthor?.dob).date()}
+                  defaultValue={moment(detail?.dob).date()}
                   year={date.year} // mandatory
                   month={date.month} // mandatory
                   endYearGiven // mandatory if end={} is given in YearPicker
@@ -140,7 +143,7 @@ const EditAuthor = () => {
                 />
 
                 <MonthPicker
-                  defaultValue={moment(detailAuthor?.dob).month() + 1}
+                  defaultValue={moment(detail?.dob).month() + 1}
                   numeric // to get months as numbers
                   endYearGiven // mandatory if end={} is given in YearPicker
                   year={date.year} // mandatory
@@ -154,7 +157,7 @@ const EditAuthor = () => {
                 />
 
                 <YearPicker
-                  defaultValue={moment(detailAuthor?.dob).year()}
+                  defaultValue={moment(detail?.dob).year()}
                   start={1980} // default is 1900
                   end={2023} // default is current year
                   reverse // default is ASCENDING