Commit style a cool beer page

BeerApp - Senior/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

BeerApp - Senior/src/views/BeerList/index.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Beer } from '../../types';
 import { fetchData } from './utils';
-import { Avatar, List, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material';
+import { Avatar, BadgeRoot, List, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material';
 import SportsBar from '@mui/icons-material/SportsBar';
 import { useNavigate } from 'react-router-dom';
+import { Button } from "@mui/material";
+import styles from "../Home/Home.module.css";
 
 const BeerList = () => {
   const navigate = useNavigate();
@@ -14,6 +16,52 @@ const BeerList = () => {
 
   const onBeerClick = (id: string) => navigate(`/beer/${id}`);
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(beerList.length / 5);
+
+  const itemsPerPage = 5; // Number of items to display per page
+
+  // Calculate the index range for the current page
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const displayedItems = beerList.slice(startIndex, endIndex);
+
+  const changePage = (pageNumber: number) => {
+    if (pageNumber >= 1 && pageNumber <= totalPages) {
+      setCurrentPage(pageNumber);
+    }
+  };
+
+  // Handle page navigation
+  const prevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const nextPage = () => {
+    if (currentPage < Math.ceil(beerList.length / itemsPerPage)) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+//   // Render the paginated list
+//   return (
+//     <div>
+//       <ul>
+//         {displayedItems.map((item, index) => (
+//           <li key={index}>{item}</li>
+//         ))}
+//       </ul>
+//       <div>
+//         <button onClick={prevPage}>Previous</button>
+//         <button onClick={nextPage}>Next</button>
+//       </div>
+//     </div>
+//   );
+// };
+
+
   return (
     <article>
       <section>
@@ -22,17 +70,40 @@ const BeerList = () => {
         </header>
         <main>
           <List>
-            {beerList.map((beer) => (
+            {displayedItems.map((beer) => (
               <ListItemButton key={beer.id} onClick={onBeerClick.bind(this, beer.id)}>
-                <ListItemAvatar>
+                <ListItemAvatar >
                   <Avatar>
-                    <SportsBar />
+                    <SportsBar className={styles.listitem} />
                   </Avatar>
                 </ListItemAvatar>
-                <ListItemText primary={beer.name} secondary={beer.brewery_type} />
+                <ListItemText className={styles.listitembeer} primary={beer.name} secondary={beer.brewery_type} />
               </ListItemButton>
             ))}
           </List>
+
+      {/* <ul>
+        {displayedItems.map((bear) => (
+          <li key={bear.id}>{bear.name}</li>
+        ))}
+      </ul> */}
+
+
+          <div>
+          <div className={styles.pagination}>
+            <div className={styles.button}>
+            <Button  variant="contained" size="small" onClick={() => changePage(currentPage - 1)} disabled={currentPage === 1}>
+          Previous
+        </Button>
+            </div>
+      <div>
+      <Button variant="contained" size="small" onClick={() => changePage(currentPage + 1)} disabled={currentPage === totalPages}>
+          Next
+        </Button>
+      </div>
+
+      </div>
+      </div>
         </main>
       </section>
     </article>

BeerApp - Senior/src/views/Home/Home.module.css

@@ -12,4 +12,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+}
+.pagination {
+  display: flex;
+}
+.button {
+  margin-right: 20px;
+}
+.listitem {
+  background-color: blue;
+}
+.listitembeer {
+  color:blue;
 }

BeerApp - Senior/src/views/Home/index.tsx

@@ -1,31 +1,139 @@
-import { useEffect, useState } from 'react';
-import { fetchData } from './utils';
-import { Beer } from '../../types';
-import { Link as RouterLink } from 'react-router-dom';
-import { Button, Checkbox, Paper, TextField, Link } from '@mui/material';
-import styles from './Home.module.css';
+import { useEffect, useState } from "react";
+import { fetchData } from "./utils";
+import { Beer } from "../../types";
+import { Link as RouterLink } from "react-router-dom";
+import { Button, Checkbox, Paper, TextField, Link } from "@mui/material";
+import styles from "./Home.module.css";
 
 const Home = () => {
   const [beerList, setBeerList] = useState<Array<Beer>>([]);
-  const [savedList, setSavedList] = useState<Array<Beer>>([]);
+  const [filterText, setFilterText] = useState<string>("");
+  const localStorageKey = "savedItems";
+
+  const initialSavedList = JSON.parse(
+    localStorage.getItem(localStorageKey) || "[]"
+  );
+
+  const [savedList, setSavedList] = useState<Array<Beer>>(initialSavedList);
+
+  const [savedBufferList, setSavedBufferList] =
+    useState<Array<Beer>>(savedList);
+
+  const [sortByName, setSortByName] = useState(false); // State for sorting
 
   // eslint-disable-next-line
   useEffect(fetchData.bind(this, setBeerList), []);
 
+  const filteredBeerList = beerList.filter((beer) =>
+    beer.name.toLowerCase().includes(filterText.toLowerCase())
+  );
+
+  const handleReload: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    fetchData(setBeerList);
+  };
+
+  const handleSaveItems = (beer: Beer) => {
+    if (!savedBufferList.some((item) => item.id === beer.id)) {
+      // If the item is not in the saved list, add it
+      const updatedSavedBufferList = [...savedBufferList, beer];
+      setSavedBufferList(updatedSavedBufferList);
+    } else {
+      // If the item is already in the saved list, remove it
+      const updatedSavedList = savedBufferList.filter(
+        (item) => item.id !== beer.id
+      );
+      setSavedBufferList(updatedSavedList);
+    }
+  };
+
+  console.log({ savedBufferList });
+
+  const handleSave = () => {
+    const existingData = JSON.parse(
+      localStorage.getItem(localStorageKey) || "[]"
+    );
+
+    // Combine existing data with savedBufferList
+    const updatedData = [...existingData, ...savedBufferList];
+
+    const uniqueData = updatedData.reduce((acc, obj) => {
+      if (!acc.find((item: any) => item.id === obj.id)) {
+        acc.push(obj);
+      }
+      return acc;
+    }, []);
+
+    // Save the unique data to local storage
+    localStorage.setItem(localStorageKey, JSON.stringify(uniqueData));
+
+    // Update the state and clear the buffer
+    setSavedList(uniqueData);
+    setSavedBufferList([]);
+  };
+
+  const handleRemove = () => {
+    localStorage.removeItem(localStorageKey);
+    setSavedList([]);
+    setSavedBufferList([]);
+  };
+
+  const sortItemsByName = () => {
+    const sortedList = [...filteredBeerList];
+    sortedList.sort((a, b) => a.name.localeCompare(b.name));
+    return sortedList;
+  };
+
+  const sortedList = sortByName ? sortItemsByName() : filteredBeerList;
+
   return (
     <article>
       <section>
         <main>
           <Paper>
             <div className={styles.listContainer}>
               <div className={styles.listHeader}>
-                <TextField label='Filter...' variant='outlined' />
-                <Button variant='contained'>Reload list</Button>
+                <TextField
+                  label="Filter..."
+                  variant="outlined"
+                  onChange={(event) => setFilterText(event?.target.value)}
+                  value={filterText}
+                />
+                <div>
+                  {savedBufferList.length > 0 && (
+                    <Button
+                      variant="contained"
+                      onClick={handleSave}
+                      style={{ marginLeft: "10px" }}
+                    >
+                      Save list
+                    </Button>
+                  )}
+                  <Button
+                    variant="contained"
+                    onClick={() => setSortByName(!sortByName)}
+                    style={{ marginLeft: "10px" }}
+                  >
+                    Sort by name
+                  </Button>
+
+                  <Button
+                    variant="contained"
+                    onClick={handleReload}
+                    style={{ marginLeft: "10px" }}
+                  >
+                    Reload list
+                  </Button>
+                </div>
               </div>
               <ul className={styles.list}>
-                {beerList.map((beer, index) => (
+                {sortedList.map((beer, index) => (
                   <li key={index.toString()}>
-                    <Checkbox />
+                    <Checkbox
+                      onChange={() => handleSaveItems(beer)}
+                      checked={savedBufferList.some(
+                        (item) => item.id === beer.id
+                      )}
+                    />
                     <Link component={RouterLink} to={`/beer/${beer.id}`}>
                       {beer.name}
                     </Link>
@@ -39,7 +147,7 @@ const Home = () => {
             <div className={styles.listContainer}>
               <div className={styles.listHeader}>
                 <h3>Saved items</h3>
-                <Button variant='contained' size='small'>
+                <Button variant="contained" size="small" onClick={handleRemove}>
                   Remove all items
                 </Button>
               </div>