// let greeting = 'Hello World, Welcome to RST Forum.';

// greeting.toLowerCase().indexOf('world');

// let message = 'Hello World\nThis is another line\nOne more line';

// message = `Hello World
// This is another line
// And this is another`;

// let score = 1000;

// if (score > 100) {
//   console.log('Pretty decent score');
// }

let age = 33;

if (age > 65) {
  console.log('Drinks are free');
} else if (age >= 21) {
  console.log('Drink are allowed');
} else if (age >= 18) {
  console.log("You can enter but you can't drink");
} else {
  console.log("You aren't allowed");
}

// let age = 33;

// if (age > 18) {
//   console.log('Entry Granted!');
// } else if (age >= 21) {
//   console.log('Drinks Allowed');
// } else if (age >= 65) {
//   console.log('Drinks FREE!');
// }

let password = 'hel';

if (password.length > 6) {
  if (password.search(' ') === -1) {
    console.log('Good password');
  } else {
    console.log("Bad password. You can't have spaces");
  }
} else {
  console.log('Password is too short');
}

// let loggedInUser = 'john';

// if (loggedInUser) {
//   console.log('Access Granted');
// } else {
//   console.log('Access Denied');
// }

// let age = 33;

// if (age >= 18 && age < 21) {
//   console.log('You are allowed to enter but not drink');
// } else if (age >= 21 && age < 65) {
//   console.log('You are allowed to do anything');
// } else if (age >= 65) {
//   console.log('Free drinks');
// } else {
//   console.log('Not allowed');
// }

// if (day === 1) {
//   console.log('Mon');
// } else if (day === 2) {
//   console.log('Tue');
// }

// let day = 22;

// switch (day) {
//   case 1:
//     console.log('Mon');
//     break;
//   case 2:
//     console.log('Tue');
//     break;
//   case 3:
//     console.log('Wed');
//     break;
//   case 4:
//     console.log('Thu');
//     break;
//   case 5:
//     console.log('Fri');
//     break;
//   case 6:
//     console.log('Sat');
//     break;
//   case 7:
//     console.log('Sun');
//     break;
//   default:
//     console.log('Invalid day');
// }

// let statusMessage = 'offline';

// if (statusMessage === 'offline') {
//   console.log('Red');
// } else {
//   console.log('Green');
// }

// statusMessage === 'online' ? console.log('Red') : console.log('Green');

// let color = statusMessage === 'offline' ? 'red' : 'green';

// console.log(color);

// let age = 33;

// age >= 18 && age < 21
//   ? console.log("Can enter, don't drink")
//   : age >= 21 && age < 65
//   ? console.log('You can drink')
//   : age > 65
//   ? console.log('Free drinks')
//   : console.log('not allowed');

// let status = 'online';

// // let color = status === 'online' ? 'green' : 'red';

// let color;

// if (status === 'online') {
//   color = 'green';
// } else {
//   color = 'red';
// }

// function hello() {
//   console.log('asdas');
// }

// console.log(hello);

// let colors = ['red', 'orange', 'yellow', 'green'];

// console.log(colors[colors.length - 1]);

// const products = [
//   [1, 'iPhone 13', 'Apple', 'Some description....', 500, 100000, true],
//   [2, 'iPhone 13', 'Apple', 'Some description....', 100000, 500, true],
//   [3, 'iPhone 13', 'Apple', 'Some description....', 100000, 500, true],
// ];

// const iPhone = [
//   1,
//   'iPhone 13',
//   'Apple',
//   'Some description....',
//   100000,
//   500,
//   true,
// ];

// console.log(iPhone[1]);

// // Array
// const product = [
//   1,
//   'iPhone 13',
//   'Apple',
//   'Some description....',
//   100000,
//   500,
//   true,
// ];

// // Object
// const product2 = {
//   srNo: 1,
//   price: 100000,
//   brand: 'Apple',
//   inStock: 500,
//   description: 'Some description....',
//   name: 'iPhone 13',
//   exchangeAvailable: true,
// };

// console.log(product[1]);
// console.log(product2.name);

// const products = [
//   {
//     srNo: 1,
//     price: 100000,
//     brand: 'Apple',
//     inStock: 500,
//     description: 'Some description....',
//     name: 'iPhone 13',
//     exchangeAvailable: true,
//   },
//   {
//     srNo: 2,
//     price: 100000,
//     brand: 'Apple',
//     inStock: 500,
//     description: 'Some description....',
//     name: 'iPhone 13',
//     exchangeAvailable: true,
//   },
// ];

// const product = {
//   srNo: 1,
//   price: 100000,
//   brand: 'Apple',
//   inStock: 500,
//   description: 'Some description....',
//   name: 'iPhone 13',
//   exchangeAvailable: true,
//   1: true,
//   'some information': 100,
// };

// console.log(product.srNo);
// console.log(product.brand);
// console.log(product[1]);
// console.log(product['some information']);

// const arr1 = [1, 2, 3];

// const arr1 = { 0: 1, 1: 2, 2: 3, length: 3 };

// console.log(arr1[2]);

// const song = {
//   name: 'Song Name',
//   length: 3.45,
//   artists: ['Art#1', 'Art#2'],
//   album: 'Some name',
//   url: 'https:////....',
//   info: {},
// };

// const pallette = {
//   red: '#eb4d4b',
//   yellow: '#f9ca24',
//   blue: '#30336b',
// };

// let color = 'yellow';
// console.log(pallette[color]);

// const fitnessData = {
//   totalSteps: 400000,
//   totalKms: 253.32,
//   avgCalorieBurn: 2300,
//   workoutsThisWeek: '5 of 7',
//   avgSleep: '5:45',
// };
// fitnessData.totalSteps++;
// console.log(fitnessData.totalSteps);

// fitnessData.avgSleep = '6:00';
// fitnessData.hello = 'World';

// console.log(fitnessData);

// for (let i = 0; i < 10; i++) {
//   console.log('Hello World');
// }

// for (let num = 1; num <= 10; num++) {
//   console.log(`${num}*${num}=${num * num}`);
// }

// const arr = [];

// for (let num = 50; num > 0; num++) {
//   arr.push(num ** 2);
// }

// const nums = [12, 34, 56, 34, 78, 54, 23, 12];

// for (let i = 0; i < nums.length; i++) {
//   console.log(nums[i]);
// }

// const movies = [
//   { movieName: 'Inception', rating: 3.8 },
//   { movieName: 'Avengers', rating: 3.4 },
//   { movieName: 'Iron Man', rating: 2.9 },
// ];

// for (let i = 0; i < movies.length; i++) {
//   const movie = movies[i];
//   console.log(`${movie.movieName} has a rating of ${movie.rating}`);
// }

// let fullName = 'John Doe';

// let reversedName = '';

// for (let i = fullName.length - 1; i >= 0; i--) {
//   reversedName += fullName[i];
// }

// console.log(reversedName);

// for (let i = 0; i < 5; i++) {
//   console.log(i);

//   for (let j = 0; j < 5; j++) {
//     console.log('     ', j);
//   }
// }

// const gameBoard = [
//   [4, 64, 8, 4],
//   [128, 32, 4, 16],
//   [16, 4, 4, 32],
//   [2, 16, 16, 2],
// ];

// let total = 0;

