Git Product home page Git Product logo

fossologyui's Introduction

FOSSology UI

GPL-2.0 Slack Channel YouTube Channel

About FOSSology

FOSSology is an open source license compliance software system and toolkit. As a toolkit, you can run license, copyright and export control scans from the command line. As a system, a database and web UI are provided to give you a compliance workflow. In one click you can generate an SPDX file or a ReadMe with all the copyrights notices from your software. FOSSology deduplication means that you can scan an entire distro, rescan a new version, and only the changed files will get rescanned. This is a big time saver for large projects.

Check out Who Uses FOSSology!

FOSSology does not give legal advice. https://fossology.org/

Overview

The UI Migration project is an effort focused on generating the new component-based architecture with the integration of the APIs. To make the project more efficient and easily accessible, an entire code base shift from Symfony-Twig to React.js is proposed. React.js features an incrementally adaptable architecture that focuses on declarative rendering and component composition. React.js component system will enable us to organize the current working APIs appropriately.

Objectives

  • Working on good interactive design, with a modern look.
  • Integrating the APIs to the new component-based UI structure.
  • Seamless routing and page transitions.
  • Giving the power of the node engine to our UI. Making all NPM accessible.
  • Writing detailed ​ documentation of the project, to make the codebase simpler for other contributors.

Requirements

Installation

Docker

Development

FOSSology comes with a Dockerfile allowing for containerized execution.

This method only requires that you have the Docker engine and docker-compose installed on your machine.

  • Added benefits to this method other than the ones that docker already provides is you are not confined to developing in the docker container. You can also develop using your local modules as defined above.
docker-compose -f docker-compose.dev.yml pull fossology_server && docker-compose -f docker-compose.dev.yml up     #Starts the react-dev-server on localhost:3000

On Windows you might have to forego the && and run both commands individually.

Running the docker-compose pull ... command each time you run the docker container isn't required but recommended so as to get the latest fossology image.

This will start the react-dev-server on localhost on port:3000.

The docker image can then be used using http://IP_OF_DOCKER_HOST:3000/ user fossy password fossy. (IP_OF_DOCKER_HOST is generally localhost)

You can even run it detached in the background using the -d option.

docker-compose -f docker-compose.dev.yml up -d
docker-compose logs  #To view server logs

npm packages can be installed using docker-compose exec

docker-compose -f docker-compose.dev.yml exec -w /usr/src/fossologyui fossologyui_server yarn add <package name> #Install npm package for react-dev-server

Once done developing, you can clean up running containers and networks using:

docker-compose -f docker-compose.dev.yml down

Production

For production level deployment you can use:

docker build \
-t fossologyui:react1.0 \
--build-arg REACT_APP_SERVER_URL="localhost/repo/api/v2" \
--build-arg REACT_APP_HTTPS="false" .

for building the image and then host the image using:

docker run -p 3000:3000 fossologyui:react1.0

The docker image would then be hosted on http://IP_OF_DOCKER_HOST:3000/ user fossy password fossy. (IP_OF_DOCKER_HOST is generally localhost)

Alternatively, you can also deploy it using docker-compose:

docker-compose up

You can even run it detached in the background using the -d option.

docker-compose up -d
docker-compose logs  #To view server logs

Deployed image can be pulled down using:

docker-compose down

This will clean up running containers and networks.

Project Setup

  • Create a .env in root directory of project and copy the contents from .env.sample

  • Installs the packages:

 yarn
yarn start

Deployment

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

yarn test

Builds the app for production to the build folder.

yarn build

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed! See the section about deployment for more information.

Support

Mailing lists, FAQs, Release Notes, and other useful info is available by clicking the documentation tab on the project website. We encourage all users to join the mailing list and participate in discussions. There is also a #fossology IRC channel on the freenode IRC network if you'd like to talk to other FOSSology users and developers. See Contact Us

Contributing

We really like contributions in several forms, see CONTRIBUTING.md

Licensing

FOSSology and FOSSologyUI are licensed under 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 as published by
the Free Software Foundation; version 2 of the License

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.

Please see the LICENSE file included with this software for the full texts of these licenses.

fossologyui's People

Contributors

aman-codes avatar caffeinated-pixels avatar d-e-v-esh avatar dependabot[bot] avatar dushimsam avatar gladi8r avatar gmishx avatar kaushl2208 avatar krishna1742 avatar krishna9304 avatar mayank2021 avatar pret3nti0u5 avatar rakeshpotnuru avatar ramgoel avatar shaheemazmalmmd avatar shruti3004 avatar sjha2048 avatar soham4abc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fossologyui's Issues

