Skip to content

Commit

Permalink
Merge pull request #2 from mdjahidhasan009/frontend-redesign
Browse files Browse the repository at this point in the history
Frontend redesign
  • Loading branch information
mdjahidhasan009 authored Sep 19, 2023
2 parents 93ab8d0 + ce89ebf commit ace8b31
Show file tree
Hide file tree
Showing 49 changed files with 24,286 additions and 23,501 deletions.
4 changes: 2 additions & 2 deletions frontend/.env
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
REACT_APP_BACKEND_URL=http://localhost:5000/api
REACT_APP_ASSET_URL=http://localhost:5000
REACT_APP_BACKEND_URL=https://project-tracker-gray.vercel.app/api/
REACT_APP_ASSET_URL=https://project-tracker-gray.vercel.app
44,091 changes: 22,117 additions & 21,974 deletions frontend/package-lock.json

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"materialize-css": "^1.0.0-rc.2",
"axios": "^1.5.0",
"lottie-web": "^5.12.2",
"prop-types": "^15.7.2",
"proxy": "^1.0.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-google-charts": "^3.0.15",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-scripts": "^5.0.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
Expand All @@ -40,5 +40,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.3.3"
}
}
108 changes: 53 additions & 55 deletions frontend/public/index.html
Original file line number Diff line number Diff line change
@@ -1,65 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->

<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- <link href="css/materialize_1.0.0.css" rel="stylesheet"/>-->
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<!-- Remove or comment out the Materialize CSS link above -->

<script src="https://kit.fontawesome.com/ce6a256b4b.js" crossorigin="anonymous"></script>
<!-- <link href="css/style.css" rel="stylesheet"/>-->
<title>Project Tracker</title>
</head>
<body style="background-color: #e1f5f7">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
<script src="https://kit.fontawesome.com/ce6a256b4b.js" crossorigin="anonymous"></script>
<!-- <link href="css/style.css" rel="stylesheet"/> -->
<title>Project Tracker</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
<!-- Scripts-->
<!-- <script src="jquery/jquery_3.5.1.js"></sczript>-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <script src="javascript/materialize_1.0.0.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.sidenav').sidenav();
$('.modal').modal();
// $('select').formSelect();
});
</script>
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->

</body>
<!-- Scripts -->
<!--<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
<!-- Remove or comment out the Materialize JavaScript link above -->
<!--<script>-->
<!-- $(document).ready(function(){-->
<!-- $('.sidenav').sidenav();-->
<!-- $('.modal').modal();-->
<!-- // $('select').formSelect();-->
<!-- });-->
<!--</script>-->
</body>
</html>
37 changes: 23 additions & 14 deletions frontend/src/App.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,45 @@
import React, { Fragment, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { BrowserRouter as Router, Route, Switch, NavLink, Redirect } from 'react-router-dom';
import { Provider } from 'react-redux';

import store from './store';
import { loadUser } from "./actions/auth-action";
import { useHttpClient } from "./hooks/http-hook";

import Navbar from './components/shared/nav/nav';
import Auth from './screens/auth/authScreen';
import Routes from "./routing/Routes";
import { loadUser } from './actions/auth-action';
import { useHttpClient } from './hooks/http-hook';
import HomeScreen from './screens/HomeScreen';
import Routes from './routing/Routes';
import NotFoundScreen from './screens/NotFoundScreen';
import Login from "./screens/auth/Login";
import Navbar from "./components/shared/nav/nav";

const App = () => {
const { sendRequest } = useHttpClient();
const hideNavbarRoutes = ["/", "/login", "*"];
const displayNavbar = <Navbar>
<Switch>
<Route exact component={Routes} />
</Switch>
</Navbar>

useEffect(() => {
store.dispatch(loadUser(sendRequest));//as till now store is not fully operational
// eslint-disable-next-line
store.dispatch(loadUser(sendRequest));
}, []);

return (
<Provider store={store}>
<Router>
<Fragment>
<Navbar />
<Route
render={({ location }) => (
!hideNavbarRoutes?.includes(location.pathname) && displayNavbar
)}
/>
<Switch>
<Route exact path="/" component={ Auth } />
<Route exact component= { Routes } />
<Route exact path="/" component={HomeScreen} />
<Route exact path="/login" component={Login} />
</Switch>
</Fragment>
</Router>
</Provider>
);
}
};

export default App;
2 changes: 1 addition & 1 deletion frontend/src/actions/auth-action.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export const logout = () => async dispatch => {
dispatch({ type: LOGOUT });
}

//Get all user
//Get all users
export const getAllUser = (method) => async dispatch => {
try {
const responseData = await method(
Expand Down
1 change: 1 addition & 0 deletions frontend/src/assets/gif/404.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions frontend/src/assets/gif/login.json

Large diffs are not rendered by default.

Binary file added frontend/src/assets/images/default_user.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/assets/img/google.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions frontend/src/components/LottieAnimation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import {useEffect, useRef} from "react";
import lottie from 'lottie-web';

const LottieAnimation = ({ animationData }) => {
const containerRef = useRef(null);

useEffect(() => {
const animation = lottie.loadAnimation({
container: containerRef.current,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData, // Your JSON animation data
});

return () => {
animation.destroy();
};
}, [animationData]);

return <div ref={containerRef} />;
};

export default LottieAnimation;
117 changes: 64 additions & 53 deletions frontend/src/components/Member.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, {useEffect, useState} from 'react'
import { useHistory } from 'react-router-dom';
import {useHistory} from 'react-router-dom';
import {getUserRoleString} from "../utils/helper";

import './stylesheets/Member.css';
import defaultUserImage from "../assets/images/default_user.jpg";

const Member = ({ user }) => {
let history = useHistory();
Expand All @@ -14,65 +13,77 @@ const Member = ({ user }) => {
clickedOnEmail = false;
}

const toggleIsClickedOnEmail = () => {
clickedOnEmail = !clickedOnEmail;
}

useEffect( () => {
setUserRole(getUserRoleString(user.role));
// eslint-disable-next-line
}, [user.role]);

return (
<div className="col s12 m6 l4 member_item">
<div className="card white">
<div className="card-content" onClick={openMemberDetails}>
<img className="profile_avatar"
src={user?.profileImage?.imageUrl}
alt="no image"
<div onClick={openMemberDetails} className="relative bg-[#1f2937] block overflow-hidden rounded-lg p-4 sm:p-6 lg:p-6 cursor-pointer" title={'Click to see ' + user.name + '\'s details'}>
<div className="sm:flex sm:justify-between sm:gap-4">
<div>
<h3 className="text-lg font-bold text-orange-500 sm:text-xl"> {user.name} </h3>

<p className="mt-1 text-xs font-medium text-white-light">{userRole ? userRole : 'Not Defined'}</p>
</div>

<div className="hidden sm:block sm:shrink-0">
<img
alt={user.name + 's profile picture'}
src={user?.profileImage?.imageUrl ? user?.profileImage?.imageUrl : defaultUserImage}
className="h-16 w-16 rounded-lg object-cover shadow-sm"
/>
<p className="card-title">{user.name}</p>
<p className="card-username" onClick={toggleIsClickedOnEmail}>{user.email}</p>
<p className="card-role">{userRole}</p>
<div className="social-links">
{user && user.social && user.social.twitter && (
<a href={user.social.twitter} target="_blank" rel="noopener noreferrer">
<i className="fab fa-twitter fa-2x" />
</a>
)}
{user && user.social && user.social.github && (
<a href={user.social.github} target="_blank" rel="noopener noreferrer">
<i className="fab fa-github fa-2x" />
</a>
)}
{user && user.social && user.social.facebook && (
<a href={user.social.facebook} target="_blank" rel="noopener noreferrer">
<i className="fab fa-facebook fa-2x"/>
</a>
)}
{user && user.social && user.social.linkedIn && (
<a href={user.social.linkedIn} target="_blank" rel="noopener noreferrer">
<i className="fab fa-linkedin fa-2x" />
</a>
)}
{user && user.social && user.social.stackoverflow && (
<a href={user.social.stackoverflow} target="_blank" rel="noopener noreferrer">
<i className="fab fa-stack-overflow fa-2x" />
</a>
)}
{user && user.social && user.social.youtube && (
<a href={user.social.youtube} target="_blank" rel="noopener noreferrer">
<i className="fab fa-youtube fa-2x" />
</a>
)}
{user && user.social && user.social.instagram && (
<a href={user.social.instagram} target="_blank" rel="noopener noreferrer">
<i className="fab fa-instagram fa-2x" />
</a>
)}
</div>
</div>
</div>

<div className="mt-4">
<p className="max-w-[40ch] text-sm text-white-light">
{user?.bio ? user?.bio : 'Member did not added his bio.'}
</p>
</div>

<dl className="mt-6 flex gap-4 sm:gap-6">
{user && user?.social && user?.social?.linkedIn && (
<a href={user?.social?.linkedIn} target="_blank" rel="noopener noreferrer">
<i className="fab fa-linkedin lg:text-3xl md:text-2xl text-xl" />
</a>
)}
{user && user?.email && (
<a href={'mailto:' + user?.email}>
<i className="fas fa-envelope lg:text-3xl md:text-2xl text-xl" />
</a>
)}
{user && user?.social && user?.social?.github && (
<a href={user?.social?.github} target="_blank" rel="noopener noreferrer">
<i className="fab fa-github lg:text-3xl md:text-2xl text-xl" />
</a>
)}
{user && user?.social && user?.social?.stackoverflow && (
<a href={user?.social?.stackoverflow} target="_blank" rel="noopener noreferrer">
<i className="fab fa-stack-overflow lg:text-3xl md:text-2xl text-xl" />
</a>
)}
{user && user?.social && user?.social?.twitter && (
<a href={user?.social?.twitter} target="_blank" rel="noopener noreferrer">
<i className="fab fa-twitter lg:text-3xl md:text-2xl text-xl" />
</a>
)}
{user && user?.social && user?.social?.facebook && (
<a href={user?.social?.facebook} target="_blank" rel="noopener noreferrer">
<i className="fab fa-facebook lg:text-3xl md:text-2xl text-xl"/>
</a>
)}
{user && user?.social && user?.social?.youtube && (
<a href={user?.social?.youtube} target="_blank" rel="noopener noreferrer">
<i className="fab fa-youtube lg:text-3xl md:text-2xl text-xl" />
</a>
)}
{user && user?.social && user?.social?.instagram && (
<a href={user?.social?.instagram} target="_blank" rel="noopener noreferrer">
<i className="fab fa-instagram lg:text-3xl md:text-2xl text-xl" />
</a>
)}
</dl>
</div>
)
}
Expand Down
Loading

0 comments on commit ace8b31

Please sign in to comment.