groups

src/components/App.jsx

@@ -8,8 +8,6 @@ import { PublicRoute } from '../routes/PublicRoute';
 import { useAuth } from '../hooks/useAuth';
 import operations from '../redux/auth/authOperations';
 
-import { HourglassLoader } from './Loader/Loader';
-
 const HomePage = lazy(() => import('pages/HomePage/HomePage'));
 const LoginPage = lazy(() => import('pages/LoginPage/LoginPage'));
 const ContactsPage = lazy(() => import('pages/ContactsPage/ContactsPage'));
@@ -25,35 +23,35 @@ const App = () => {
     dispatch(operations.refreshUser());
   }, [dispatch]);
 
-  return isRefreshing ? (
-    <HourglassLoader />
-  ) : (
-    <Routes>
-      <Route path="/" element={<Layout />}>
-        <Route index element={<HomePage />} />
-
-        <Route
-          path="register"
-          element={<PublicRoute component={<RegisterPage />} />}
-        />
-        <Route
-          path="login"
-          element={<PublicRoute component={<LoginPage />} />}
-        />
-        <Route path="unauthorized" element={<NotAuthPage />} />
-        <Route
-          path="/contacts"
-          element={
-            <PrivateRoute
-              redirectTo="/unauthorized"
-              component={<ContactsPage />}
-            />
-          }
-        />
-
-        <Route path="*" element={<NotFound to={'/'} />}></Route>
-      </Route>
-    </Routes>
+  return (
+    !isRefreshing && (
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<HomePage />} />
+
+          <Route
+            path="register"
+            element={<PublicRoute component={<RegisterPage />} />}
+          />
+          <Route
+            path="login"
+            element={<PublicRoute component={<LoginPage />} />}
+          />
+          <Route path="unauthorized" element={<NotAuthPage />} />
+          <Route
+            path="/contacts"
+            element={
+              <PrivateRoute
+                redirectTo="/unauthorized"
+                component={<ContactsPage />}
+              />
+            }
+          />
+
+          <Route path="*" element={<NotFound to={'/'} />}></Route>
+        </Route>
+      </Routes>
+    )
   );
 };
 

src/components/ContactForm/ContactForm.jsx