// for (let i = 0; i < gameBoard.length; i++) {
//   for (let j = 0; j < gameBoard[i].length; j++) {
//     // console.log(gameBoard[i][j]);
//     total += gameBoard[i][j];
//   }
// }

// console.log(total);

// let total = 0;

// const gameBoard2 = [
//   [
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//   ],
//   [
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//   ],
//   [
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//     [4, 64, 8, 4],
//   ],
// ];

for (let i = 0; i < 10; i++) {
  console.log(i);
}

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

// const arr = [
//   [
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//   ],
//   [
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//   ],
//   [
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//   ],
//   [
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//     [1, 2, 3, 4],
//   ],
// ];

// let total = 0;

// for (let i = 0; i < arr.length; i++) {
//   for (let j = 0; j < arr[i].length; j++) {
//     for (let k = 0; k < arr[i][j].length; k++) {
//       total += arr[i][j][k];
//     }
//   }
// }

// console.log(total);

// for (let i = 0; i < 10; i++) {
//   console.log(i);
// }

// let i = 0;

// while (i < 10) {
//   console.log(i);
//   i++;
// }

// const target = Math.floor(Math.random() * 1000) + 1;
// let guess = Math.floor(Math.random() * 1000) + 1;

// while (target !== guess) {
//   console.log(`Target: ${target} | Guess: ${guess}`);
//   if (guess === 13) {
//     break;
//   }
//   guess = Math.floor(Math.random() * 1000) + 1;
// }

// console.log(`Final Result: \nTarget: ${target} | Guess: ${guess}`);

// const target = Math.floor(Math.random() * 10) + 1;
// let guess = Math.floor(Math.random() * 10) + 1;

// while (true) {
//   console.log(`Target: ${target} | Guess: ${guess}`);

//   if (target === guess) {
//     break;
//   }

//   guess = Math.floor(Math.random() * 10) + 1;
// }

// console.log(`Final Result: \nTarget: ${target} | Guess: ${guess}`);

// const arr1 = [1, 2, 3, 4, 5];
// const arr2 = ['john', 'jane', 'jack', 'joe'];

// for (let i = 0; i < arr1.length; i++) {
//   console.log(arr1[i]);
// }

// for (let i = 0; i < arr2.length; i++) {
//   console.log(arr2[i]);
// }

// const arr1 = [1, 2, 3, 4, 5];
// const arr2 = ['john', 'jane', 'jack', 'joe'];

// for (let num of arr1) {
//   console.log(num);
// }

// for (let name of arr2) {
//   console.log(name);
// }

// const str = 'John Doe';

// for (let char of str) {
//   console.log(char);
// }

// const matrix = [
//   [1, 4, 7],
//   [9, 7, 2],
//   [9, 4, 6],
// ];

// for (let row of matrix) {
//   for (let num of row) {
//     console.log(num);
//   }
// }

// const productPrices = {
//   Apple: 80000,
//   OnePlus: 50000,
//   Samsung: 90000,
// };

// // // console.log(productPrices['Apple']);

// for (let product of Object.keys(productPrices)) {
//   console.log(productPrices[product]);
// }

// for (let key in productPrices) {
//   console.log(productPrices[key]);
// }

// function sayHello() {
//   console.log('Hello World');
//   console.log('Hello Again');
// }

// for (let i = 0; i < 50; i++) {
//   sayHello();
// }

// function rollDie() {
//   let roll = Math.floor(Math.random() * 6) + 1;
//   console.log(`Rolled: ${roll}`);
// }

// function throwDice() {
//   rollDie();
//   rollDie();
//   rollDie();
// }

// throwDice();

// function greet(firstName, message) {
//   console.log(`${message} ${firstName}`);
// }

// greet('Hello', 'John');
// greet('Jane', 'Hello');

// function add(a, b) {
//   console.log(a + b);
// }

// add(10, 5);

// function rollDie() {
//   let roll = Math.floor(Math.random() * 6) + 1;
//   console.log(`Rolled: ${roll}`);
// }

// // parameter
// function throwDice(times) {
//   for (let i = 0; i < times; i++) {
//     rollDie();
//   }
// }

// throwDice(2); // argument

function greet(firstName, lastName) {
  return `My name is ${firstName} ${lastName}.`;
}

const message = greet('Jane', 'Doe');
console.log(message);

// let fullName = 'Jane Smith';

// function greet() {
//   let fullName = 'John Doe';
//   console.log(`Hello ${fullName}`);
// }

// console.log(fullName);

// greet();

// if (true) {
//   var fullName = 'John Doe';
//   console.log(fullName);
// }

// console.log(fullName);

// for (var i = 0; i < 10; i++) {
//   console.log(i);
// }

// console.log(i);

// function outer() {
//   function inner() {
//     let movieName = 'Avengers';
//     console.log(movieName);
//   }

//   console.log(movieName);

//   inner();
// }

// outer();

// function add(a, b) {
//   return a + b;
// }

// const helloWorld = add;

// console.log(helloWorld(10, 5));

// // Anonoymous Function
// const add = function (a, b) {
//   return a + b;
// };

// function math(a, b, fn) {
//   return fn(a, b);
// }

// // console.log(add(10, 5));

// console.log(math(10, 20, add));

// console.log(
//   math(10, 20, function (a, b) {
//     return a - b;
//   })
// );

// const arr = [
//   function (a, b) {
//     return a + b;
//   },
//   function (a, b) {
//     return a - b;
//   },
//   function (a, b) {
//     return a * b;
//   },
// ];

// console.log(arr[1](10, 2));

// const maths = {
//   add: function (a, b) {
//     return a + b;
//   },
//   sub: function (a, b) {
//     return a - b;
//   },
//   mul: function (a, b) {
//     return a * b;
//   },
// };

// console.log(maths.sub(10, 2));

// function greet(fn) {
//   fn();
//   fn();
// }

// greet(function () {
//   console.log('Hello World');
// });

// setTimeout(function () {
//   console.log('Hello');
// }, 3000);

// setInterval(function () {
//   console.log(Math.random());
// }, 1);

// function raiseBy(num) {
//   return function (x) {
//     return x ** num;
//   };
// }

// const square = raiseBy(2);

// console.log(square(2));

// console.log(raiseBy(2)(2));

// const square = raiseBy(2);
// const cube = raiseBy(3);
// const hypercube = raiseBy(4);

// console.log(square(2));
// console.log(cube(2));
// console.log(hypercube(2));

// function isBetween(x, y) {
//   return function (num) {
//     return num >= x && num <= y;
//   };
// }

// const hello = isBetween(10, 20);

// console.log(hello(14));

// const isUnderAge = isBetween(0, 18);
// const canEnterButNotDrink = isBetween(18, 21);
// const canDrink = isBetween(21, 65);
// const isSenior = isBetween(65, 100);

// console.log(isUnderAge(5));
// console.log(canEnterButNotDrink(20));
// console.log(canDrink(30));
// console.log(isSenior(70));

// setTimeout(function () {
//   console.log(Math.random());
// }, 1000);

// greet();

// function greet() {
//   console.log('Hello World');
// }

// console.log(name);
// var name = 'John Doe';

// const arr = [1, 2, 3, 4, 5, 6];

// // for (let num of arr) {
// //   console.log(num);
// // }

