Skip to content

B
Basic Task
Commit fcd52e89 authored by mughees ahmad tariq's avatar mughees ahmad tariq
Browse files
Options

basic task

parent c118d598
Hide whitespace changes
Inline Side-by-side
Showing with 445 additions and 38 deletions
package-lock.json
View file @ fcd52e89
......@@ -11,8 +11,10 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
......@@ -3085,6 +3087,14 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
"integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
......@@ -4963,6 +4973,29 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
"integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axios/node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
......@@ -13840,6 +13873,11 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
......@@ -14142,6 +14180,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
"integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
"dependencies": {
"@remix-run/router": "1.0.3"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
"integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
"dependencies": {
"@remix-run/router": "1.0.3",
"react-router": "6.4.3"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......@@ -19029,6 +19097,11 @@
"source-map": "^0.7.3"
}
},
"@remix-run/router": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
"integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
......@@ -20433,6 +20506,28 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.0.tgz",
"integrity": "sha512-4+rr8eQ7+XXS5nZrKcMO/AikHL0hVqy+lHWAnE3xdHl+aguag8SOQ6eEqLexwLNWgXIMfunGuD3ON1/6Kyet0A=="
},
"axios": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
"integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
},
"dependencies": {
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
}
}
},
"axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
......@@ -26699,6 +26794,11 @@
}
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
......@@ -26915,6 +27015,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
"integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
"requires": {
"@remix-run/router": "1.0.3"
}
},
"react-router-dom": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
"integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
"requires": {
"@remix-run/router": "1.0.3",
"react-router": "6.4.3"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
package.json
View file @ fcd52e89
......@@ -6,8 +6,10 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
......
src/App.css
View file @ fcd52e89
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
height: 100%;
width: 100%;
}
.App-header {
......@@ -27,12 +18,3 @@
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.js
View file @ fcd52e89
import logo from './logo.svg';
import './App.css';
import React, { useReducer } from "react";
import { UserProvider } from "./userContext/userContext";
import { initialState, userReducer } from "./userContext/userReducer";
import Login from "./Components/Login";
import Home from "./Components/Home";
function App() {
const [state, dispatch] = useReducer(userReducer, initialState);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<UserProvider value={[state, dispatch]}>
<div className="App">{state.isLogedIn ? <Home /> : <Login />}</div>
</UserProvider>
);
}
......
src/Components/Contact/index.jsx 0 → 100644
View file @ fcd52e89
import React from "react";
function Contact(props) {
return (
<div>
<h1>{props.name} Contact</h1>
<p>With some content</p>
</div>
);
}
export default Contact;
src/Components/Dashboard/index.jsx 0 → 100644
View file @ fcd52e89
import React, { useEffect, useState } from "react";
// import Axios from "axios";
import getData from "../../api/api";
function Dashboard(props) {
const [apiData, setData] = useState(null);
useEffect(() => {
(async () => {
const data = await getData();
console.log(data);
setData(data);
})();
}, []);
return (
<div>
<h1>{props.name} Dashboard with random API data from jsonplaceholder</h1>
<p>{apiData.title}</p>
<p>{apiData.userId}</p>
</div>
);
}
export default Dashboard;
src/Components/Home/Home.jsx 0 → 100644
View file @ fcd52e89
import React, { useState, useContext, useEffect } from "react";
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
import UserContext from "../../userContext/userContext";
import "./style.css";
import Dashboard from "../Dashboard";
import News from "../News";
import Contact from "../Contact";
function Home() {
const [name, setName] = useState();
const [userState, userDispatch] = useContext(UserContext);
useEffect(() => {
setName(userState.userName);
}, [userState.userName]);
const signOut = () => {
userDispatch({ type: "SIGN_OUT" });
};
return (
<Router>
<div className="container">
<div className="sidebar">
<div className="info">{name} is successfully logged in</div>
<div className="sidebar-menu">
<ul>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
<li>
<Link to="/news">News</Link>
</li>
<li>
<Link to="/contact">Contact Us</Link>
</li>
</ul>
</div>
<button className="signOut" onClick={signOut}>
Sign Out
</button>
</div>
<div className="display">
Main Display
<Routes>
<Route
exact
path="/dashboard"
element={<Dashboard name={name} />}
/>
<Route path="/news" element={<News name={name} />} />
<Route path="/contact" element={<Contact name={name} />} />
</Routes>
</div>
</div>
</Router>
);
}
export default Home;
src/Components/Home/index.js 0 → 100644
View file @ fcd52e89
import Home from "./Home.jsx";
export default Home;
src/Components/Home/style.css 0 → 100644
View file @ fcd52e89
.container {
display: flex;
gap: 20px;
height: 100vh;
width: 100%;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
background-color: #f8f9fd;
}
.sidebar {
height: 100%;
width: 30%;
text-align: left;
background-color: black;
font-size: 40px;
padding-left: 20px;
}
.display {
width: 70%;
height: 100%;
}
.info {
margin-top: 50px;
color: white;
font-size: 30px;
margin-left: 10px;
}
.signOut {
margin-top: 10px;
cursor: pointer;
font-size: 15px;
background: #d20141;
border: 1px solid #01d28e;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
src/Components/Login/Login.jsx 0 → 100644
View file @ fcd52e89
import React, { useState, useContext } from "react";
import UserContext from "../../userContext/userContext";
import "./styles.css";
function Login() {
const [userState, userDispatch] = useContext(UserContext);
const [isSubmitted, setIsSubmitted] = useState(false);
const [userName, setUserName] = useState();
const [password, setPassword] = useState();
const handleSubmit = (e) => {
e.preventDefault();
setIsSubmitted(true);
const userInfo = { userName, password };
userDispatch({ type: "SET_USER", payload: userInfo });
};
const getUserName = (e) => {
setUserName(e.currentTarget.value);
};
const getPassword = (e) => {
setPassword(e.currentTarget.value);
};
const renderCredentialForm = (
<div className="form">
<form onSubmit={handleSubmit}>
<div className="input-container">
<label>Username </label>
<input
type="text"
name="uname"
placeholder="Please enter username"
onChange={getUserName}
required
/>
</div>
<div className="input-container">
<label>Password </label>
<input
type="password"
name="pass"
placeholder="Please enter password"
onChange={getPassword}
required
/>
</div>
<div className="button-container">
<input type="submit" />
</div>
</form>
</div>
);
return (
<div className="app">
<div className="login-form">
<div className="title">Sign In</div>
{isSubmitted ? (
<div>User is successfully logged in</div>
) : (
renderCredentialForm
)}
</div>
</div>
);
}
export default Login;
src/Components/Login/index.jsx 0 → 100644
View file @ fcd52e89
import Login from "./Login.jsx";
export default Login;
src/Components/Login/styles.css 0 → 100644
View file @ fcd52e89
.app {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
height: 100vh;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
background-color: #f8f9fd;
}
input[type="text"],
input[type="password"] {
height: 25px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
input[type="submit"] {
margin-top: 10px;
cursor: pointer;
font-size: 15px;
background: #01d28e;
border: 1px solid #01d28e;
color: #fff;
padding: 10px 20px;
}
input[type="submit"]:hover {
background: #6cf0c2;
}
.button-container {
display: flex;
justify-content: center;
}
.login-form {
background-color: white;
padding: 2rem;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.list-container {
display: flex;
}
.title {
font-size: 25px;
margin-bottom: 20px;
}
.input-container {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px;
}
src/Components/News/index.jsx 0 → 100644
View file @ fcd52e89
import React from "react";
function News(props) {
return (
<div>
<h1>{props.name} News</h1>
<p>With some content</p>
</div>
);
}
export default News;
src/api/api.js 0 → 100644
View file @ fcd52e89
import axios from "axios";
const getData = async () => {
const apiData = await axios.get(
"https://jsonplaceholder.typicode.com/todos/1"
);
return apiData.data;
};
export default getData;
src/userContext/userContext.js 0 → 100644
View file @ fcd52e89
import React from "react";
const UserContext = React.createContext({});
export const UserProvider = UserContext.Provider;
export const UserConsumer = UserContext.Consumer;
export default UserContext;
src/userContext/userReducer.js 0 → 100644
View file @ fcd52e89
export const initialState = {
isLogedIn: false,
userName: "",
userPassword: "",
};
export const userReducer = (state = initialState, action) => {
switch (action.type) {
case "SET_USER":
return {
...state,
isLogedIn: true,
userName: action.payload.userName,
userPassword: action.payload.password,
};
case "SIGN_OUT":
return {
...state,
isLogedIn: false,
userName: "",
userPassword: "",
};
default:
return null;
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment