Remove Unneeded code and Add README.md File

README.md

@@ -0,0 +1,57 @@
+# Data Depot Frontend
+
+## Overview
+
+Data Depot is a web application designed to facilitate data preparation for deal-making using the Filecoin Virtual Machine (FVM). The application allows users to upload files, generate Content Addressable Representations (CARs), and manage their data efficiently.
+
+## Features
+
+- User authentication and authorization
+- File upload functionality with progress tracking
+- Dashboard for managing uploaded files
+- Responsive design for various devices
+- Disclaimer bar for important notices
+
+## Technologies Used
+
+- **Frontend**: React, TypeScript, Vite
+- **Styling**: SASS, Material-UI
+- **Routing**: React Router
+- **State Management**: React Hooks
+- **API Calls**: Axios
+
+## Installation
+
+To get started with the Data Depot frontend, follow these steps:
+
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/yourusername/data-depot-frontend.git
+    cd data-depot-frontend
+    ```
+
+2. Install the dependencies:
+    ```bash
+    npm install
+    ```
+
+3. Start the development server:
+    ```bash
+    npm run dev
+    ```
+
+4. Open your browser and navigate to [http://localhost:3000](http://localhost:3000) (or the port specified in your terminal).
+
+## Project Structure
+
+The project structure is organized as follows:
+
+- **App.tsx**: Main application component.
+- **Components/**: Reusable components used throughout the application.
+- **Containers/**: Components that manage state and logic.
+- **Pages/**: Different pages of the application.
+- **Utils/**: Utility functions and services.
+- **styles/**: Global styles and SASS files.
+
+---
+

src/App.tsx

@@ -8,7 +8,6 @@ import { DisclaimerBar } from "./Containers";
 function App() {
   return (
     <div className="App">
-      {/* <DisclaimerBar/> */}
       <Routes>
         <Route path="/" element={<LandingPage />}></Route>
         <Route path="/login" element={<LandingPage />}></Route>

src/Components/FilterTab/FilterTab.tsx

@@ -52,26 +52,6 @@ const FilterTab: React.FC<Props> = ({ filesData, setFilteredFilesData }) => {
 
   return (
     <div className="FilterTab _card">
-      {/* <div className="FilterTab__TabBox">
-        <div
-          className={activeTab === "all" ? "tab active" : "tab"}
-          onClick={() => setActiveTab("all")}
-        >
-          All URLs
-        </div>
-        <div
-          className={activeTab === "active" ? "tab active" : "tab"}
-          onClick={() => setActiveTab("active")}
-        >
-          Active URLs
-        </div>
-        <div
-          className={activeTab === "expired" ? "tab active" : "tab"}
-          onClick={() => setActiveTab("expired")}
-        >
-          Expired URLs
-        </div>
-      </div> */}
       <div className="FilterTab__SearchBox">
         <input type="text" placeholder="Search" ref={filterInput} />
         <button

src/Components/Footer/Footer.tsx

@@ -4,35 +4,6 @@ import "./Footer.scss";
 function Footer() {
   return (
     <div className="Footer">
-      {/* <div className="Footer__upperContainer _container">
-        <div className="brandContainer columnContainer">
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
-            soluta molestiae quos alias itaque cumque placeat ipsum ut
-            similique. Odit?
-          </p>
-        </div>
-        <div className="columnContainer">
-          <p className="title">Product</p>
-          <p>Product</p>
-          <p>Product</p>
-        </div>
-        <div className="columnContainer">
-          <p className="title">Site Map</p>
-          <p>Product</p>
-          <p>Product</p>
-        </div>
-        <div className="columnContainer">
-          <p className="title">Social</p>
-          <p>Product</p>
-          <p>Product</p>
-        </div>
-        <div className="columnContainer">
-          <p className="title">Social</p>
-          <p>Product</p>
-          <p>Product</p>
-        </div>
-      </div> */}
       <div className="Footer__lowerContainer _container">
         <p>© 2023. All rights reserved &nbsp;|&nbsp; Made by <a href="https://www.lighthouse.storage/" target={"_blank"}>Lighthouse</a> with ❤️</p>
       </div>

src/Components/Header/Header.tsx

@@ -18,7 +18,6 @@ const Header: React.FC<HeaderProps> = ({ setLoginDialog }) => {
         <p>Filecoin Virtual Machine</p>
       </div>
       <div className="Header__loginContainer">
-        {/* <button disabled={true} style={{opacity:0.5}}>Login</button> */}
         <button disabled={false} style={{cursor:'pointer'}} onClick={() => {appMode === 'Dev'? Navigator.push('/dashboard') :setLoginDialog(true)}}>Login</button>
       </div>
     </div>

src/Components/LoginHeader/LoginHeader.tsx

@@ -22,7 +22,6 @@ function LoginHeader() {
            onClickOutside={() => setIsPopoverOpen(false)}
 
           content={<div className="ProfileDropdown">
-            {/* <p className="ProfileDropdown__user">Arpit_B</p> */}
             <p className="ProfileDropdown__logout _buttonOutline"
             onClick={()=>{
               logout()
@@ -33,7 +32,6 @@ function LoginHeader() {
              <FaUser />
           </div>
         </Popover>
-        {/* <GoBell/> */}
       </div>
     </div>
   );

src/Components/StatBox/StatBox.tsx

@@ -50,14 +50,6 @@ const StatBox: React.FC<Props> = ({ userDetails, filesData,showData }) => {
             <p className="label">Total Files Uploaded</p>
             <p className="stat">{statData?.totalFiles}</p>
           </div>
-
-          {/* <div className="detailBox_stat">
-            <p className="label">Active Percentage</p>
-            <p className="stat">
-              {statData?.activePercentage}
-              <small>%</small>
-            </p>
-          </div> */}
         </div>
       </div>
       <div className="StatBox__ButtonBox">

src/Containers/TableContainer/TableContainer.tsx

@@ -32,7 +32,6 @@ const TableContainer: React.FC<Props> = ({ showData }) => {
           <tr>
             <th>File ID</th>
             <th>File Name</th>
-            {/* <th>Status</th> */}
             <th>
               CarFile Link <br />
               (A1)
@@ -72,16 +71,6 @@ const TableContainer: React.FC<Props> = ({ showData }) => {
                 </td>
 
                 <td>
-                  {/* <span
-                    className="icon ptr"
-                    onClick={() => {
-                      Navigator.push(`/dashboard/view-file/${item?.id}`, {
-                        state: { data: item },
-                      });
-                    }}
-                  >
-                    <MdOutlineVisibility />
-                  </span> */}
                   <span
                   data-tooltip-id="iconTooltip" data-tooltip-content="Download CAR File"
                     className="icon ptr"

src/Pages/LandingPage/LandingPage.tsx

@@ -25,9 +25,6 @@ function LandingPage() {
 
   return (
     <div className="LandingPage">
-      {/* <div className="disclaimerBar">
-        <p>Please Note: The Data Depot service has been depreciated. For more info, reach out to us on our <a href="https://t.me/LighthouseStorage" target="_blank" rel="noopener noreferrer">Telegram group</a>.</p>
-      </div> */}
       <Header setLoginDialog={setLoginDialog} />
       <div className="LandingPage__contentContainer">
         <HeroSection />

src/Pages/LoginPanel/Dashboard/Dashboard.tsx

@@ -23,7 +23,6 @@ useEffect(() => {
     if (userDetail !== undefined && userDetail?.status === 200) {
       setUserDetails(userDetail.data ?? {}); 
 
-      // setUserName(userDetail?.data)
     }
   })();
 }, []);
@@ -35,7 +34,6 @@ useEffect(() => {
       <FilterTab filesData={filesData} setFilteredFilesData={setFilteredFilesData}/>
       <TableContainer showData={showData} />
       <Pagination setShowData={setShowData} filteredFilesData={filteredFilesData} />
-      {/* <UploadBar /> */}
     </div>
   );
 }

src/Utils/GlobalNavigation/NavigationSetter.tsx

@@ -3,7 +3,6 @@ import Navigator from "./navigationHistory";
 import  { FunctionComponent } from 'react'; 
 
 
-// Set NavigationSetter between BrowserRouter on index.js
 
 export const NavigationSetter: FunctionComponent = () => {
   Navigator.navigate = useNavigate();

src/Utils/Services/Other.ts

@@ -22,7 +22,6 @@ export function getCookieValue(key: string) {
 }
 
 export const bytesToString = (bytes: number) => {
-  // function takes in bytes and returns corresponding string value with suitable Prefix (KB,MB,GB)
   let incrementor = 0;
   let size = bytes;
   do {
@@ -40,7 +39,6 @@ export const bytesToString = (bytes: number) => {
 };
 
 export const copyToClipboard = (text: string) => {
-  // Allows user to copy the given text on clipboard
   navigator.clipboard.writeText(text);
   notify("Copied To Clipboard", "success");
 };