// arr.forEach(function (num, i) {
//   console.log(`Index ${i} = ${num} `);
// });

// const movies = [
//   {
//     title: 'Avengers',
//     rating: 4.1,
//   },
//   {
//     title: 'Dr. Strange',
//     rating: 3.9,
//   },
//   {
//     title: 'Tenet',
//     rating: 4.3,
//   },
//   {
//     title: 'Joker',
//     rating: 4.7,
//   },
// ];

// movies.forEach(function (movie, i) {
//   console.log(`${i + 1} - ${movie.title} has a rating of ${movie.rating}`);
// });

// const names = ['john', 'jack', 'jane', 'james'];

// const uppercasedNames2 = names.map(function (name) {
//   return name.toUpperCase();
// });

// console.log(uppercasedNames2);

// const uppercasedNames = [];

// for (let name of names) {
//   uppercasedNames.push(name.toUpperCase());
// }

// console.log(uppercasedNames);

// const products = [
//   { name: 'Apple', price: 3 },
//   { name: 'Banana', price: 2 },
//   { name: 'Orange', price: 5 },
//   { name: 'Vada Pav', price: 6 },
// ];

// const productInRs = products.map(function (product) {
//   return { name: product.name, price: product.price * 75 };
// });

// console.log(productInRs);

const nums = [2, 3, 4, 7, 6, 8, 13, 10, 19, 12, 14, 22, 21, 16];

const numsData = nums.map(function (num) {
  return {
    number: num,
    isEven: num % 2 === 0,
  };
});

console.log(numsData);

// const nums = [2, 3, 4, 7, 6, 8, 13, 10, 19, 12, 14, 22, 21, 16];

// const doubles = nums.map(function (num) {
//   return num * 2;
// });

// console.log(doubles);

// const square = function (num) {
//   return num * num;
// }

// const square2 = (num) => {
//   return num * num;
// }

// const square3 = (num) => (
//   num * num
// )

// const square4 = num => (
//   num * num
// )

// const square5 = (num, num2) => (
//   num * num2
// )

// const square6 = () => (
//   10
// )

// const square7 = num => (num * num);

// const square8 = num => num * num;

// const nums = [2, 3, 4, 7, 6, 8, 13, 10, 19, 12, 14, 22, 21, 16];

// const doubles = nums.map((num) => num * 2);

// let movies = ['The Terminator', 'The Avengers', 'Jurassic Park', 'Titanic'];

// const result = movies.find((movie) => {
//   return movie.includes('The');
// });

// console.log(result);

// const books = [
//   {
//     title: 'The Shining',
//     author: 'Stephen King',
//     rating: 4.1,
//   },
//   {
//     title: 'Sacred Games',
//     author: 'Vikram Chandra',
//     rating: 4.5,
//   },
//   {
//     title: '1984',
//     author: 'George Orwell',
//     rating: 4.9,
//   },
//   {
//     title: 'The Alchemist',
//     author: 'Paulo Coelho',
//     rating: 3.5,
//   },
//   {
//     title: 'The Great Gatsby',
//     author: 'F. Scott Fitzgerald',
//     rating: 3.8,
//   },
// ];

// const goodBook = books.filter((b) => b.rating >= 7);

// console.log(goodBook);

// const names = ['jack', 'james', 'john', 'jane', 'josh', 'jrad'];

// const res = names.some((name) => {
//   return name[0] !== 'j';
// });

// console.log(res);

// const prices = [500.4, 211, 23, 5, 4, 22.2, -23.2, 9233];

// prices.sort((a, b) => a - b);

// console.log(prices);

// const nums = [1, 2, 3, 4, 5, 6];

// const result = nums.reduce((acc, currVal) => {
//   return acc * currVal;
// });

// console.log(result);

// acc  currVal
// 1     2
// 3     3
// 6     4
// 10    5
// 15    6
// 21

// let nums = [21, 221, 2, 1, 34, 123, 4342, 56, 4];

// const res = nums.reduce((acc, currVal) => {
//   if (currVal > acc) {
//     return currVal;
//   }
//   return acc;
// });

// console.log(res);

// acc  curVal
// 21   221
// 221  2
// 221  1
// 221

// const nums = [1, 2, 3, 4, 5, 6];

// const result = nums.reduce((acc, currVal) => acc + currVal, 10);

// console.log(result);

// function multiply(a, b) {
//   if (typeof a === 'undefined') {
//     a = 1;
//   }
//   if (typeof b === 'undefined') {
//     b = 1;
//   }
//   return a * b;
// }

function multiply(a = 1, b = 1) {
  return a * b;
}

console.log(multiply(10));

// const nums = [10, 3, 50, 8, -12, 100];

// console.log(Math.min(...nums));

// function printVals(a, b, c) {
//   console.log(a);
//   console.log(b);
//   console.log(c);
// }

// const names = ['john', 'jane', 'jack'];

// printVals(...names);

// const moderator = { canEdit: true, authority: 5 };
// const user = { canView: true, authority: 2.5 };

// const admin = { ...moderator };

// console.log(admin);

// function add(...nums) {
//   let total = 0;
//   for (let num of nums) {
//     total += num;
//   }
//   console.log(total);
// }

// add(10, 5, 50, 100, -12, 34, 0.12);

// function greet(user1, user2, ...others) {
//   console.log(user1);
//   console.log(user2);
//   console.log(others);
// }

// greet('john', 'jane', 'jack', 'james', 'joe');

// const users = ['john', 'jane', 'jack'];

// // const moderator = users[0];

// // const user = users[2];

// const [moderator, ...others] = users;

// console.log(moderator, others);

// const user = {
//   firstName: 'John',
//   lastName: 'Doe',
//   email: 'john.doe@gmail.com',
//   phone: 99982234567,
// };

// const { firstName, ...others } = user;

// console.log(firstName, others);

// const firstName = user.firstName;
// const lastName = user.lastName;

// function profile(user) {
//   console.log(
//     `${user.firstName} ${user.lastName} is ${user.age} years old and is a ${user.profession} by trade.`
//   );
// }

// function profile({ firstName, lastName, age, profession }) {
//   console.log(
//     `${firstName} ${lastName} is ${age} years old and is a ${profession} by trade.`
//   );
// }

// profile({
//   firstName: 'Jane',
//   lastName: 'Doe',
//   age: 20,
//   profession: 'programmer',
// });

// const movieReviews = [4.5, 5.0, 3.2, 2.1, 4.7, 3.8, 3.1, 3.9, 4.4];
// const highest = Math.max(...movieReviews);
// const lowest = Math.min(...movieReviews);

// let total = 0;
// for (let rating of movieReviews) {
//   total += rating;
// }

// const average = total / movieReviews.length;

// const info = { highest, lowest, average };

// console.log(info);

// const getReviewDetails = (arr) => {
//   const highest = Math.max(...arr)
//   const lowest = Math.min(...arr)
//   const total = arr.reduce((accumulator, nextVal) => accumulator + nextVal)
//   const average = total / arr.length

//   return {
//     highest,
//     lowest,
//     total,
//     average
//   }
// }

// const reviewList = [4.5, 5.0, 3.2, 2.1, 4.7, 3.8, 3.1, 3.9, 4.4]

