chore: resolve audit issue and update README.md

Author: gobeam

README.md

@@ -1,18 +1,38 @@
-<div align="center">
+<p align="center">
 <img src="./app/assets/images/logo/short-logo.svg" alt="Truthy Logo">
-</div><br>
+</p>
 <h1 align="center">
   Truthy CMS (ReactJS Starter)
 </h1>
 
-<div align="center"> This repository is frontend part of Truthy CMS written in ReactJS & Redux-Saga. For Backend API please visit https://github.com/gobeam/truthy. Ant design (https://ant.design/) is used as an UI library. This project includes User Management, Role Management, Permission Management, Email Module, Account Settings, OTP, RBAC support, Localization, and many more. Hope you like it.<br>
-If you love it don't forget to share your experience. If you want to contribute to the Truthy CMS in any way like API, Frontend, Design, Logo you're more than welcome to do so. Our plan is to make this no. 1 CMS maintained by opensource community.
- </div>
-
-<br>
-<div align="center">
+<p align="center"> This repository is frontend part of Truthy CMS written in ReactJS & Redux-Saga. For Backend API please visit https://github.com/gobeam/truthy. Ant design (https://ant.design/) is used as an UI library. This project includes User Management, Role Management, Permission Management, Email Module, Account Settings, OTP, RBAC support, Localization, and many more. Hope you like it.<br>
+If you love it don't forget to share your experience. If you want to contribute to the Truthy CMS in any way like API, Frontend, Design, Logo you're more than welcome to do so. Our plan is to make this no. 1 CMS maintained by open-source community.
+ </p>
+
+ <p align="center">
+ <img alt="truthy-react-frontend package.json version" src="https://img.shields.io/github/package-json/v/gobeam/truthy-react-frontend">
+<img alt="ruthy-react-frontend" src="https://img.shields.io/github/license/gobeam/truthy-react-frontend">
+<img alt="Lines of code" src="https://img.shields.io/tokei/lines/github/gobeam/truthy-react-frontend">
+<img src='https://www.codetriage.com/gobeam/truthy-react-frontend/badges/users.svg' alt='Open Source Helpers' />
+</p>
+<p align="center">
+<a href="https://www.buymeacoffee.com/gobeam" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+</p>
+
+<p align="center">
   <sub>Created by <a href="https://www.linkedin.com/in/roshan-ranabhat/">Roshan Ranabhat (gobeam)</a> and maintained with ❤️ by an amazing <a href="https://github.com/gobeam/truthy-contributors">team of awesome developers</a>.</sub>
-</div>
+</p>
+
+<p align="center">
+  <sub>Check Live code deployed here:
+  Frontend: <a href="https://truthy-cms.herokuapp.com">Truthy CMS</a>
+  Backend API Docs: <a href="https://truthy-backend.herokuapp.com/api-docs/">Swagger Docs</a>
+  </sub>
+</p>
+
+<p align="center">
+<img src="https://gobeam.github.io/truthy-contributors/truthy.gif" alt="Truthy CMS" >
+</p>
 
 ## Table of Contents
 