Add a step-by-step guide on how to connect to the backend

Description

I'm attempting to run the project with yarn in development mode. However, I am unable to connect to the backend.
I followed the instructions from readme.md.

node -> v16.14.0
yarn -> v1.22.17

Screenshots

error screenshot

How localhost/repo/api/v2 will work? Can anyone please explain to me?.

Creating group selector

Description

  1. A group selector is required next to user.
  2. The possible values can be populated from /groups endpoint.
  • The resultant value can be cached and for each login???
  1. The group selected by user needs to be sent as groupName header with each consecutive API calls.

Setup on local

Could somebody please help me to make setup on local?
I have run the docker commands mentioned in the 'README' file, after that if I put user: 'fossy', and password: 'fossy' I am getting failed to fetch error.

Screenshot (162)

Spinner on browse page

Description

A spinner can be displayed on the "Browse" page while waiting for response from API.

Should be visible for both initial load and when going to next page.

Steps followed and expected result

Kill apache server and then perform operation on the page.

Screenshots

Current spinner is not very visual and also does not handle errors.

image

Load the reuse options

Description

In the current UI, only "Enhanced reuse" and "Reuse main license" options exists.

Steps followed and expected result

  1. The "Select an already uploaded package for reuse in specific folder" option is just a list of folder. Can be populated with /folders endpoint.
  2. Other 2 options of report configuration and copyrights are reuse_report and reuse_copyright boolean.
  3. "Upload to reuse" is another list of uploads within the selected folder, much like organize/uploads/edit page.
  4. One additional input reuse_group will be required and can be populated from /groups endpoint.
    • Since the uploads inside a folder can be visible/hidden based on group, this option should be before the uploads list.
    • Whenever the selected group changes, the list of uploads needs to be refreshed.
    • The call to /uploads?folderId=<id> can be done with groupName header holding the selected value.

Screenshots

  • Current UI
    • image
  • UI from FOSSology
    • image

Issue templates now use Issue forms instead of markdown

Markdown templates often made it difficult to capture the whole context, by expecting the contributors to read the markup, uncomment lines and delete relevant context.

Issue forms beta was released for public repositories last month, as mentioned by GitHub on this blog. We would like to migrate the issue templates to YAML-based forms which are easy to fill up and maintain, helping us capture relevant context.

There is no issue templates in the project so i would like to work on the issue

Required Rest API endpoints

Description

Required Rest API endpoints (update the new require endpoints as you find more)

uploads (browse view)

  • upload description
  • comment
  • license histogram
  • file tree
  • file clearing decision (license/copyright/ecc)
  • conf page settings( unified , obligation, SPDX, decision)

view file information

  • package info,
  • file info
  • repository locator (fil size and checksums are available)

upload

  • all agent schedule for upload (now only ununpack and adj2nest is available)

job

  • All users job

Admin

  • customize
  • Dashboard
  • Group
    • add
    • delete
    • modify
  • license admin
    • csv Import/export
  • Maintenance Agent
    • import/export
  • Scheduler (NA)
  • tag
  • upload permission
  • Users
    • modification

Update version information

There is a new PR in fossology upstream to expose server information via REST API fossology/fossology#2139

The following code needs to be tested and updated if required. The API also expose other information like version, branch name and commit hash which should also be displayed on the UI.

buildDate: new Date(res?.fossology?.buildDate).toLocaleString(),
commitDate: new Date(res?.fossology?.commitDate).toLocaleString(),

Dark theme toggle button

Description

When someone click on the profile then only he/she can able to know about the dark theme. To create better user experience the dark theme button should be on navigation.

Steps followed and expected result

Current situation:-
1.For toggling between dark theme and light theme we have two button elements
2.User will able to know about the dark theme only when he/she click on the profile
image

Expected situation:-

  1. make a single button element to improve the user experience
    2.Put the toggle button on top to visible clearly.
    image

Browse folder uploads

Description

Since Browse page now list uploads and folders, the uploads navigation can be updated. When someone clicks on a folder, the uploads from that folder can be listed in the browse table.

This task can be picked-up when migrating to material table as well.

Invalid errors

Description

Getting invalid errors on the api requests.

Screenshot from 2021-07-14 08-53-18

Make non-recursive upload listing

Description

Update all calls to /uploads?folderId=1 non-recursive with recursive=false to list uploads from given folder only.

Currently all places loads all the uploads accessible by the user which is confusing.

Unexpected token error on login attempt in FossologyUI

Description

There has been a change in the fossology api keys, causing said issue. I'll push a PR which fixes this issue.