// const statistics = getReviewDetails(reviewList)

// const username = 'janedoe';
// const role = 'admin';

// const user1 = { [role]: username };

// console.log(user1);

// const addProperty = (obj, k, v) => {
//   return { ...obj, [k]: v };
// };

// console.log(addProperty({ firstName: 'john' }, 'lastName', 'Doe'));

// const math = {
//   add: function (a, b) {
//     return a + b;
//   },
//   sub: function (a, b) {
//     return a - b;
//   },
//   square: function (num) {
//     return num * num;
//   },
//   PI: 3.14,
// };

// console.log(math.add(10, 5));

// const math = {
//   add(a, b) {
//     return a + b;
//   },
//   sub(a, b) {
//     return a - b;
//   },
//   square(num) {
//     return num * num;
//   },
//   PI: 3.14,
// };

// console.log(math.add(10, 5));

// console.log('Hello World');

function namaste() {
  console.log(this);
}

const user = {
  firstName: 'John',
  lastName: 'Doe',
  greet: function () {
    console.log(this.firstName);
  },
};

namaste();
user.greet();

function testFunc() {
  console.log(this);
}

// testFunc();

// // var aaaaaa = 'Hello World';
// let aaaaab = 'Test';

function profile() {
  return `My name is ${this.firstName} ${this.lastName} and I am ${this.age} years old.`;
}

// // profile();

// const user1 = {
//   firstName: 'John',
//   lastName: 'Doe',
//   age: 20,
//   profile,
// };

// const user2 = {
//   firstName: 'Jane',
//   lastName: 'Smith',
//   age: 22,
//   profile,
//   greet() {
//     console.log(`${this.profile()}. SOME MORE TEXT`);
//   },
// };

// // user2.profile();
// // user1.profile();
// // profile();

// user2.greet();

// // const greet2 = user1.greet;

// // // testFunc();
// // // user1.greet();

// // greet2();

// const hellos = {
//   messages: [
//     'hello world',
//     'hello universe',
//     'hello darkness',
//     'hello hello',
//     'heylo',
//   ],
//   pickMsg() {
//     const index = Math.floor(Math.random() * this.messages.length);
//     return this.messages[index];
//   },
//   start() {
//     setInterval(() => {
//       // this = hellos
//       console.log(this.pickMsg());
//     }, 1000);
//   },
// };

// hellos.start();

// const user1 = {
//   firstName: 'John',
//   lastName: 'Doe',
//   age: 20,
//   greet: () => {
//     // this = window
//     console.log(this.firstName);
//   },
// };

// user1.greet();

// console.dir(document.body);

// const p = document.getElementById('imp');

// console.dir(p.innerText);

// const lis = document.
// getElementsByTagName('li');
// for (let li of lis) {
//   console.dir(li.innerText);
// }

// const imp = document.getElementsByClassName('important');

// console.log(imp);

// const ul = document.getElementById('list');

// const imp = ul.getElementsByClassName('important');

// console.log(imp);

// const li = document.querySelector('#imp');
// const p = document.querySelector('p');
// const lis = document.querySelectorAll('li');
// const test = document.querySelectorAll('.important');
// const cls = document.querySelectorAll('[class]');

// console.log(li);
// console.log(p);
// console.log(lis);
// console.log(test);
// console.log(cls);

// const h1 = document.querySelector('h1');
// const ul = document.querySelector('ul');

// // console.log(h1.innerText);

// // h1.innerText = 'Hello World';
// // console.log(ul.innerText);

// ul.innerText = 'Hello';

// const p = document.querySelector('.special');

// // // console.log(p.innerHTML);

// // p.innerHTML = 'Hello <b>World</b>';

// const inp = document.querySelector('input');
// // inp.value = 'Hello World';

// console.log(inp.type);
// // inp.type = 'checkbox';

// p.id = 'Hello';

// const inp = document.querySelector('input');

// console.log(inp.getAttribute('value'));

// inp.setAttribute('value', 'Hello Universe');

// const item = document.querySelectorAll('.important')[1];

// console.log(item.innerText);

// // console.log(item.parentElement.parentElement.parentElement);
// // console.log(item.nextElementSibling.nextElementSibling);
// console.log(item.previousElementSibling);

const lis = document.querySelectorAll('li');

for (let li of lis) {
  // li.innerText = 'hello World';
  setInterval(function () {
    li.innerText = Math.random();
  }, 100);
}

// // const h1 = document.querySelector('h1');

// // h1.style.color = 'red';
// // h1.style.fontSize = '30px';
// // h1.style.textDecoration = 'underline';

// // document.body.style.fontFamily = 'Arial';

// // console.log(h1.style.fontWeight);

// // const colors = ['red', 'yellow', 'green', 'orange', 'teal'];
// // const fontWeight = [300, 400, 500, 600, 700];

// // setInterval(() => {
// //   let random = Math.floor(Math.random() * colors.length);
// //   h1.style.color = colors[random];
// //   h1.style.fontWeight = fontWeight[random];
// // }, 500);

// // const h1Styles = getComputedStyle(h1);

// // console.log(h1Styles.fontWeight);

// // const item = document.querySelector('li');

// // // item.setAttribute('class', 'done');

// // console.log(item.classList);

// // item.classList.toggle('todo');

// // const root = document.querySelector('#root');

// // const h1 = document.createElement('h1');
// // h1.innerText = 'Hello World from JavaScript.';
// // h1.style.color = 'red';
// // h1.style.textDecoration = 'underline';

// // const section = document.createElement('section');
// // section.style.border = '5px solid red';
// // section.style.padding = '20px';
// // section.appendChild(h1);

// // root.appendChild(section);

// // const ul = document.querySelector('#list');
// // const li = document.querySelector('.important');

// // const newLi = document.createElement('li');
// // newLi.innerText = 'Test li element';

// // // ul.appendChild(newLi);
// // console.log(ul);
// // console.log(li);
// // ul.insertBefore(newLi, li);

// // const p = document.querySelector('p.special');

// // const b = document.createElement('b');
// // const i = document.createElement('i');
// // b.innerText = 'HELLO WORLD';
// // i.innerText = 'Goodbye World';

// // // p.insertAdjacentElement('afterend', b);

// // p.prepend(b, i);

// // // const ul = document.querySelector('#list');
// // const li = document.querySelector('.important');

// // // ul.removeChild(li);

// // li.remove();

// const colors = ['red', 'yellow', 'green', 'orange', 'teal'];

// const btn = document.querySelector('button');

// // btn.onclick = function () {
// //   console.log('Hello World');
// //   let random = Math.floor(Math.random() * colors.length);
// //   document.body.style.backgroundColor = colors[random];
// // };

// // btn.onclick = function () {
// //   console.log('GoodBye World');
// // };

// btn.addEventListener('click', function () {
//   console.log('Hello');
//   let random = Math.floor(Math.random() * colors.length);
//   document.body.style.backgroundColor = colors[random];
// });

// btn.addEventListener('click', function () {
//   console.log('Goodbye');
// });

// btn.addEventListener('mousedown', function () {
//   document.body.style.backgroundColor = 'black';
//   // document.body.style.fontSize = '80px';
// });

// btn.addEventListener('mouseup', function () {
//   // document.body.style.backgroundColor = 'black';
//   document.body.style.fontSize = '100%';
// });

