Add styles for Contactlist from Chakra

EmiliaWenta · Dec 7, 2023 · d9aab48 · d9aab48
1 parent 618a43b
commit d9aab48
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
-    "react-loader-spinner": "^5.4.5",
+    "react-loader-spinner": "^5.5.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",

diff --git a/src/components/ContactList/ContactList.jsx b/src/components/ContactList/ContactList.jsx
@@ -4,14 +4,25 @@ import { useSelector } from 'react-redux/es/hooks/useSelector';
 import ContactListItem from './ContactListItem/ContactListItem';
 import { selectFilterValue, selectContacts } from '../../redux/selectors';
 
-import { Heading } from '@chakra-ui/react';
-
-import css from './ContactList.module.css';
+import {
+  Box,
+  Flex,
+  Heading,
+  Input,
+  List,
+  ListItem,
+  ListIcon,
+  OrderedList,
+  UnorderedList,
+  Text,
+} from '@chakra-ui/react';
 
 export default function ContactList() {
   const { contacts } = useSelector(selectContacts);
   const filterValue = useSelector(selectFilterValue);
 
+  const contactsValue = contacts.length;
+
   const contactListItem = contacts
     .filter(item => item.name.toLowerCase().includes(filterValue.toLowerCase()))
     .map(item => (
@@ -25,10 +36,21 @@ export default function ContactList() {
 
   return (
     <>
-      <Heading as="h2" size="md" color="#2196f3">
-        Contacts
-      </Heading>
-      <ul className={css.contactList}>{contactListItem}</ul>
+      <Box>
+        <Flex
+          flexDirection="column"
+          gap="10px"
+          justify="center"
+          align="center"
+          paddingTop="30px"
+        >
+          <Heading as="h2" size="md" color="#2196f3">
+            Your contacts:
+          </Heading>
+          {contactsValue === 0 && <Text>You don't saved contacts yet.</Text>}
+          <List spacing={3}>{contactListItem}</List>
+        </Flex>
+      </Box>
     </>
   );
 }
diff --git a/src/components/ContactList/ContactListItem/ContactListItem.jsx b/src/components/ContactList/ContactListItem/ContactListItem.jsx
@@ -4,7 +4,22 @@ import { useDispatch } from 'react-redux';
 
 import { deleteContact } from '../../../redux/reducers/contacts/operations';
 
-import css from './ContactListItem.module.css';
+import {
+  Box,
+  Flex,
+  Heading,
+  Input,
+  List,
+  ListItem,
+  ListIcon,
+  OrderedList,
+  UnorderedList,
+  Button,
+  Card,
+  CardBody,
+  Text,
+} from '@chakra-ui/react';
+import { PhoneIcon, DeleteIcon } from '@chakra-ui/icons';
 
 export default function ContactListItem({ id, name, number }) {
   const dispatch = useDispatch();
@@ -14,18 +29,32 @@ export default function ContactListItem({ id, name, number }) {
   };
 
   return (
-    <li className={css.contactListItem__item} key={id.toString()}>
-      {name}: {number}
-      <button
-        className={css.contactListItem__button}
-        type="button"
-        onClick={() => {
-          handleRemove(id);
-        }}
-      >
-        Delete
-      </button>
-    </li>
+    <ListItem key={id.toString()} width="450px" align="flex-start">
+      <Card>
+        <CardBody>
+          <Flex gap="10px" justifyContent="space-between" alignItems="center">
+            <ListIcon as={PhoneIcon} color="blue.500" />
+            {name}: {number}
+            <Button
+              leftIcon={<DeleteIcon />}
+              colorScheme="teal"
+              variant="solid"
+              type="button"
+              bg="#2196f3"
+              color="white"
+              size="sm"
+              _hover={{ bg: 'darkblue' }}
+              _active={{ bg: 'darkblue' }}
+              onClick={() => {
+                handleRemove(id);
+              }}
+            >
+              Delete
+            </Button>
+          </Flex>
+        </CardBody>
+      </Card>
+    </ListItem>
   );
 }
 

diff --git a/src/components/ContactList/ContactListItem/ContactListItem.module.css b/src/components/ContactList/ContactListItem/ContactListItem.module.css
@@ -1,4 +1,4 @@
-.contactListItem__item {
+/* .contactListItem__item {
   color: #1f67a3;
   display: flex;
   width: 450px;
@@ -22,4 +22,4 @@
 
 .contactListItem__button:hover {
   background-color: #4396d9;
-}
+} */
diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
@@ -27,6 +27,8 @@ export default function Filter() {
           borderColor="#d8dee4"
           size="md"
           borderRadius="6px"
+          maxWidth="400px"
+          minWidth="350px"
           width="50%"
           onChange={handleFilter}
         />

diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-// import { Suspense } from 'react';
+import { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
-// import Loader from '../Loader/Loader';
+import Loader from '../Loader/Loader';
 import { Link } from 'react-router-dom';
 // import { StyledHeader, StyledLink } from './Layout.styled';
 import { useAuth } from 'hook/useAuth';
@@ -89,13 +89,12 @@ export const Layout = () => {
         </TabList>
 
         <TabPanels>
-          <Outlet />
+          <Suspense fallback={<Loader />}>
+            <Outlet />
+          </Suspense>
         </TabPanels>
       </Tabs>
       <ThemeToggler />
-      {/* <Suspense fallback={<Loader />}>
-        // 
-      </Suspense> */}
     </>
   );
 };
diff --git a/src/redux/reducers/auth/authSlice.js b/src/redux/reducers/auth/authSlice.js
@@ -55,6 +55,7 @@ const authSlice = createSlice({
         state.isLoading = true;
       })
       .addCase(currentUser.fulfilled, (state, action) => {
+        state.isLoading = false;
         state.isLoggedIn = true;
         state.user = action.payload.name;
       })

diff --git a/src/redux/selectors.js b/src/redux/selectors.js
@@ -1,5 +1,6 @@
 export const selectContacts = state => state.contact;
 export const selectFilterValue = state => state.filter;
+export const selectIsLoading = state => state.contact.isLoading;
 
 export const selectisLoggedIn = state => state.auth.isLoggedIn;