app/assets/sass/pages/_home.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;300;400;500;60;7000&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;300;400;500;60;7000&display=swap');
 .home-wrapper {
   @include d-x-center;
   flex-direction: column;

app/components/Header/index.js

@@ -35,7 +35,7 @@ const stateSelector = createStructuredSelector({
   isLoading: makeIsLoadingSelector(),
 });
 
-const HeaderComponent = () => {
+function HeaderComponent() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -117,7 +117,7 @@ const HeaderComponent = () => {
             <Dropdown overlay={menu} trigger={['click']}>
               <span className="user-action">
                 {user.avatar ? (
-                  <Avatar src={`${BASE_URL}/assets/profile/${user.avatar}`} />
+                  <Avatar src={`${BASE_URL}/profile/${user.avatar}`} />
                 ) : (
                   <Avatar
                     style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
@@ -145,6 +145,6 @@ const HeaderComponent = () => {
       </div>
     </Header>
   );
-};
+}
 
 export default HeaderComponent;

app/containers/App/index.js

@@ -9,9 +9,8 @@
 
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import NotFoundPage from 'containers/NotFoundPage/Loadable';
 import RenderRouter from 'routes';
 import { getProfileAction } from 'containers/App/actions';
 import { useInjectReducer } from 'utils/injectReducer';
@@ -43,7 +42,6 @@ export default function App() {
       <Layout>
         <BrowserRouter>
           <RenderRouter />
-          <Route path="*" component={NotFoundPage} />
         </BrowserRouter>
       </Layout>
     </>

app/containers/LoginPage/saga.js

@@ -1,7 +1,7 @@
 import { call, put, select, takeLatest } from 'redux-saga/effects';
 import ApiEndpoint from 'utils/api';
 import request from 'utils/request';
-import messages from 'containers/LoginPage/messages';
+// import messages from 'containers/LoginPage/messages';
 import { makeFormValuesSelector } from 'containers/LoginPage/selectors';
 import { LOGIN_PROCESS } from 'containers/LoginPage/constants';
 import { getProfileAction } from 'containers/App/actions';
@@ -10,7 +10,7 @@ import {
   asyncStartAction,
   enterValidationErrorAction,
 } from 'containers/LoginPage/actions';
-import { showAlert, showFormattedAlert } from 'common/saga';
+import { showAlert } from 'common/saga';
 import { POST } from 'utils/constants';
 import { clearSnackMessageAction } from 'containers/SnackMessage/actions';
 
@@ -27,8 +27,8 @@ export function* attemptLogin() {
     yield call(request, requestPayload);
     yield put(asyncEndAction());
     yield put(clearSnackMessageAction());
-    yield put(getProfileAction());
-    return yield showFormattedAlert('success', messages.loginSuccess);
+    return yield put(getProfileAction());
+    // return yield showFormattedAlert('success', messages.loginSuccess);
   } catch (error) {
     yield put(asyncEndAction());
     if (error.data && error.data.statusCode === 422) {

app/containers/PrivateRoute/index.js

@@ -15,7 +15,7 @@ import PermissionDeniedPage from 'containers/PermissionDeniedPage';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Navigate, Route } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { createStructuredSelector } from 'reselect';
 import { checkPermissionForComponent } from 'utils/permission';
 
@@ -26,8 +26,7 @@ const stateSelector = createStructuredSelector({
   otpVerified: makeOtpVerificationSelector(),
 });
 
-const PrivateRoute = (props) => {
-  const { path, resource, method, defaultPermission } = props;
+function PrivateRoute({ children, path, resource, method, defaultPermission }) {
   const { isLogged, user, otpVerified } = useSelector(stateSelector);
   const [permitted, setPermitted] = useState(true);
 
@@ -51,14 +50,15 @@ const PrivateRoute = (props) => {
   if (!permitted && otpVerified) {
     return <PermissionDeniedPage />;
   }
-  return isLogged ? <Route {...props} /> : <Navigate to="/login" />;
-};
+  return isLogged ? children : <Navigate to="/login" />;
+}
 
 PrivateRoute.propTypes = {
   defaultPermission: PropTypes.bool,
   path: PropTypes.string,
   resource: PropTypes.string.isRequired,
   method: PropTypes.string.isRequired,
+  children: PropTypes.node,
 };
 
 export default PrivateRoute;

app/containers/Profile/index.js

@@ -20,7 +20,7 @@ const stateSelector = createStructuredSelector({
   user: makeLoggedInUserSelector(),
 });
 
-const Profile = () => {
+function Profile() {
   const { user } = useSelector(stateSelector);
   const navigate = useNavigate();
   return (
@@ -36,9 +36,7 @@ const Profile = () => {
         <PageHeaderWrapper
           title={messages.pageHeader}
           avatar={
-            user.avatar
-              ? { src: `${BASE_URL}/assets/profile/${user.avatar}` }
-              : null
+            user.avatar ? { src: `${BASE_URL}/profile/${user.avatar}` } : null
           }
           extra={[
             <Button key="3" onClick={() => navigate('/account-setting')}>
@@ -65,6 +63,6 @@ const Profile = () => {
       </div>
     </>
   );
-};
+}
 
 export default Profile;

app/containers/PublicRoute/index.js

@@ -6,18 +6,19 @@
 
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { Route, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { createStructuredSelector } from 'reselect';
 import { makeIsLoggedSelector } from 'containers/App/selectors';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Common from 'utils/common';
 import { SUCCESS_REDIRECT } from 'containers/LoginPage/constants';
+import PropTypes from 'prop-types';
 
 const stateSelector = createStructuredSelector({
   isLogged: makeIsLoggedSelector(),
 });
 
-const PublicRoute = ({ ...props }) => {
+function PublicRoute({ children }) {
   const navigate = useNavigate();
   const { isLogged } = useSelector(stateSelector);
 
@@ -31,11 +32,11 @@ const PublicRoute = ({ ...props }) => {
   if (isLogged === null) {
     return <LoadingIndicator />;
   }
-  return (
-    <>
-      <Route {...props} />
-    </>
-  );
+  return children;
+}
+
+PublicRoute.propTypes = {
+  children: PropTypes.node,
 };
 
 export default PublicRoute;

app/containers/UserAccount/profileForm.js

@@ -151,10 +151,7 @@ export default function ProfileForm() {
         </Title>
         <div className="user-image">
           {user.avatar ? (
-            <img
-              src={`${BASE_URL}/assets/profile/${user.avatar}`}
-              alt="avatar"
-            />
+            <img src={`${BASE_URL}/profile/${user.avatar}`} alt="avatar" />
           ) : null}
         </div>
         <Upload showUploadList={false} {...uploadProps}>