// window.addEventListener('scroll', function () {
//   let random = Math.floor(Math.random() * colors.length);
//   document.body.style.backgroundColor = colors[random];
// });

// const btn = document.querySelector('button');

// btn.addEventListener('mouseover', function () {
//   const height = Math.floor(Math.random() * window.innerHeight);
//   const width = Math.floor(Math.random() * window.innerWidth);
//   btn.style.left = `${width}px`;
//   btn.style.top = `${height}px`;
// });

// btn.addEventListener('click', function () {
//   btn.innerText = 'You Won!';
//   document.body.style.backgroundColor = 'green';
// });

// const colors = [
//   'red',
//   'orange',
//   'yellow',
//   'green',
//   'blue',
//   'purple',
//   'indigo',
//   'violet',
// ];

// const container = document.querySelector('#boxes');

// const printColor = function () {
//   console.log(this.style.backgroundColor);
// };

// for (let color of colors) {
//   const box = document.createElement('div');

//   box.style.backgroundColor = color; // Style the box
//   box.classList.add('box'); // Add a class

//   container.append(box); // Append box to container

//   // Add event listener to the box
//   box.addEventListener('click', printColor);
// }

// btn.addEventListener('click', function (event) {
//   console.log(event.ctrlKey);
//   console.log(event.target);
// });

// inp.addEventListener('keypress', function (event) {
//   p.innerText = event.target.value;
// });

// const btn = document.querySelector('button');
// const inp = document.querySelector('input');
// const ul = document.querySelector('ul');

// inp.addEventListener('keypress', function (event) {
//   console.log(event);
//   if (event.key === 'Enter') {
//     const li = document.createElement('li');
//     li.innerText = inp.value;
//     li.addEventListener('click', function () {
//       li.style.textDecoration = 'line-through';
//     });
//     const btn = document.createElement('button');
//     btn.innerText = 'Delete';
//     btn.addEventListener('click', function () {
//       li.remove();
//     });
//     li.append(btn);

//     ul.append(li);
//     inp.value = '';
//   }
// });

// btn.addEventListener('click', function (event) {
//   const li = document.createElement('li');
//   li.innerText = inp.value;
//   li.addEventListener('click', function () {
//     li.style.textDecoration = 'line-through';
//   });
//   const btn = document.createElement('button');
//   btn.innerText = 'Delete';
//   btn.addEventListener('click', function () {
//     li.remove();
//   });
//   li.append(btn);

//   ul.append(li);
//   inp.value = '';
// });

// const form = document.querySelector('form');

// form.addEventListener('submit', function (event) {
//   event.preventDefault();
//   console.dir(event.target.children.fullName.value);
//   console.dir(event.target.children.phone.value);
//   console.dir(event.target.children.tos.checked);
// });

// const multiply = (x, y) => x * y;

// const square = (x) => multiply(x, x);

// const rightTriangle = (a, b, c) => {
//   return 9 + 16 === 25;
// };

// rightTriangle(3, 4, 5);

// console.log('The first log');
// alert('An interruption in between');
// console.log('The last log');

// console.log('The first log');

// setTimeout(() => {
//   console.log('The line that takes time to complete');
// }, 3000);

// console.log('The last log');

// const btn = document.querySelector('button');

// // Callback hell
// setTimeout(() => {
//   // 1st
//   btn.style.transform = `translateX(100px)`;
//   setTimeout(() => {
//     // 2nd
//     btn.style.transform = `translateX(200px)`;
//     setTimeout(() => {
//       btn.style.transform = `translateX(300px)`;
//       setTimeout(() => {
//         btn.style.transform = `translateX(400px)`;
//         setTimeout(() => {
//           btn.style.transform = `translateX(500px)`;
//           setTimeout(() => {
//             btn.style.transform = `translateX(600px)`;
//           }, 1000);
//         }, 1000);
//       }, 1000);
//     }, 1000);
//   }, 1000);
// }, 1000);

// const willGetAPlaystation = new Promise((resolve, reject) => {
//   setTimeout(() => {
//     const random = Math.random();

//     if (random > 0.5) {
//       resolve();
//     } else {
//       reject();
//     }
//   }, 3000);
// });

// console.log(willGetAPlaystation);

// willGetAPlaystation
//   .then(() => {
//     console.log('THANK YOU');
//   })
//   .catch(() => {
//     console.log('*&*%^&$^%');
//   });

// const makePlayStationPromise = () => {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       const rand = Math.random();
//       if (rand < 0.5) {
//         resolve({ hello: 'World' });
//       } else {
//         reject({ error: 'Some error ' });
//       }
//     }, 1000);
//   });
// };

// const res = makePlayStationPromise();
// res
//   .then((data) => {
//     console.log(data);
//   })
//   .catch((error) => {
//     console.log(error);
//   });

// // console.log(res);

const fakeRequest = (url) => {
  return new Promise((resolve, reject) => {
    const pages = {
      '/users': [
        { id: 1, username: 'john' },
        { id: 2, username: 'jane' },
      ],
      '/users/1': {
        id: 1,
        username: 'johndoe',
        topPostId: 53231,
        city: 'mumbai',
      },
      '/users/5': {
        id: 1,
        username: 'janedoe',
        topPostId: 32443,
        city: 'pune',
      },
      '/posts/53231': {
        id: 1,
        title: 'Really amazing post',
        slug: 'really-amazing-post',
      },
    };

    const data = pages[url];

    if (data) {
      resolve({ status: 200, data });
    } else {
      reject({ status: 404 });
    }
  });
};

fakeRequest('/users')
  .then((response) => {
    const userId = response.data[0].id;
    return fakeRequest(`/users/${userId}`);
  })
  .then((response) => {
    const postId = response.data.topPostId;
    return fakeRequest(`/posts/${postId}`);
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

// // const res = fetch('https://swapi.dev/api/peosdxfple/1');

// // res
// //   .then((response) => {
// //     if (!response.ok) {
// //       throw 'DID NOT WORK';
// //     }
// //     return response.json();
// //   })
// //   .then((res) => {
// //     console.log(res);
// //   })
// //   .catch((err) => console.log(err));

// // const res = axios.get('https://swapi.dev/api/people');

// // res
// //   .then((response) => {
// //     const luke = response.data.results[0];
// //     const film = luke.films[0];
// //     return axios.get(film);
// //   })
// //   .then(({ data }) => {
// //     console.log(data);
// //   })
// //   .catch((err) => {
// //     console.log(err.message);
// //   });

// function test1() {
//   return new Promise((resolve, reject) => {
//     const random = Math.random();

//     if (random > 0.5) {
//       resolve('fulfilled');
//     } else {
//       reject();
//     }
//   });
// }

// async function test2() {
//   const random = Math.random();

//   if (random > 0.5) {
//     return 'fulfilled';
//   } else {
//     throw 'rejected';
//   }
// }

// const res = test2();
// res
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((err) => {
//     console.log(err);
//   });

// // const res = test1();
// // console.log(res);

// function getData() {
//   const response = axios.get('https://swapi.dev/api/people/1');
//   response.then((res) => {
//     console.log(res.data);
//   });
// }

// async function getData() {
//   try {
//     const response = await axios.get('https://swapi.dev/api/people/1');
//     console.log(response.data);
//   } catch (err) {
//     console.log(err.message);
//   }
// }

// getData();

async function getData() {
  const poke1Request = axios.get('https://pokeapi.co/api/v2/pokemon/1');
  const poke2Request = axios.get('https://pokeapi.co/api/v2/pokemon/2');
  const poke3Request = axios.get('https://pokeapi.co/api/v2/pokemon/3');

  // const poke1 = await poke1Request;
  // const poke2 = await poke2Request;
  // const poke3 = await poke3Request;

  const result = await Promise.all([poke1Request, poke2Request, poke3Request]);

  console.log(result[0]);
  console.log(result[1]);
  console.log(result[2]);
}

getData();

// // function initializeDeck() {
// //   const deck = [];
// //   const suits = ['hearts', 'diamonds', 'spades', 'clubs'];
// //   const values = '2,3,4,5,6,7,8,9,10,J,Q,K,A';
// //   for (let value of values.split(',')) {
// //     for (let suit of suits) {
// //       deck.push({ value, suit });
// //     }
// //   }
// //   return deck;
// // }

// // function drawCard(deck, drawnCards) {
// //   const card = deck.pop();
// //   drawnCards.push(card);
// //   return card;
// // }

// // function drawMultiple(numCards, deck, drawnCards) {
// //   const cards = [];
// //   for (let i = 0; i < numCards; i++) {
// //     cards.push(drawCard(deck, drawnCards));
// //   }
// //   return cards;
// // }

// // function shuffle(deck) {
// //   for (let i = deck.length - 1; i > 0; i--) {
// //     let j = Math.floor(Math.random() * (i + 1));
// //     [deck[i], deck[j]] = [deck[j], deck[i]];
// //   }
// //   return deck;
// // }

// // const deck1 = initializeDeck();
// // shuffle(deck1);
// // const hand = [];

// // // drawCard(deck1, hand);
// // // drawCard(deck1, hand);
// // // drawCard(deck1, hand);
// // // drawMultiple(4, deck1, hand);

// // console.log(deck1);

// const makeDeck = () => {
//   return {
//     deck: [],
//     drawnCards: [],
//     suits: ['hearts', 'diamonds', 'spades', 'clubs'],
//     values: '2,3,4,5,6,7,8,9,10,J,Q,K,A',
//     initializeDeck() {
//       for (let value of this.values.split(',')) {
//         for (let suit of this.suits) {
//           this.deck.push({ value, suit });
//         }
//       }
//       return this.deck;
//     },
//     drawCard() {
//       const card = this.deck.pop();
//       this.drawnCards.push(card);
//       return card;
//     },
//     drawMultiple(numCards) {
//       const cards = [];
//       for (let i = 0; i < numCards; i++) {
//         cards.push(this.drawCard());
//       }
//       return cards;
//     },
//     shuffle() {
//       const { deck } = this;
//       for (let i = deck.length - 1; i > 0; i--) {
//         let j = Math.floor(Math.random() * (i + 1));
//         [deck[i], deck[j]] = [deck[j], deck[i]];
//       }
//     },
//   };
// };

// const deck1 = makeDeck();
// const deck2 = makeDeck();
// const deck3 = makeDeck();
// // deck1.initializeDeck();
// // deck1.shuffle();
// // deck1.drawCard();
// // deck1.drawCard();
// // deck1.drawMultiple(4);

// console.log(deck1);
// console.log(deck2);
// console.log(deck3);

// function Person(firstName, lastName, age) {
//   this.firstName = firstName;
//   this.lastName = lastName;
//   this.age = age;
// }

// Person.prototype.greet = function () {
//   console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
// };
// Person.prototype.profession = 'Full-Stack Developer';

// const jane = new Person('jane', 'doe', 20);
// const jack = new Person('jack', 'smith', 23);

// console.log(jane);
// console.log(jack);

// class Person {
//   constructor(firstName, lastName, age) {
//     this.firstName = firstName;
//     this.lastName = lastName;
//     this.age = age;
//   }

//   greet() {
//     console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
//   }
// }

// const jane = new Person('jane', 'doe', 20);
// const jack = new Person('jack', 'smith', 23);

// console.log(jane);
// console.log(jack);

// class Deck {
//   constructor() {
//     this.deck = []
//     this.drawnCards = []
//     this.suits = ['hearts', 'diamonds', 'spades', 'clubs']
//     this.values = '2,3,4,5,6,7,8,9,10,J,Q,K,A'
//   }

//   initializeDeck() {
//     const { suits, values, deck } = this
//     for (let value of values.split(',')) {
//       for (let suit of suits) {
//         deck.push({ value, suit })
//       }
//     }
//     return deck
//   }

//   drawCard() {
//     const card = this.deck.pop()
//     this.drawnCards.push(card)
//     return card
//   }

//   drawMultiple(numCards) {
//     const cards = []
//     for (let i = 0; i < numCards; i++) {
//       cards.push(this.drawCard())
//     }
//     return cards
//   }

//   shuffle() {
//     const { deck } = this
//     for (let i = deck.length - 1; i > 0; i--) {
//       let j = Math.floor(Math.random() * (i + 1))
//       ;[deck[i], deck[j]] = [deck[j], deck[i]]
//     }
//   }
// }

// const deck1 = new Deck()
// deck1.initializeDeck()
// deck1.shuffle()
// const deck2 = new Deck()
// deck2.initializeDeck()
// deck2.shuffle()

// deck1.drawCard()
// deck2.drawCard()
// deck2.drawCard()
// deck2.drawMultiple(2)

// console.log(deck1)
// console.log(deck2)

class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }

  login(pass) {
    if (pass === this.password) {
      console.log('Welcome back');
    } else {
      console.log('Incorrect password entered.');
    }
  }
}

class Admin extends User {
  constructor(username, password, email) {
    super(username, password);
    this.email = email;
  }

  createGroup(groupName) {
    console.log('New group created. ', groupName);
  }
}

const jane = new User('jane', 'jane123');
const john = new Admin('john', 'john123');

john.login('john123');
john.createGroup('JavaScript');

1. Generate some boilerplate for a basic React application.
   • Go into your workspace/projects directory using the terminal.
   • cd ~/Documents/FullStack/Workspace
   • mkdir rststore
   • npx create-react-app@latest frontend –use-npm
   • code .
   • cd frontend
   • npm start
   • Open public/index.html and clean up the file. Remove all the comments and change the title and meta content.
   • Delete all the files in the src folder. Create and add basic boilerplate code to App.js and index.js.

2. Chakra UI Installation and Setup

• npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
• npm install react-icons –save
• Edit index.js file. Import ChakraProvider component and wrap the App component with it.

5. Install and Implement React Router

• npm install react-router-dom
• Complete all the React Router setup on the App page.
• Modify Product cards, Header links etc. Use React Routers Link component instead.

6. Design and build the ProductScreen component.

7. Setting up the backend
   • Close the React server.
   • Create a folder named backend outside the frontend folder in the root of our project.
   • npm init in the root. (not inside the backend or frontend folders, but outside in the root directory)
   • During npm init setup the main will be server.js
   • npm install express (in the root folder)
   • Create a file backend/server.js in the backend folder and a folder data and copy products.js to this folder.
   • Create some routes to serve the data from the backend
   • Create a script for start in package.json
   • Create 2 basic routes for ‘/’ and ‘/api/products’
   • Convert products.js export statement to commonjs format.
   • Create another route to fetch single product by id.

8. Fetching data from our backend using React
   • Inside the frontend folder, run npm install axios
   • Modify the HomeScreen component to fetch and store data in the component.
   • To fix the issue of our backend address for now, we’ll add a proxy to the frontend’s package.json. Add this “proxy”: “http://127.0.0.1:5000”, to frontend/package.json
   • Make sure both frontend and backend are running in two terminals and test it out.
   • Modify the ProductScreen component to also make a request to our backend to fetch data.
   • Delete the projects.js file from our frontend’s src folder as we no longer need it.

9. More backend setup

• In the root directory: run
• npm install -D nodemon concurrently. ‘-D’ is a dev dependency, meaning we only need these modules during development.
• These above packages will help us auto restart our server when we change our code, so we don’t have to do it manually.
• Modify scripts in package.json (root folder) to add some scripts to use our npm command directly to work them.

10. Setup environment variables

• npm install dotenv
• Do the dotenv setup in server.js file and create a .env file in the root folder.

11. Convert imports to ES Modules

• Add “type”: “module” to package.json file. Change all import and export statements to ES module style.
• Note: You will have to add .js extension while using ES modules in the backend.

12. Install and setup MongoDB

• After installation, setup MongoDB Compass
• Use this as the connection string: mongodb://localhost:27017/rststore
• Add the following in the .env
  MONGO_URI = mongodb://localhost:27017/rststore

13. Connect to the database

• Install mongoose: npm install mongoose (in the root folder)
• Create a folder named config in the backend folder and create a file named backend/config/db.js inside it.
• Do all the mongoDB connection setup
• Import db.js into server.js and run the connectDB function.
• Start the server and check if any error.

14. Improve console log messages.

• Run this command in the root folder: npm install colors
• Add stylings to server and db console messages.

15. Create database models for data

• Create a models folder inside the backend folder.
• Create all our data model schemas.

16. Prepare sample data for the backend data seeding

• Delete all the _id key-values from the products.js as MongoDB
  will automatically create it for us.
• Create data/users.js file and fill it with a few user objects.
• npm install bcryptjs – for password hashing
• Use bcryptjs for the password fields to encrypt the password. (temporary)

17. Create database seeder for quick sample data generation (optional)

• Create backend/seeder.js file inside the backend folder.
• Add seeding logic and create import and destroy scripts.

18. Fetching products from the database

• Create a folder named backend/routes in the backend folder.
• Create a file named backend/routes/productRoutes.js
• npm install express-async-handler – we will wrap our callbacks with this function so that we can do error handler in a better way.
• Move the products and single product fetch routes to this file and add all the logic for now.
• Test the routes in Postman

19. Do Postman setup to work with our API (optional)Custom error handling. Run the following in the root folder.

20. Custom error handling. Run the following in the root folder.

• npm install express-async-handler
• Create a folder named backend/middleware in the backend folder
• Create an errorMiddleware.js and add logic to handle errors.

21. Introduction to Redux

• The Redux Pattern
• Download the Redux DevTools brower extension.
• Go to the frontend folder. cd frontend
• npm install redux react-redux redux-thunk redux-devtools-extension
• In the src folder, create a file named store.js
• Import Provider and store into the index.js and do all the setup.

22. Create our first reducer

• In frontend/src create a folder called reducers – (frontend/src/reducers).
• Create a file (our reducer) named productReducer.js inside the reducers folder and add all the reducer logic.
• Next, import productListReducer to store.js and add it to the combineReducers({}) function’s argument object as a new key/value.
• Create a folder called constants in the frontend/src folder and inside it create the productConstants.js file to store all our action names.
• Create a folder called actions in the frontend/src folder and inside it create the productActions.js file to store all our action functions. We will dispatch actions to our reducer.
• All these steps, we do for each resource of our app. So, whether it’s products, or users or some other model/feature, this is the format/pattern we will follow for Redux. We create the constant, the reducer the action and then we fire it off in the component.
• Next, we now want to fire this action off in our HomeScreen components where we need this products data.

22. 
    
23. Getting Redux State in the Home Screen
    • Clean up the file. Remove axios import, the [products, setProducts] state variables and remove everything from inside useEffect. We don’t need these anymore.
    • Import useDispatch and useSelector from ‘react-redux’. Also import listProducts from ‘../actions/productActions’.
    • The first hook will be used to dispatch/call an action, and the other is use to select parts of the state. Here we will need the productList part of the state.
    • Create the dispatch object using the useDispatch hook and call it in useEffect to fire the listProducts action.
    • To select products from our state, we need to use the useSelector hook. This hook will take in an arrow function. This function gets state and then we can select which part of the state do we want.
    • Add a conditional to display a loading message, error message or our product list.

24. Create Message and Loader components.

• Use the Spinner and Alert components from ChakraUI to add these.

25. Single product details screen Reducer and Action

• Again, we will follow the same pattern/steps as earlier.
• Start off by adding the required constants. Since this is for the single product screen, we will add the constants once again to the productConstants.js
• Create a new reducer named productDetailsReducer in productReducers.js.
• Whenever we create a new reducer, we have to add it to our store. So, import productDetailsReducer in the store.js file and add a new piece of state named productDetails.
• Next, step will be to create an action. Add a new action named listProductDetails to the actions file.
• Next, in the ProductScreen.js, get rid of axios and clean up useEffect. Import useDispatch, useSelector and the listProductDetails action that we just created.
• Create the dispatch object and dispatch the listProductDetails action in the useEffect hook. You will now be able to see the state in Redux Devtools.
• Use useSelector hook and select the productDetails piece of state. De-structure the correct values and use them in the JSX to display the product details, error and loading components.

26. Cart and Quantity

• Add a quantity select box with it’s logic to only contain the number of items in stock.
• The add to cart button should redirect to the a cart page/screen with the product id and quantity as a query string.

27. Cart Screen and Route

• Create screens/CartScreen.js file in the screens folder.
• Import this new CartScreen.js component in the App.js file and create a route for the Cart screen. <Route path=’/cart/:id?’ component={CartScreen} />
• The :id? question mark here means that this id is optional in the route/address. Because if we directly go to the cart page we will not have any id.

28. Cart Functionality

• Create constants/cartConstants.js and add CART_ADD_ITEM and CART_REMOVE_ITEM constant varaibles to it.
• Create reducers/cartReducer.js and add the reducer logic.
• Import cartReducer.js in store.js and add the cartReducer function to the combineReducers argument object.
• Create actions/cartActions.js. Do the below steps for the building the cart actions.
• Import axios. We need axios to make a request to /api/products/:id to get the data/fields for that particular product.
• Import CART_ADD_ITEM from actions/cartActions.js.
• Then create the addToCart function which will get a (id, qty). We will get both these from the URL params.
• We will need to use thunk as we are making an async request. So we will return an async function from it. This async function will get (dispatch, getState). dispatch is used for dispatching as usual, but getState will allow us to get our entire state tree. So anything we want like productList, productDetails, cart, we can get it using getState.
• After dispatching, we also want to store this in localStorage.
• getState().cart.cartItems will give us back a JavaScript object and we can only store strings in the browser localStorage. Hence we have to stringify it. And when we want to take it out and read, we will have to parse it using JSON.parse
• So we saved it to localStorage but where do we get it to actually fill the state, whenever we reload. We do that in the store.js.
• We will first see if there is anything in cartItems in the localStorage. If it’s there, then we will add it to the initial state, so always loaded on the app’s first load. If nothing is present in the localStorage then we will just add an empty array.

29. Completing CartScreen.js and creating ‘add to cart’ functionality

• Build the add to cart functionality.
• Finish the CartScreen.js component.
• Add functionality to the Remove Item from cart button. Follow the steps below:
• Add CART_REMOVE_ITEM to the cartReducer.js file.
• Create an action named removeFromCart in the cartActions.js file.
• Fire this action in the removeFromCartHandler function in the CartScreen component.

30. Clean up the backend routes by extracting their logic into controllers

• In the backend folder, create a folder called controller and create a file called productController.js inside it.
• Extract all the logic to the productController.js from the routes file. The routes file should now only be for routing and all logic will go in to the controllers.
• In productRoutes.js instead of using the method router.use(), instead use router.route() and add the route inside and then chain the appropriate methods get, post, put, delete etc. to it. This way we can define different controller logic to the same route. We will see this in sometime.

31. User Authentication Endpoints (Backend Routes)

• Create routes/userRoutes.js and controllers/userController.js.
• Start by working on an auth route. So here we want to authenticate a user by email and password. And then we want to send back some data, a token which we can save on the client (browser), so in the frontend (browser) we can use that token to access protected pages/routes (react frontend routes).
• Import the ../models/userModel.js as we will need it to create new users in the MongoDB database.
• Create authUser controller function. Inside it, first thing is to get data from the body. This data is on the request object and is something that will be sent here (to the backend) by a POST request and is usually sent via a form on the frontend pages. We can also mimic this sending data using Postman.
• Before getting the data, make a new folder in rststore Postman collection.. Add a folder called Users & Auth. Inside that create a new request. Name it POST /api/users/login with the url to {{URL}}/api/users/login and add an email & password object to Body of type JSON.
• Now this object that we add to the body tab in Postman, what will be sent in an object (key-value) on the request object. We extract that from request.body.
• But in order for parsing this JSON data that we get on the request object from the frontend/Postman, we need to add another middleware in server.js.
• Add the following line after const app = express part. app.use(express.json())
• Create the authUser controller function. Also import this into userRoutes.js and add a login route.
• Also import userRoutes in server.js and add the routes for users..
• app.use(‘/api/users’, userRoutes)
• Use the findOne() method on the User model to get the user’s object from the database.
• Password needs to be encrypted before checking as we are storing encrypted passwords in the database, so add a method on the User Model itself. Edit models/userModel.js and add a method on the userSchema – userSchema.methods.matchPassword.
• Use this new method in userController.js and finished the implementation.
• Don’t return the token for now. Just set it to null. Return all other details leaving the password as a json object and also add an else condition.
• Test this new endpoint in POSTMAN. (start only the server for now)

32. Using Json Web Tokens (JWT)

• What are JWTs and how do they work?
• Installation: npm install jsonwebtoken
• Create a folder called backend/utils. Put all helpers and utility functions here. Inside it create a file named generateToken.js and create the token generation function. Also add the JWT_SECRET to the env as this is needed for the token generation.
• Import generateToken.js into userController.js and use the function in the response object’s token property (key).
• Test in Postman. Add this request to Postman.

33. Creating custom Authentication Middleware to accessprotected routes.

• Add a new request in Postman. GET /api/users/profile with request URL {{URL}}/api/users/profile.
• Add getUserProfile controller method to userController.js and also export it. Also add the route for this in userRoutes.js.
• Create a new file named middleware/authMiddleware.js. This middleware will validate the token.
• Implement the protect middleware function. In our backend we will be getting the authorization tokens in the header object in requests (we will send it that way from React).
• Import protect into routes/userRoutes.js. We need to add our middleware function here to the /profile endpoint.
• Implement the complete of the protect middleware function.
• Once done, we can now use this middleware to any endpoint (route) that we want to be protected, that is only accessible using a valid JWT.
• Finish implementation of the getUserProfile controller function in userController.js
• Save the token in Postman, so we don’t have to keep copying and pasting tokens to the Headers. Add Tests to login request so that the token can be set in an environment variable. After that set profile request Auth Type to Bearer Token.

34. User registration

• Add a new request to Postman: POST /api/users with url as {{URL}}/api/users. This will be a POST request. So a GET request to the same endpoint will give us a total list of users, while a POST request will create a new user.
• Add a new registerUser controller function to the userController.js file. After that, import this function to userRoutes.js and create a new register route.
• #### Password Encryption ####
• The password still isn’t encrypted as we sent it directly to the User.create() function. So to encrypt password while creating a new user and adding it to the database, create a new mongoose middleware.
• In mongoose, we can set certain things to happen on saves or finds etc. So when we execute the User.create function, before saving to database, we can run some code to encrypt the password and then save.
• Test the new endpoint in Postman.

35. User Login Reducer and Action

• Add all constants for the login. Create the file constants/userConstants.js and add all the constants.
• Create the reducers/userReducer.js file and add the userLoginReducer function. Add all the necessary actions and logic.
• Import userLoginReducer to store.js and add it to the combineReducers function’s parameter object.
• Create the actions file in actions/userActions.js and add the action logic. This is pretty much the same as the earlier actions. Only difference here is that we have to add some headers to the axios request, and also store the user data to localStorage.
• Lastly, since we stored the user data in localStorage, we should load them in the initial state in store.js. Create a variable named userInfoFromStorage and set it to get it’s value from localStorage. In the initialState variable, add another key named userLogin and set it’s value to userInfo: userLogin: { userInfo: userInfoFromStorage }

36. User Login Screen

• Create a new component called components/FormContainer.js which will just be a simple wrapper for our form elements. Just a box with some styling, which we will use to add all our forms in.
• Create a new screen in screens/LoginScreen.js and write the ui and logic.
• Import it in App.js and create a route for it.
• (styling changes overall if required)

37. Implement all the Login – Redux functionality in the LoginScreen component.

38. Header modification to show User and User Logout feature

• Modify Header.js. Import redux modules, for running the LOGOUT action and getting access to the state.
  import {useDispatch, useSelector} from ‘react-redux’
• Import Menu, MenuButton, MenuList, MenuItem from Chakra.
• Get the userInfo state using useSelector.
• Also import import { IoChevronDown } from ‘react-icons/io5’
• Create a logout action in userActions.js.
• Implement all the logic.

39. User Register, Constants, Reducer, Action and Screen.

• Add new REGISTER constants to the userConstants.js
• Create userRegisterReducer in the userReducers.js
• Import this reducer in store.js and add it to combineReducers
• Create register action in userActions.js
• Create the RegisterScreen component and add it to the App.js router.

40. Update User Profile endpoint in the backend

• Create a updateUserProfile controller method and export it.
• Import updateUserProfile in userRoutes.js and add a PUT request on the same /profile route. This route will also take the middleware protect as this is a protected endpoint.