@@ -10,28 +10,28 @@ import {
   Label,
   Input,
   SubmitButton,
-  // Group,
-  // RadioContainer,
-  // RaioDiv,
-  // RadioInput,
+  Group,
+  RadioContainer,
+  RadioInput,
 } from './ContactForm.styled';
 
 export const ContactForm = () => {
   const [name, setName] = useState('');
   const [number, setNumber] = useState('');
+  const [group, setGroup] = useState('others');
   const contacts = useSelector(selectContacts);
   const dispatch = useDispatch();
 
   const handleSubmit = e => {
     e.preventDefault();
+    const form = e.currentTarget;
+    dispatch(addContactAction({ name, number, group }));
     const isExist = contacts.some(contact => contact.name === name);
     if (isExist) {
       Notiflix.Notify.warning(`${name} is already in your phonebook`);
       return;
     }
-    dispatch(addContactAction({ name, number }));
-    setName('');
-    setNumber('');
+    form.reset();
   };
 
   const handleChange = e => {
@@ -43,6 +43,9 @@ export const ContactForm = () => {
       case 'number':
         setNumber(value);
         break;
+      case 'group':
+        setGroup(value);
+        break;
       default:
         break;
     }
@@ -72,28 +75,52 @@ export const ContactForm = () => {
         />
       </Label>
 
-      {/* <Group>Group</Group>
+      <Group>Group</Group>
       <RadioContainer>
-        <RaioDiv>
+        <label>
           Family
-          <RadioInput type="radio" name="group" value="family" />
-        </RaioDiv>
+          <RadioInput
+            type="radio"
+            name="group"
+            value="family"
+            onChange={handleChange}
+            checked={group === 'family'}
+          />
+        </label>
 
-        <RaioDiv>
+        <label>
           Friends
-          <RadioInput type="radio" name="group" value="friends" />
-        </RaioDiv>
+          <RadioInput
+            type="radio"
+            name="group"
+            value="friends"
+            onChange={handleChange}
+            checked={group === 'friends'}
+          />
+        </label>
 
-        <RaioDiv>
+        <label>
           Work
-          <RadioInput type="radio" name="group" value="work" />
-        </RaioDiv>
+          <RadioInput
+            type="radio"
+            name="group"
+            value="work"
+            onChange={handleChange}
+            checked={group === 'work'}
+          />
+        </label>
 
-        <RaioDiv>
+        <label>
           Others
-          <RadioInput type="radio" name="group" value="others" checked />
-        </RaioDiv>
-      </RadioContainer> */}
+          <RadioInput
+            type="radio"
+            name="group"
+            value="others"
+            onChange={handleChange}
+            checked={group === 'others'}
+          />
+        </label>
+      </RadioContainer>
 
       <SubmitButton type="submit">Add contact</SubmitButton>
     </Form>

src/components/ContactForm/ContactForm.styled.jsx

@@ -49,6 +49,7 @@ export const Group = styled.p`
 export const RadioContainer = styled.div`
   display: flex;
   justify-content: space-between;
+  margin-bottom: 16px;
 `;
 
 export const RaioDiv = styled.div`
@@ -81,5 +82,5 @@ export const RaioDiv = styled.div`
 `;
 
 export const RadioInput = styled.input`
-  display: none;
+  margin-left: 6px;
 `;

src/components/ContactsList/ContactsList.jsx

@@ -55,14 +55,15 @@ export const ContactsList = () => {
       {error && <p>Something went wrong!. Try again later</p>}
       {visibleContacts.length > 0 && (
         <List>
-          {visibleContacts.map(({ id, name, number }) => (
+          {visibleContacts.map(({ id, name, number, group }) => (
             <Item key={id}>
               <IconContext.Provider value={{ color: '#283044', size: 40 }}>
                 <IoIosContacts />
               </IconContext.Provider>
               <Container>
                 <ContactData>{name}</ContactData>
                 <ContactData>{number}</ContactData>
+                <ContactData>{group}</ContactData>
               </Container>
               <DeleteContactBtn
                 type="button"

src/components/Filter/Filter.jsx

@@ -2,11 +2,25 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { selectFilterValue } from '../../redux/selectors';
 import { setSearchFilterAction } from '../../redux/filter/filterSlice';
-import { FilterContainer, Label, Input } from './Filter.styled';
+import {
+  FilterContainer,
+  Label,
+  Input,
+  SortContainer,
+  SortButton,
+} from './Filter.styled';
+
+import { groupFilters } from '../../redux/group/groupFilters';
+import { selectGroupFilters } from '../../redux/selectors';
+import { setGroupFilters } from '../../redux/group/groupSlice';
 
 export const Filter = () => {
-  const { filter } = useSelector(selectFilterValue);
   const dispatch = useDispatch();
+  const { filter } = useSelector(selectFilterValue);
+
+  const group = useSelector(selectGroupFilters);
+
+  const handleGroupChange = group => dispatch(setGroupFilters(group));
 
   const filterChange = e => {
     dispatch(setSearchFilterAction(e.target.value));
@@ -24,6 +38,44 @@ export const Filter = () => {
           onChange={filterChange}
         />
       </Label>
+
+      <SortContainer>
+        <SortButton
+          type="button"
+          selected={group === groupFilters.all}
+          onClick={() => handleGroupChange(groupFilters.all)}
+        >
+          All
+        </SortButton>
+        <SortButton
+          type="button"
+          selected={group === groupFilters.family}
+          onClick={() => handleGroupChange(groupFilters.family)}
+        >
+          Family
+        </SortButton>
+        <SortButton
+          type="button"
+          selected={group === groupFilters.friends}
+          onClick={() => handleGroupChange(groupFilters.friends)}
+        >
+          Friends
+        </SortButton>
+        <SortButton
+          type="button"
+          selected={group === groupFilters.work}
+          onClick={() => handleGroupChange(groupFilters.work)}
+        >
+          Work
+        </SortButton>
+        <SortButton
+          type="button"
+          selected={group === groupFilters.others}
+          onClick={() => handleGroupChange(groupFilters.others)}
+        >
+          Oters
+        </SortButton>
+      </SortContainer>
     </FilterContainer>
   );
 };

src/components/Filter/Filter.styled.jsx

@@ -13,6 +13,7 @@ export const Label = styled.label`
   display: flex;
   align-items: center;
   gap: 20px;
+  margin-bottom: 10px;
 `;
 
 export const Input = styled.input`
@@ -29,3 +30,16 @@ export const Input = styled.input`
     border-color: #e9af3d;
   }
 `;
+
+export const SortContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+`;
+
+export const SortButton = styled.button`
+  padding: 8px 12px;
+  font-size: 16px;
+  color: #000000;
+  background-color: #e9af3d;
+`;

src/components/Layout/Layout.jsx

@@ -2,13 +2,14 @@ import { Outlet } from 'react-router-dom';
 import { Suspense } from 'react';
 import { AppBar } from 'components/AppBar/AppBar';
 import { Container, Main } from './Layout.styled';
+import { HourglassLoader } from 'components/Loader/Loader';
 
 const Layout = () => {
   return (
     <Container>
       <AppBar />
       <Main>
-        <Suspense fallback={null}>
+        <Suspense fallback={<HourglassLoader />}>
           <Outlet />
         </Suspense>
       </Main>

src/hooks/useAuth.js

@@ -4,9 +4,11 @@ import { authSelectors } from '../redux/auth/authSelectors';
 export const useAuth = () => {
   const isLoggedIn = useSelector(authSelectors.selectIsLoggedIn);
   const user = useSelector(authSelectors.selectUserName);
+  const isRefreshing = useSelector(authSelectors.selectIsRefreshing);
 
   return {
     isLoggedIn,
     user,
+    isRefreshing,
   };
 };

src/redux/auth/authSelectors.js

@@ -7,4 +7,5 @@ export const selectIsRefreshing = state => state.auth.isRefreshing;
 export const authSelectors = {
   selectIsLoggedIn,
   selectUserName,
+  selectIsRefreshing,
 };

src/redux/group/groupFilters.js

@@ -0,0 +1,7 @@
+export const groupFilters = Object.freeze({
+  all: 'all',
+  family: 'family',
+  friends: 'friends',
+  work: 'work',
+  others: 'others',
+});

src/redux/group/groupSlice.js

@@ -0,0 +1,17 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { groupFilters } from './groupFilters';
+
+const groupSlice = createSlice({
+  name: 'group',
+  initialState: {
+    group: groupFilters.all,
+  },
+  reducers: {
+    setGroupFilters(state, action) {
+      state.group = action.payload;
+    },
+  },
+});
+
+export const { setGroupFilters } = groupSlice.actions;
+export const sortReducer = groupSlice.reducer;

src/redux/reducer.js

@@ -4,6 +4,7 @@ import storage from 'redux-persist/lib/storage';
 import { contactsReducer } from './contacts/contactsSlice';
 import { filterReducer } from './filter/filterSlice';
 import { authReducer } from './auth/authSlice';
+import { sortReducer } from './group/groupSlice.js';
 
 const authPersistConfig = {
   key: 'auth',
@@ -14,5 +15,6 @@ const authPersistConfig = {
 export const reducer = {
   contacts: contactsReducer,
   filter: filterReducer,
+  sort: sortReducer,
   auth: persistReducer(authPersistConfig, authReducer),
 };