Final Commit

package.json

@@ -24,7 +24,8 @@
     "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
     "redux-devtools-extension": "^2.13.9",
-    "redux-thunk": "^2.4.2"
+    "redux-thunk": "^2.4.2",
+    "reselect": "^5.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/components/DashboardComponents/FileComponent/FileComponent.css

@@ -1,12 +1,15 @@
 
 .center-div{
-    margin: 0 auto;
-    width: 50%;
-    padding: 10px;
-    text-align: center;
-
-    border-radius: 10px;
-
+    text-align: center;     
+}
+
+.center-div>h4{
+  padding-bottom: 20px;  
+  color: whitesmoke; 
+
+}
+.phone-msg{
+  display: none;
 }
 .glow-on-hover {
 
@@ -66,4 +69,19 @@
     0% { background-position: 0 0; }
     50% { background-position: 400% 0; }
     100% { background-position: 0 0; }
+}
+.bottom-space{
+  margin-bottom: 30px;
+}
+
+@media screen and (max-width: 768px) {
+  .center-div>h4{
+    display: none;
+
+  }
+  .phone-msg{
+    display: block !important;
+    padding-bottom: 20px;  
+    color: whitesmoke; 
+  }
 }

src/components/DashboardComponents/FileComponent/FileComponent.jsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSelector, shallowEqual } from 'react-redux';
-import Header from './Header';
-import CodeEditor from './CodeEditor';
+
 import './FileComponent.css';
 
 const FileComponent = () => {
@@ -34,10 +33,12 @@ const FileComponent = () => {
     const link = document.createElement('a');
     link.href = currentFile?.data.url;
     link.target = '_blank';
+    link.rel = 'noopener noreferrer'; // Added for security reasons
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   };
+
 
   useEffect(() => {
     // Trigger the downloadFile function when the component mounts
@@ -46,35 +47,21 @@ const FileComponent = () => {
 
   if (isAuthenticated) {
     return (
-      <div>
-        {isAuthenticated && fileData !== null ? (
-          <>
-            <Header fileName={currentFile?.data.name} fileId={fileId} />
-            <CodeEditor fileName={currentFile?.data.name} data={fileData} setData={setFileData} />
-          </>
-        ) : (
-          <div >
-            {/* Sub Menu Bar */}
-            <div className=' '>
-              <p
-                title={currentFile?.data.name}
-                className='my-0'
-                style={{ cursor: 'pointer' }}
-              >
-                {currentFile?.data.name.length > 40
-                  ? currentFile?.data.name.slice(0, 40) + '... .' + currentFile?.data.extention
-                  : currentFile?.data.name}
-              </p>
+
               <div className='center-div'>
-                <button className='glow-on-hover' onClick={() => navigate(-3)}>
-                  Go Back
+
+               <h4 >File Opened in New Tab</h4>
+              <h4  className='phone-msg'>File is Downloaded</h4>
+
+                <button className='glow-on-hover bottom-space' onClick={() => navigate("/dashboard")}>
+                  Go Back ! 😎
                 </button>
-                {/* The download button is automatically triggered by the useEffect hook */}
-              </div>
+
+
             </div>
-          </div>
-        )}
-      </div>
+
+
+
     );
   }
 

src/components/DashboardComponents/FolderComponent/FolderComponent.jsx

@@ -55,7 +55,7 @@ const FolderComponent = () => {
         </>
       ) :
         (
-          <p className="text-center my-5"> Empty Folder</p>
+          <p className="text-center my-5 color-white"> Notes will be updated Soon...</p>
         )
 
 

src/components/DashboardComponents/HomeComponent/HomeComponent.jsx

@@ -24,7 +24,7 @@ const HomeComponent = () => {
 
     {
       isLoading ? (
-        <h1 className="display-1 my-5 text-center text-info">Loading...</h1>
+        <h1 className="display-1 my-5 text-center text-info"> Please wait Loading...</h1>
 
          ):( 
 

src/components/DashboardComponents/HomeComponent/selectors.js

@@ -0,0 +1,30 @@
+// selectors.js
+
+import { createSelector } from 'reselect';
+
+const selectFileFoldersState = (state) => state.filefolders;
+
+export const selectUserFolders = createSelector(
+  [selectFileFoldersState],
+  (filefolders) => filefolders.userFolders.filter((folder) => folder.data.parent === "root")
+);
+
+export const selectUserFiles = createSelector(
+  [selectFileFoldersState],
+  (filefolders) => filefolders.userFiles.filter((file) => file.data.parent === "root")
+);
+
+export const selectCurrentFolder = createSelector(
+  [selectFileFoldersState],
+  (filefolders) => filefolders.currentFolder
+);
+
+export const selectHomeComponentData = createSelector(
+  [selectFileFoldersState, selectUserFolders, selectUserFiles, selectCurrentFolder],
+  (filefolders, userFolders, userFiles, currentFolder) => ({
+    isLoading: filefolders.isLoading,
+    userFolders,
+    userFiles,
+    currentFolder,
+  })
+);

src/components/DashboardComponents/ShowItems/ShowItems.jsx

@@ -21,7 +21,7 @@ const ShowItems = ({ title, items, type }) => {
 
   return (
     <div className='show-items'>
-      {/* <h1 className='text-center'>{title}</h1> */}
+
       <div className="items-container">
         {items.map((item, index) => (
           <div
@@ -32,8 +32,7 @@ const ShowItems = ({ title, items, type }) => {
 
 
             <img src={type === 'file' ? "../../../../public/assets/file-icon.png" : "../../../../public/assets/folder-icon.png"} alt={type === 'file' ? "File Icon" : "Folder Icon"} />
-
-
+
             <span>{item.data?.name}</span>
           </div>
         ))}

src/components/DashboardComponents/SubBar/SubBar.css

@@ -1,63 +1,75 @@
 /* SubBar.css */
 
-.navbar {
-  background-color: #d44040;
+/* Default styles */
+.breadcrumb-container {
+  margin-left: 3em;
 }
 
-.breadcrumb {
-background-color: #fff;
-font-size: 16px;
-margin-bottom: 0;
+.breadcrumb-nav {
+  background: linear-gradient(to right, #373b44, #2f3031);
+  border: none;
+  outline: none;
+  box-shadow: none;
+  color: rgb(131, 255, 253);
+  font-size: large;
+  padding-left: 10px;
 }
 
-.breadcrumb-item {
-color: #333;
+.breadcrumb-nav:hover {
+  color: #ffc107;
 }
 
-.breadcrumb-item:hover {
-color: #ffc107;
-}
-.navbar-nav{
+.navbar-nav {
   display: flex;
-
   justify-content: center;
-  /* margin-left: 300px !important; */
 }
+
 .navbar-nav .btn {
-background-color: transparent;
-border: none;
- color: rgb(131, 255, 253);
-font-size: 24px;
-margin-right: 5px;
-transition: all 0.3s ease-in-out;
-
+  background-color: transparent;
+  border: none;
+  color: rgb(131, 255, 253);
+  font-size: 24px;
+  margin-right: 5px;
+  transition: all 0.3s ease-in-out;
 }
 
 .navbar-nav .btn:hover {
-color: #ffc107;
-transform: scale(1.2);
-box-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
+  color: #ffc107;
+  transform: scale(1.2);
+  box-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
 }
 
 .btn-outline-dark {
-border-color: #333;
-color: #333;
+  border-color: #333;
+  color: #333;
 }
 
 .btn-outline-dark:hover {
-border-color: #ffc107;
-color: #ffc107;
+  border-color: #ffc107;
+  color: #ffc107;
 }
 
 .btn-primary {
-background-color: #007bff;
-border-color: #007bff;
+  background-color: #007bff;
+  border-color: #007bff;
 }
 
 .btn-primary:hover {
-background-color: #0056b3;
-border-color: #0056b3;
+  background-color: #0056b3;
+  border-color: #0056b3;
 }
 
+/* Responsive styles */
+@media screen and (max-width: 768px) {
+  .breadcrumb-container {
+    margin-left: 1em;
+  }
 
-/* Additional style for contribute button */
+  .breadcrumb-nav {
+    font-size: medium;
+  }
+
+  .navbar-nav .btn {
+    font-size: 18px;
+  }
+}

src/components/DashboardComponents/SubBar/SubBar.jsx

@@ -28,44 +28,44 @@ const Subbar = ({
   };
 
   return (
-    <nav className="">
-      <nav className="ms-5" aria-label="breadcrumb">
+    <nav >
+      <nav className="breadcrumb-container" aria-label="breadcrumb">
         <ol className="breadcrumb  d-flex align-items-center">
           {currentFolder !== "root" ? (
             <>
               <button
-                className="breadcrumb-item btn btn-link  text-decoration-none"
+                className="breadcrumb-nav"
                 onClick={() => handleNavigate("/dashboard", "root")}
               >
-                Root
+                Root /
               </button>
               {currentFolderData?.data.path.map((folder, index) => (
                 <button
                   key={index}
-                  className="breadcrumb-item btn btn-link   text-decoration-none"
+                  className="breadcrumb-nav"
                   onClick={() =>
                     handleNavigate(
                       `/dashboard/folder/${userFolders.find((fldr) => folder === fldr.docId).docId}`,
                       userFolders.find((fldr) => folder === fldr.docId).docId)}
                 >
-                  {userFolders.find((fldr) => folder === fldr.docId).data.name}
+                  {userFolders.find((fldr) => folder === fldr.docId).data.name} /
                 </button>
               ))}
-              <li className="breadcrumb-item active">
-                {currentFolderData?.data.name}
+              <li className="breadcrumb-nav">
+                {currentFolderData?.data.name} 
               </li>
             </>
           ) : (
             <>
-              <li className="breadcrumb-item active">
+              <li className="breadcrumb-nav">
 
               </li>
             </>
           )}
         </ol>
       </nav>
 
-      {user.uid === "T3XBsF3xtDMgTRQIi7xVQYqffpe2" ? (
+      {user.uid === "T3XBsF3xtDMgTRQIi7xVQYqffpe2" ||user.uid === "mpAHtp6Xooci6muNldHwOx1I8K53"  ? (
         <>
           <ul className="navbar-nav">
             <li className="nav-item mx-2">
@@ -85,12 +85,7 @@ const Subbar = ({
         </>
       ) : (
         <ul className="navbar-nav ms-auto">
-          <li className="nav-item mx-2">
-
-
-
-
-
+          <li className="nav-item mx-2"> 
           </li>
         </ul>
       )}