update main branch with latest changes

README.md

@@ -34,9 +34,9 @@ RAIR deploys each its services in a self-contained Docker image:
 
 It's the moment of truth. From the repository root, run:
 
-    docker-compose -f {dockerfile.yml} up
+    docker-compose -f docker-compose.local-new.yml up -d
 
-`{dockerfile.yml}` will be the file configured for your specific deployment. Wait for the app to build. Keep an eye on the terminal for any errors. 
+Wait for the app to build. Keep an eye on the terminal for any errors. 
 
 ## Launch the App
 

docker-compose-prod.yaml

@@ -67,6 +67,7 @@ services:
       AWS_SECRET_ACCESS_KEY: ${filebase_secret_access_key}
       FILEBASE_BUCKET: ${filebase_bucket}
       YOTI_CLIENT_ID: ${yoti_client_id}
+      RATE_LIMIT_MINUTE: ${rate_limit_minute}
     ports:
       - 3000:3000
       - 5000:5000

docker-compose-web.yml

@@ -64,6 +64,7 @@ services:
       AWS_SECRET_ACCESS_KEY: ${filebase_secret_access_key}
       FILEBASE_BUCKET: ${filebase_bucket}
       YOTI_CLIENT_ID: ${yoti_client_id}
+      RATE_LIMIT_MINUTE: ${rate_limit_minute}
     ports:
       - 3000:3000
       - 5000:5000

docker-compose.local-new.yml

@@ -53,6 +53,7 @@ services:
       AWS_SECRET_ACCESS_KEY: ${filebase_secret_access_key}
       FILEBASE_BUCKET: ${filebase_bucket}
       YOTI_CLIENT_ID: ${yoti_client_id}
+      RATE_LIMIT_MINUTE: ${rate_limit_minute}
     ports:
       - 3000:3000
       - 5000:5000

docker-compose.local-ssl-with_certbot.yml

@@ -75,6 +75,7 @@ services:
       AWS_SECRET_ACCESS_KEY: ${filebase_secret_access_key}
       FILEBASE_BUCKET: ${filebase_bucket}
       YOTI_CLIENT_ID: ${yoti_client_id}
+      RATE_LIMIT_MINUTE: ${rate_limit_minute}
     ports:
       - 3000:3000
       - 5000:5000

docker-compose.local-ssl-without_certbot.yml

@@ -66,6 +66,7 @@ services:
       AWS_SECRET_ACCESS_KEY: ${filebase_secret_access_key}
       FILEBASE_BUCKET: ${filebase_bucket}
       YOTI_CLIENT_ID: ${yoti_client_id}
+      RATE_LIMIT_MINUTE: ${rate_limit_minute}
     ports:
       - 3000:3000
       - 5000:5000

docker-compose.yml

@@ -66,6 +66,7 @@ services:
       AWS_SECRET_ACCESS_KEY: ${filebase_secret_access_key}
       FILEBASE_BUCKET: ${filebase_bucket}
       YOTI_CLIENT_ID: ${yoti_client_id}
+      RATE_LIMIT_MINUTE: ${rate_limit_minute}
     ports:
       - 3000:3000
       - 5000:5000

rair-front/package.json

@@ -24,6 +24,7 @@
     "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@getyoti/react-face-capture": "^2.3.1",

rair-front/src/App.tsx

