diff --git a/week-10/authSystem/src/components/AppBar.jsx b/week-10/authSystem/src/components/AppBar.jsx
index 51cea9c0d..69cdbed86 100644
--- a/week-10/authSystem/src/components/AppBar.jsx
+++ b/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 (
- AppBar
+
+
+
Auth System
+
+ {loggedIn ?
Welcome {username}
:
}
+ Login
- )
-}
+
+ );
+};
-export default Login
\ No newline at end of file
+export default Login;
diff --git a/week-10/userApi/src/App.jsx b/week-10/userApi/src/App.jsx
index e8fdbcd11..22e4c2dab 100644
--- a/week-10/userApi/src/App.jsx
+++ b/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 (
- <>
-
-
- )
+
+
Random Users
+
+ {currentPage > 1 && }
+
+ {users.length > usersPerPage && }
+
+
+ Vite + React
-
-
-
- Edit src/App.jsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
-
- )
+
+
+ }>
+ } />
+ } />
+
+
+
+ );
}
-export default App
+function Layout() {
+ console.log("layout-re rendered!")
+ useEffect(()=>{
+ console.log("Layout mounted!")
+ },[])
+
+ return (
+
+ );
+}
+export default App;
diff --git a/week-11/amazonCart/src/assets/check-mark.png b/week-11/amazonCart/src/assets/check-mark.png
new file mode 100644
index 000000000..ed8f1f4dd
Binary files /dev/null and b/week-11/amazonCart/src/assets/check-mark.png differ
diff --git a/week-11/amazonCart/src/components/AmazonCart.jsx b/week-11/amazonCart/src/components/AmazonCart.jsx
new file mode 100644
index 000000000..eb0c2c634
--- /dev/null
+++ b/week-11/amazonCart/src/components/AmazonCart.jsx
@@ -0,0 +1,10 @@
+import AppBody from "./AppBody";
+import ModalContainer from "./ModalContainer";
+export default function AmazonCart() {
+ return (
+
+ );
+}
diff --git a/week-11/amazonCart/src/components/AppBar.jsx b/week-11/amazonCart/src/components/AppBar.jsx
new file mode 100644
index 000000000..58dd5bafd
--- /dev/null
+++ b/week-11/amazonCart/src/components/AppBar.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import CartIcon from './CartIcon'
+import WishListIcon from './WishListIcon'
+export default function AppBar(){
+ return (
+
+ )
+}
diff --git a/week-11/amazonCart/src/components/AppBody.jsx b/week-11/amazonCart/src/components/AppBody.jsx
new file mode 100644
index 000000000..564746e1c
--- /dev/null
+++ b/week-11/amazonCart/src/components/AppBody.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ShoppingCart from './ShoppingCart'
+import OrderSummary from './OrderSummary'
+export default function AppBody(){
+
+ return (
+
+
+
+
+ )
+ }
diff --git a/week-11/amazonCart/src/components/CartIcon.jsx b/week-11/amazonCart/src/components/CartIcon.jsx
new file mode 100644
index 000000000..fa92bccc9
--- /dev/null
+++ b/week-11/amazonCart/src/components/CartIcon.jsx
@@ -0,0 +1,40 @@
+import { useRecoilValue } from "recoil";
+import { orderTotalAtom } from "../recoil/atoms/orderSummaryAtoms";
+import { Link } from "react-router-dom";
+
+export default function CartIcon() {
+ const summary = useRecoilValue(orderTotalAtom);
+ return (
+
+ Hello,user!
+
+
+
+
+ {summary.quantity}
+
+
+
![]()
+
+
+ {title}
+
+
+ In Stock
+
+
+
+ {count}
+
+
+
+
+
+
Order Summary
+
+
+
Items ({count}):
+
₹ {totalQuantity}
+
+
+
+
Order Total:
+
₹ {totalQuantity}
+
+
+
+
+
+
+
Purchase Successful!
+
+
+
+
+ Thank you for your purchase.Your order has been successfully
+ processed.
+
+
+ Total Amount: Rs.{summary.subtotal}
+
+
+
+
Shopping Cart
+
+ {items.map((el, idx) => {
+ return (
+
+
+
+
{title}
+
Rs.{price}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+