Amazon Cart Assignment solution (shopping cart, modal and wishlist added)

week-10/authSystem/src/components/AppBar.jsx

@@ -1,9 +1,26 @@
-import React from 'react'
+import React, { useState } from 'react'
+import Login from './Login'
 
 const AppBar = () => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [username, setUsername] = useState("");
+
+  function login(username) {
+    setLoggedIn(true);
+    setUsername(username);
+  }
+  function logout(){
+    setLoggedIn(false);
+    setUsername("");
+  }
   return (
-    <div>AppBar</div>
+    <div style={{ backgroundColor : "rgb(64, 152, 181)", height:"100px", display:"flex",padding:10}}>
+    <div>
+        <h1 style={{color:"white"}}>Auth System</h1>
+    </div>
+        {loggedIn ? <div style={{marginLeft:"auto", fontSize:"30px", color:"white", display:"flex"}}>Welcome {username} <button onClick={logout} style={{height:"30px", marginLeft:10}}>Logout</button></div> : <Login login={login}/>}
+    </div>
   )
 }
 
-export default AppBar
+export default AppBar

week-10/authSystem/src/components/Login.jsx

@@ -1,9 +1,33 @@
-import React from 'react'
-
-const Login = () => {
+import React from "react";
+import {useState,useRef} from "react" 
+const Login = ({login}) => {
+  const nameRef = useRef(null);
+  const passwordRef = useRef(null);
+  function signin(){
+    //assuming successful login 
+    login(nameRef.current.value);
+  }
   return (
-    <div>Login</div>
-  )
-}
+    <div style={{marginLeft:"auto"}}>
+        <div>
+          <input
+            ref={nameRef}
+            type="text"
+            placeholder="Username"
+            id="username"
+            style={{height:"30px", margin:10}}
+          />
+          <input
+            ref={passwordRef}
+            type="password"
+            placeholder="Password"
+            id="password"
+            style={{height:"30px",  margin:10}}
+          />
+          <button style={{height:"35px",  margin:10}} onClick={signin}>Login</button>
+        </div>
+    </div>
+  );
+};
 
-export default Login
+export default Login;

week-10/userApi/src/App.jsx

@@ -1,12 +1,61 @@
-import RandomUser from './components/RandomUser'
+import { useState, useEffect } from "react";
 
+import UserCollection from "./components/UserCollection" 
+import Pagination from "./components/Pagination";
 function App() {
+  const [users, setUsers] = useState([]);
+  const [usersPerPage, setUsersPerPage] = useState(30);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [loading,setLoading] = useState(false);
+  //range of one page : [(currentPage-1)*usersPerPage, currentPage*usersPerPage]
+  async function getUser() {
+    let response = await fetch("https://randomuser.me/api/");
+    response = await response.json();
 
+    console.log(response);
+    return response;
+  }
+
+  async function addUsers() {
+    setLoading(true);
+    let newUsers=[]
+    for(let i=1;i<=10;i++){
+      let response = await getUser();
+
+      let name = `${response.results[0].name.first} ${response.results[0].name.last}`;
+      let image = response.results[0].picture.large;
+      newUsers.push({userImage: image, userName:name})
+    }
+
+    setUsers((prev) => [
+      ...prev,
+      ...newUsers,
+    ]);
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    addUsers();
+  }, []);
+
+  function nextPage(){
+    setCurrentPage(prev => prev+1);
+  }
+  function prevPage(){
+    setCurrentPage(prev => prev-1);
+  }
+  const usersToShow =  users.slice(((currentPage-1)*usersPerPage), (currentPage*usersPerPage));
   return (
-    <>
-      <RandomUser />
-    </>
-  )
+    <div style={{ textAlign: "center" }}>
+      <h1>Random Users</h1>
+      <UserCollection usersToShow={usersToShow} loading={loading}/>
+      {currentPage > 1 && <button onClick={prevPage}>Prev Page</button>}
+      <button onClick={addUsers}>Add</button>
+      {users.length > usersPerPage && <button onClick={nextPage}>NextPage</button>}
+
+      <Pagination totalUsers={users.length} usersPerPage={usersPerPage} setCurrentPage={setCurrentPage}/>
+    </div>
+  );
 }
 
-export default App
+export default App;

week-10/userApi/src/main.jsx

@@ -4,7 +4,7 @@ import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+
     <App />
-  </StrictMode>,
+
 )

week-11/amazonCart/index.html

@@ -1,8 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rouge+Script&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>