refactor (Components) : Refactored Components

src/components/BrowseUploadsHeader/BrowseUploadsLink.jsx

@@ -0,0 +1,49 @@
+/*
+ Copyright (C) 2021 Shruti Agarwal ([email protected])
+ Copyright (C) 2022 Raunak Kumar ([email protected])
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+// React Imports
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+import PropTypes from "prop-types";
+
+const BrowseUploadsLink = ({ path, name }) => {
+  const location = useLocation();
+  return (
+    <>
+      <Link
+        to={path}
+        className={
+          location.pathname === path
+            ? "active-browse-nav-item browse-uploads-nav-item"
+            : "browse-uploads-nav-item"
+        }
+      >
+        {name}
+      </Link>
+    </>
+  );
+};
+
+BrowseUploadsLink.propTypes = {
+  path: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default BrowseUploadsLink;

src/components/BrowseUploadsHeader/index.jsx

@@ -1,5 +1,6 @@
 /*
  Copyright (C) 2021 Shruti Agarwal ([email protected])
+ Copyright (C) 2022 Raunak Kumar ([email protected])
 
  SPDX-License-Identifier: GPL-2.0
 
@@ -18,7 +19,6 @@
 
 // React Imports
 import React from "react";
-import { Link, useLocation } from "react-router-dom";
 
 // React Bootstrap Imports
 import { Navbar } from "react-bootstrap";
@@ -29,8 +29,10 @@ import routes from "constants/routes";
 // Helper Functions
 import { isAuth } from "shared/authHelper";
 
+// Custom Component
+import BrowseUploadsLink from "./BrowseUploadsLink";
+
 const Header = () => {
-  const location = useLocation();
   return (
     <>
       <Navbar expand="lg" className="py-0 pl-0 mt-3 bg-browse-uploads-header">
@@ -40,56 +42,23 @@ const Header = () => {
             {/* Checking whether the user is authenticated */}
             {isAuth() && (
               <>
-                <Link
-                  to={routes.browseUploads.softwareHeritage}
-                  className={
-                    location.pathname === routes.browseUploads.softwareHeritage
-                      ? "active-browse-nav-item browse-uploads-nav-item"
-                      : "browse-uploads-nav-item"
-                  }
-                >
-                  Software Heritage
-                </Link>
-                <Link
-                  to={routes.browseUploads.licenseBrowser}
-                  className={
-                    location.pathname === routes.browseUploads.licenseBrowser
-                      ? "active-browse-nav-item browse-uploads-nav-item"
-                      : "browse-uploads-nav-item"
-                  }
-                >
-                  License Browser
-                </Link>
-                <Link
-                  to={routes.browseUploads.fileBrowser}
-                  className={
-                    location.pathname === routes.browseUploads.fileBrowser
-                      ? "active-browse-nav-item browse-uploads-nav-item"
-                      : "browse-uploads-nav-item"
-                  }
-                >
-                  File Browser
-                </Link>
-                <Link
-                  to={routes.browseUploads.copyright}
-                  className={
-                    location.pathname === routes.browseUploads.copyright
-                      ? "active-browse-nav-item browse-uploads-nav-item"
-                      : "browse-uploads-nav-item"
-                  }
-                >
-                  Copyright Browser
-                </Link>
-                <Link
-                  to={routes.browseUploads.ecc}
-                  className={
-                    location.pathname === routes.browseUploads.ecc
-                      ? "active-browse-nav-item browse-uploads-nav-item"
-                      : "browse-uploads-nav-item"
-                  }
-                >
-                  ECC
-                </Link>
+                <BrowseUploadsLink
+                  path={routes.browseUploads.softwareHeritage}
+                  name="Software Heritage"
+                />
+                <BrowseUploadsLink
+                  path={routes.browseUploads.licenseBrowser}
+                  name="License Browser"
+                />
+                <BrowseUploadsLink
+                  path={routes.browseUploads.fileBrowser}
+                  name="File Browser"
+                />
+                <BrowseUploadsLink
+                  path={routes.browseUploads.copyright}
+                  name="Copyright Browser"
+                />
+                <BrowseUploadsLink path={routes.browseUploads.ecc} name="ECC" />
               </>
             )}
           </div>

src/components/Header/Dropdowns/HelpPagesDropdown.jsx

@@ -0,0 +1,67 @@
+/*
+ Copyright (C) 2021 Aman Dwivedi ([email protected]), Shruti Agarwal ([email protected])
+ Copyright (C) 2022 Raunak Kumar ([email protected])
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+// React Imports
+import React from "react";
+import { Link } from "react-router-dom";
+
+// React Bootstrap Imports
+import { Dropdown } from "react-bootstrap";
+import { QuestionCircleFill } from "react-bootstrap-icons";
+
+// Routes for all the pages
+import routes from "constants/routes";
+
+// External Link for documention
+import externalLinks from "constants/externalLinks";
+
+const HelpPagesDropdown = () => {
+  return (
+    <>
+      <Dropdown drop="left">
+        <Dropdown.Toggle variant="link" bsPrefix="p-0">
+          <QuestionCircleFill color="#fff" size={40} className="m-2" />
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <Dropdown.Item as={Link} to={routes.help.about}>
+            About
+          </Dropdown.Item>
+          <Dropdown.Item as={Link} to={routes.help.overview}>
+            Getting Started
+          </Dropdown.Item>
+          <Dropdown.Item as={Link} to={routes.help.licenseBrowser}>
+            License Browser
+          </Dropdown.Item>
+          <Dropdown.Item
+            href={externalLinks.fossologyWiki}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Documentation
+          </Dropdown.Item>
+          <Dropdown.Item as={Link} to={routes.help.thirdPartyLicenses}>
+            Third Party Licenses
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+};
+
+export default HelpPagesDropdown;

src/components/Header/Dropdowns/ThemeToggleDropdown.jsx

@@ -0,0 +1,41 @@
+/*
+ Copyright (C) 2021 Aman Dwivedi ([email protected]), Shruti Agarwal ([email protected])
+ Copyright (C) 2022 Raunak Kumar ([email protected])
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+// React Imports
+import React from "react";
+
+// React Bootstrap Imports
+import { Dropdown } from "react-bootstrap";
+
+// Dark Theme Toggle Button
+import DarkThemeToggle from "../../DarkThemeToggle/DarkThemeToggle";
+
+const ThemeToggleDropdown = () => {
+  return (
+    <>
+      <Dropdown drop="left">
+        <Dropdown.Toggle variant="link" bsPrefix="p-0">
+          <DarkThemeToggle />
+        </Dropdown.Toggle>
+      </Dropdown>
+    </>
+  );
+};
+
+export default ThemeToggleDropdown;

src/components/Header/Dropdowns/UserInfoDropdown.jsx

@@ -0,0 +1,98 @@
+/*
+ Copyright (C) 2021 Aman Dwivedi ([email protected]), Shruti Agarwal ([email protected])
+ Copyright (C) 2022 Raunak Kumar ([email protected])
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+// React Imports
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+
+// React Bootstrap Imports
+import { Dropdown } from "react-bootstrap";
+import { PersonCircle } from "react-bootstrap-icons";
+
+// Routes for all the pages
+import routes from "constants/routes";
+
+// List of all accessible groups
+import { getAllGroups } from "services/groups";
+
+// Widgets
+import TextIcon from "components/Widgets/TextIcon";
+
+// Helper Functions
+import { logout, isAuth, getUserName } from "shared/authHelper";
+import { getLocalStorage, setLocalStorage } from "shared/storageHelper";
+import { getNameInitials } from "shared/helper";
+
+const UserInfoDropdown = () => {
+  const [currentGroup, setCurrentGroup] = useState(
+    getLocalStorage("currentGroup") || getLocalStorage("user")?.default_group
+  );
+  const history = useHistory();
+  const handleLogin = () => {
+    history.push(routes.home);
+  };
+  const handleGroupChange = (e) => {
+    setLocalStorage("currentGroup", e.target.innerText);
+    setCurrentGroup(e.target.innerText);
+  };
+  return (
+    <>
+      {getAllGroups() && (
+        <Dropdown drop="left">
+          <Dropdown.Toggle variant="link" bsPrefix="p-0">
+            <TextIcon className="m-2" text={getNameInitials(currentGroup)} />
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            {getAllGroups().map((group) => (
+              <Dropdown.Item
+                key={group.id}
+                onClick={handleGroupChange}
+                className={group.name === currentGroup && "active"}
+              >
+                {group.name}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
+      )}
+      <Dropdown drop="left">
+        <Dropdown.Toggle variant="link" bsPrefix="p-0">
+          <PersonCircle color="#fff" size={40} className="m-2" />
+        </Dropdown.Toggle>
+        {isAuth() ? (
+          <Dropdown.Menu>
+            <Dropdown.Item>
+              User: <b>{getUserName()}</b>
+            </Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item onClick={() => logout(null)}>Log out</Dropdown.Item>
+            <Dropdown.Divider />
+          </Dropdown.Menu>
+        ) : (
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={handleLogin}>Log in</Dropdown.Item>
+            <Dropdown.Divider />
+          </Dropdown.Menu>
+        )}
+      </Dropdown>
+    </>
+  );
+};
+
+export default UserInfoDropdown;