How to reproduce

  1. Attempt to login use v1 api.

Screenshots

error

Versions

  • Last commit id on master: #77a85c
  • Operating System (lsb_release -a): Ubuntu 20.04
  • Browser [e.g. chrome, safari]: Mozilla Firefox, Google Chrome

Logs

Any logs (if any) generated in

FOSSology logs

Logs generated under /var/log/fossology/fossology.log

Apache logs

Logs generated under /var/log/apache2/error.log

Job logs

Logs generated under Geeky Scan Details (Job history => click on agent's job id)

Testing: Improve test coverage

Description

Currently test cases are written only for a few components. There is a need to add more test cases.

Steps followed and expected result

  • Add more test cases to improve test coverage
  • Run yarn test --coverage --watchAll to view test coverage report (currently less than 30%)

Screenshots

image

Warning while loading delete user page

Description

While navigating to "Admin > Users > Delete User" and other pages, following warning popups in the browser console.

Screenshots

Warning: Select elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled select element and remove one of these props. More info: https://reactjs.org/link/controlled-components
select
div
InputContainer@http://localhost:3000/static/js/2.chunk.js:744:24
form
div
div
div
DeleteUser@http://localhost:3000/static/js/31.chunk.js:248:101
div
Route@http://localhost:3000/static/js/vendors~main.chunk.js:35781:29
AdminLayout@http://localhost:3000/static/js/56.chunk.js:56:21
C@http://localhost:3000/static/js/vendors~main.chunk.js:36038:31
Switch@http://localhost:3000/static/js/vendors~main.chunk.js:35983:29
Router@http://localhost:3000/static/js/vendors~main.chunk.js:35416:30
BrowserRouter@http://localhost:3000/static/js/vendors~main.chunk.js:35036:35
Routes
Ge@http://localhost:3000/static/js/vendors~main.chunk.js:42047:67
GlobalProvider@http://localhost:3000/static/js/main.chunk.js:1167:24
App@http://localhost:3000/static/js/main.chunk.js:111:63
Suspense index.js:1

Versions

  • Last commit id on master: 850d3c5
  • Operating System (lsb_release -a):
Distributor ID:	Debian
Description:	Debian GNU/Linux 11 (bullseye)
Release:	11
Codename:	bullseye
  • Browser [e.g. chrome, safari]: Firefox 95.0.2

General review on current stage

Description

Some observations on current development branch.

  1. Tried dark theme on Search page, results not looking good.
  2. The page "Organize > Folder > Move or Copy" has title "Move folder" where copy is also a posibility.
  3. Please check the link for "FOSSology web site" in the bottom of "http://localhost:3000/help/overview" to open in new tab.

Screenshots

  • Search
    image
  • Copy Folder
    image

Versions

  • Last commit id on development: c6fe109
  • Browser [e.g. chrome, safari]: Firefox 89.0.2

Fossology logo and Home button doing the same thing

Logo and Home button both redirect to main page and even placed side by side. Home is single button on whole navbar, It looks good if there are more buttons . So we might either delete the home button or delete the redirect feature of logo??

Storybook Integration

Description

We can introduce storybook, which would make developing/exploring components easier and will also help us with reusability.

Additional details

Storybook is licensed under MIT license.

Use scan preference from user object

Description

While uploading a file or scheduling a scan from Jobs, the list of agents can be selected by default based on /users/self object.

Currently, following object is returned from the /users/self endpoint

{
  "id": 3,
  "name": "fossy",
  "description": "Default Administrator",
  "email": "[email protected]",
  "accessLevel": "admin",
  "rootFolderId": 1,
  "emailNotification": "y",
  "agents": {
    "bucket": false,
    "copyright_email_author": true,
    "ecc": true,
    "keyword": true,
    "mimetype": true,
    "monk": true,
    "nomos": true,
    "ojo": true,
    "package": true
  }
}

The agents object here is what user has selected as their default agents in the UI. This can be used to select the checkboxes from the following table.

image

Search bar in `/browse` page does not seem to work

Description

Currently, the search bar in the /browse page seems only to be an input field with no search function implemented.

How to reproduce

Run the current UI project and login to the /browse page and try to use the search bar above the table.

Screenshots

Screenshot from 2022-06-16 12-04-40

Versions

  • Last commit id on master:3003944
  • Operating System (lsb_release -a):Ubuntu 20.04 LTS
  • Browser [e.g. chrome, safari]: Firefox, Chrome

fix warnings

Description

Warnings in developer tools.

How to reproduce

  • install development branch, login and open developer tools(Inspect)

Screenshots

screenShot18

Logs

Warning: validateDOMNesting(...): <span> cannot appear as a child of <tr>.
span
tr
thead
table
div
div
div
Browse@http://localhost:3000/static/js/main.chunk.js:8083:93
div
Route@http://localhost:3000/static/js/vendors~main.chunk.js:199140:29
PrivateLayout@http://localhost:3000/static/js/main.chunk.js:20237:23
C@http://localhost:3000/static/js/vendors~main.chunk.js:199397:31
Switch@http://localhost:3000/static/js/vendors~main.chunk.js:199342:29
Router@http://localhost:3000/static/js/vendors~main.chunk.js:198775:30
BrowserRouter@http://localhost:3000/static/js/vendors~main.chunk.js:198297:35
Routes
Ge@http://localhost:3000/static/js/vendors~main.chunk.js:219039:67
GlobalProvider@http://localhost:3000/static/js/main.chunk.js:6440:24
App@http://localhost:3000/static/js/main.chunk.js:183:63 index.js:1

Not able to login

Description

I am using fossy as username and password. But getting , failed to fetch as the message .

Screenshots

Screenshot 2022-04-06 at 6 58 38 PM

Versions

  • Operating System (lsb_release -a): Mac
  • Browser : Brave

How to resolve this issue , any idea ?

Creation of `all recent jobs` page

Description

Currently, the /allRecentJobs page is not implemented as it gives us a blank response.

Steps followed and expected result

Run the UI with the current backend and after login visit the All recent jobs page

PS: I would like to work on this issue

@shaheemazmalmmd @GMishx

Creation of `my recent jobs` page

Description

Currently, the /myRecentJobs page is not implemented as it gives us a blank response.

Steps followed and expected result

Run the UI with the current backend and after login visit the My recent jobs page

Process that we can use to filter the Jobs according to the user

we can use the users/self API endpoint in order to get the logged-in user's ID and thus from the jobs list provided by the /jobs we can filter the jobs using the userId: parameter of each job.

PS: I would like to work on this issue

@shaheemazmalmmd @GMishx

Widgets for the helper messages to improve the UX

Description

Adding a widget for Alert and Tootips to display the helper messages and other helping information.

Steps followed and expected result

Create the separe folder in src/components/widgets

License text hard to read in dark theme

Description

The text in disabled textarea is hard to read in dark theme.

How to reproduce

Load licenses from Organize > Licenses and change the theme to dark.

Screenshots

image

Minimise promise chaining in asynchronous functions (ES6)

Description

Using “async - await” instead of “.then” wherever possible.

Reason:

It's better to use async/await where possible, and minimise promise chaining. Async/await makes JavaScript code more accessible to developers that aren't as familiar with JavaScript, and much easier to read.]