@@ -70,7 +70,6 @@ import {
 import { detectBlockchain } from './utils/blockchainData';
 // import getInformationGoogleAnalytics from './utils/googleAnalytics';
 import gtag from './utils/gtag';
-import { rFetch } from './utils/rFetch';
 // views
 import ErrorFallback from './views/ErrorFallback/ErrorFallback';
 
@@ -105,7 +104,6 @@ function App() {
   const [tabIndexItems, setTabIndexItems] = useState(0);
   const [tokenNumber, setTokenNumber] = useState<number | undefined>(undefined);
   const navigate = useNavigate();
-  const [notificationCount, setNotificationCount] = useState<number>(0);
 
   // Redux
   const {
@@ -171,21 +169,6 @@ function App() {
     }
   }, [dispatch, logoutUser, blockchainSettings]);
 
-  const getNotificationsCount = useCallback(async () => {
-    if (isLoggedIn && currentUserAddress) {
-      const result = await rFetch(`/api/notifications?onlyUnread=true`);
-      if (result.success && result.totalCount >= 0) {
-        setNotificationCount(result.totalCount);
-      }
-    } else {
-      setNotificationCount(0);
-    }
-  }, [isLoggedIn, currentUserAddress]);
-
-  useEffect(() => {
-    getNotificationsCount();
-  }, [getNotificationsCount]);
-
   // gtag
 
   useEffect(() => {
@@ -306,8 +289,6 @@ function App() {
                 showAlert={showAlert}
                 setTabIndexItems={setTabIndexItems}
                 isAboutPage={isAboutPage}
-                notificationCount={notificationCount}
-                getNotificationsCount={getNotificationsCount}
               />
             )
           )}

rair-front/src/components/DemoMediaUpload/MediaItemChange/MediaItemChange.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import React, { useCallback, useState } from 'react';
 import {
   faCheck,
@@ -40,7 +41,8 @@ const MediaItemChange: React.FC<IMediaItemChange> = ({
 
   const closeModal = useCallback(() => {
     setModalIsOpen(false);
-  }, [setModalIsOpen]);
+    getMediaList();
+  }, [setModalIsOpen, getMediaList]);
 
   const [titleValue, setTitleValue] = useState<string>(item.title);
   const [disabledBtn, setDisabledBtn] = useState<boolean>(false);
@@ -103,25 +105,13 @@ const MediaItemChange: React.FC<IMediaItemChange> = ({
       className="media-item-title">
       {textFlag ? (
         <div>
-          <p className="col-12">
-            {item.title.length > 15
-              ? item.title.slice(0, 6) +
-                '...' +
-                item.title.slice(item.title.length - 10, 10)
-              : item.title}
-          </p>
+          <p className="col-12">{item.title}</p>
         </div>
       ) : (
         <div>
           {!editTitleVideo ? (
             <>
-              <p className="col-12">
-                {item.title.length > 15
-                  ? item.title.slice(0, 6) +
-                    '...' +
-                    item.title.slice(item.title.length - 10, 10)
-                  : item.title}
-              </p>
+              <p className="col-12">{item.title}</p>
               {newUserStatus ? (
                 <button
                   disabled={!newUserStatus}
@@ -142,7 +132,7 @@ const MediaItemChange: React.FC<IMediaItemChange> = ({
                       onClick={() => {
                         openModal();
                       }}>
-                      <FontAwesomeIcon icon={faPencilAlt} />
+                      <FontAwesomeIcon icon={faPencilAlt} /> Edit
                     </button>
                   </span>
                 </TooltipBox>

rair-front/src/components/DemoMediaUpload/PopUpChangeVideo/PopUpChangeVideo.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import React, { useCallback, useEffect, useState } from 'react';
 import Modal from 'react-modal';
 
@@ -22,9 +23,8 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
   mediaList,
   index
 }) => {
-  const { primaryColor, textColor, primaryButtonColor } = useAppSelector(
-    (store) => store.colors
-  );
+  const { primaryColor, textColor, primaryButtonColor, isDarkMode } =
+    useAppSelector((store) => store.colors);
   const { categories } = useAppSelector((store) => store.settings);
   const rSwal = useSwal();
 
@@ -33,7 +33,7 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
   const [categoryList, setCategoryList] = useState<OptionsType[] | undefined>(
     undefined
   );
-  const [itemCategory, setItemCategory] = useState(item.category);
+  const [itemCategory, setItemCategory] = useState(item.category._id);
 
   const getCategory = useCallback(async () => {
     if (categories) {
@@ -42,7 +42,7 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
           return {
             id: item._id,
             label: item.name,
-            value: item.name,
+            value: item._id,
             disabled: false
           };
         })
@@ -69,16 +69,12 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
       setMediaList(newMediaList);
       closeModal();
     } else {
-      const choiceCategory: any =
-        categoryList &&
-        categoryList.find((item: any) => item.value === itemCategory);
-
       setUploadSuccess(true);
 
       const updatedVideo = {
         description: desc,
         title: title,
-        category: choiceCategory.id
+        category: itemCategory
       };
       try {
         const request = await rFetch(`/api/files/update/${item._id}`, {
@@ -99,14 +95,14 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
           closeModal();
           setDesc(item.description);
           setTitle(item.title);
-          setItemCategory(item.category);
+          setItemCategory(item.category._id);
           setUploadSuccess(null);
         }
       } catch (e) {
         closeModal();
         setDesc(item.description);
         setTitle(item.title);
-        setItemCategory(item.category);
+        setItemCategory(item.category._id);
         setUploadSuccess(null);
       }
     }
@@ -122,7 +118,7 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
       color: textColor
     },
     labelCSS: {
-      color: `${primaryColor === 'rhyno' ? 'rgb(41, 41, 41)' : '#fff'}`,
+      color: textColor,
       marginTop: 5,
       marginBottom: 5
     }
@@ -133,7 +129,9 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
       zIndex: '1'
     },
     content: {
-      background: primaryColor === 'rhyno' ? '#F2F2F2' : '#383637',
+      background: isDarkMode
+        ? `color-mix(in srgb, ${primaryColor}, #2D2D2D)`
+        : 'var(--rhyno)',
       top: '50%',
       left: '50%',
       right: 'auto',
@@ -171,7 +169,7 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
         if (defaultCategory) {
           setItemCategory(defaultCategory.value);
         } else {
-          setItemCategory(item.category);
+          setItemCategory(item.category._id);
         }
       }
     }
@@ -191,15 +189,15 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
             label="Title"
             customClass="form-control input-select-custom-style"
             placeholder="Select a description"
-            //   {...selectCommonInfoNFT}
+            {...selectCommonInfoNFT}
           />
           <InputField
             getter={desc}
             setter={setDesc}
             label="Description"
             customClass="form-control input-select-custom-style"
             placeholder="Select a description"
-            //   {...selectCommonInfoNFT}
+            {...selectCommonInfoNFT}
           />
           <InputSelect
             //   customClass="form-control input-select-custom-style"
@@ -211,7 +209,7 @@ const PopUpChangeVideo: React.FC<IPopUpChangeVideo> = ({
             {...selectCommonInfoNFT}
           />
           <button
-            onClick={() => updateVideoData()}
+            onClick={updateVideoData}
             disabled={title === '' || desc === '' || itemCategory === ''}
             style={{
               marginTop: 30,

rair-front/src/components/DemoMediaUpload/UploadedListBox/UploadedListBox.tsx

@@ -137,7 +137,9 @@ const UploadedListBox: React.FC<IUploadedListBox> = ({
       className="medialist-box"
       key={index}
       style={{
-        backgroundColor: `color-mix(in srgb, ${primaryColor}, #888888)`,
+        backgroundColor: isDarkMode
+          ? `color-mix(in srgb, ${primaryColor}, #888888)`
+          : 'var(--rhyno)',
         color: textColor,
         borderRadius: '15px',
         marginTop: '20px'