Example screenshots

  • Using ".then"

Screenshot 2022-06-06 at 11 30 02 AM

  • Using "async-await"

Screenshot 2022-06-06 at 11 30 26 AM

Status: Discussion required
cc: @Shruti3004 @GMishx @sjha2048

Clicking on delete user button throws error

Description

When I go to admin>user>delete user and select a user and click on delete button after confirming, it breaks the portal and generates error that looks something like below

Steps to reproduce

  1. Click on the admin option from the navbar.
  2. Then click user>Delete user.
  3. Select a user from the list and confirm.
  4. Then click on delete button.

Screenshots

ss.mov

Versions

  • Last commit id on main: 7985824
  • Operating System : MacOS Monterey
  • Browser: Chrome

Logs

Browser console is generating logs and issues related to cors.

FOSSology logs

web_1 | [Tue Mar 29 03:58:56.724246 2022] [php7:notice] [pid 50] [client 127.0.0.1:49592] [2022-03-29T03:58:56.723926+00:00] default.ERROR: invalid user name [{"file":"/usr/local/share/fossology/www/ui/core-auth.php","line":165,"function":"getUserAndDefaultGroupByUserName","class":"Fossology\\\\Lib\\\\Dao\\\\UserDao","type":"->","args":["Default User"]},{"file":"/usr/local/share/fossology/www/ui/core-auth.php","line":146,"function":"updateSession","class":"core_auth","type":"->","args":["",true]},{"file":"/usr/local/share/fossology/lib/php/Plugin/FO_Plugin.php","line":477,"function":"PostInitialize","class":"core_auth","type":"->","args":[]},{"file":"/usr/local/share/fossology/lib/php/common-plugin.php","line":229,"function":"preInstall","class":"FO_Plugin","type":"->","args":[]},{"file":"/usr/local/share/fossology/www/ui/api/Middlewares/FossologyInitMiddleware.php","line":51,"function":"plugin_preinstall","args":[]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php","line":313,"function":"__invoke","class":"Fossology\\\\UI\\\\Api\\\\Middlewares\\\\FossologyInitMiddleware","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]},{"Slim\\\\Routing\\\\RouteRunner":[]}]},{"file":"/usr/local/share/fossology/www/ui/api/Middlewares/RestAuthMiddleware.php","line":58,"function":"handle","class":"class@anonymous\\u0000/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php0xffffa140b686","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php","line":313,"function":"__invoke","class":"Fossology\\\\UI\\\\Api\\\\Middlewares\\\\RestAuthMiddleware","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]},{"class@anonymous":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/Middleware/ContentLengthMiddleware.php","line":27,"function":"handle","class":"class@anonymous\\u0000/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php0xffffa140b686","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php","line":147,"function":"process","class":"Slim\\\\Middleware\\\\ContentLengthMiddleware","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]},{"class@anonymous":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/Middleware/ErrorMiddleware.php","line":107,"function":"handle","class":"class@anonymous\\u0000/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php0xffffa140a09b","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php","line":147,"function":"process","class":"Slim\\\\Middleware\\\\ErrorMiddleware","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]},{"class@anonymous":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php","line":81,"function":"handle","class":"class@anonymous\\u0000/usr/local/share/fossology/vendor/slim/slim/Slim/MiddlewareDispatcher.php0xffffa140a09b","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/App.php","line":215,"function":"handle","class":"Slim\\\\MiddlewareDispatcher","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]}]},{"file":"/usr/local/share/fossology/vendor/slim/slim/Slim/App.php","line":199,"function":"handle","class":"Slim\\\\App","type":"->","args":[{"Slim\\\\Psr7\\\\Request":[]}]},{"file":"/usr/local/share/fossology/www/ui/api/index.php","line":294,"function":"run","class":"Slim\\\\App","type":"->","args":[]}] []

Cannot Connect React UI to backend

Description

I am not able to connect the React UI to the backend and log in as fossy. Whenever I log in, I am getting this CORS error:

Screenshot from 2022-03-24 00-14-59

Access to fetch at 'http://localhost/repo/api/v2/info' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

  1. I have created the .env file.
  2. I added http://localhost:3000 to Allowed origins for REST API in the fossology config.

Screenshot from 2022-03-24 00-15-30

Still, I am not able to log in. Am I missing something? Please Help 🙏🙏

Loading text popping up when a page is loading up

Description

When you load up a page, a "loading" text comes up which looks absurd, instead we could have a css loader or an animation.

Steps followed and expected result

Replace the text with a loader

`react-virtualized-tree` package causing warning in `/browse` page

Description

The following warning is being shown whenever the /browse page is rendered,
Screenshot from 2022-06-14 08-15-59

How to reproduce

Run the UI project with the current backend and visit the /browse page after login and see the console.

Versions

  • Last commit id on master: #3003944
  • Operating System (lsb_release -a): Ubuntu 20.04 LTS
  • Browser [e.g. chrome, safari]: Firefox

Logs

Any logs

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: TreeContainer

Discovered by @krishna9304 and @soham4abc

PTAL: @GMishx @shaheemazmalmmd @ag4ums @Shruti3004

Empty divider in Log Out dropdown and non-functional Log In button

Description

There is an empty divider in Log Out drop down, earlier that place used to house the theme toggle. But since it was removed from the drop down in an earlier commit the divider is no longer required. Same issues plagues the Log In button in the home page. Its only functionality is it redirects the user back to the home page on being clicked but since we can't access any page other than the home page while not being logged in I think it should be removed altogether.

Screenshots

Current Log Out dropdown:
wrong-logout

Current Log In dropdown:
wrong_login

Versions

  • Last commit id on master: #77a85c
  • Operating System (lsb_release -a): Ubuntu 20.04
  • Browser [e.g. chrome, safari]: Mozilla Firefox, Chrome

Use lazy loading components

Description

Currently all the components are loaded during initial page load which increases the initial load time. We could use lazy loading to optimize the load time.

Steps followed and expected result

Update imports to use lazy loading. Example change

import Home from "./Home";

to

const Home = React.lazy(() => import("./Home"));

Keeping the auth constant in an env file

Description

Keeping the auth constants in env file and can have some default file if file doesn't exists.

export const tokenNameLength = 40;
export const tokenScope = "write";
export const tokenExpiryDays = 1;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.