redux

package.json

@@ -18,6 +18,7 @@
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/components/AppBar/AppBar.jsx

@@ -0,0 +1,22 @@
+import { Header, Navigation, NavItem, StyledLink } from './AppBar.styled';
+
+export const AppBar = () => {
+  return (
+    <Header>
+      <Navigation>
+        <NavItem>
+          <StyledLink to="/">Home</StyledLink>
+        </NavItem>
+        <NavItem>
+          <StyledLink to="register">Register</StyledLink>
+        </NavItem>
+        <NavItem>
+          <StyledLink to="login">Log In</StyledLink>
+        </NavItem>
+        <NavItem>
+          <StyledLink to="contacts">Contacts</StyledLink>
+        </NavItem>
+      </Navigation>
+    </Header>
+  );
+};

src/components/AppBar/AppBar.styled.jsx

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
+
+export const Header = styled.header`
+  margin-bottom: 20px;
+`;
+
+export const Navigation = styled.ul`
+  display: flex;
+  gap: 50px;
+`;
+
+export const NavItem = styled.li``;
+
+export const StyledLink = styled(NavLink)`
+  font-size: 20px;
+  color: #000000;
+  background-color: #78a1bb;
+  padding: 8px;
+  border-radius: 4px;
+
+  &.active {
+    color: #000000;
+    background-color: #e9af3d;
+    padding: 8px;
+    border-radius: 4px;
+  }
+`;

src/components/ContactForm/ContactForm.jsx

@@ -22,7 +22,7 @@ export const ContactForm = () => {
         <Input type="tel" name="number" required placeholder="Enter number" />
       </Label>
 
-      <Group>Group</Group>
+      {/* <Group>Group</Group>
       <RadioContainer>
         <RaioDiv>
           Family
@@ -43,7 +43,7 @@ export const ContactForm = () => {
           Others
           <RadioInput type="radio" name="group" value="others" checked />
         </RaioDiv>
-      </RadioContainer>
+      </RadioContainer> */}
 
       <SubmitButton type="submit">Add contact</SubmitButton>
     </Form>

src/components/Layout/Layout.jsx

@@ -1,34 +1,12 @@
 import { Outlet } from 'react-router-dom';
 import { Suspense } from 'react';
-import {
-  Container,
-  Header,
-  Navigation,
-  NavItem,
-  StyledLink,
-  Main,
-} from './Layout.styled';
+import { AppBar } from 'components/AppBar/AppBar';
+import { Container, Main } from './Layout.styled';
 
 const Layout = () => {
   return (
     <Container>
-      <Header>
-        <Navigation>
-          <NavItem>
-            <StyledLink to="/">Home</StyledLink>
-          </NavItem>
-          <NavItem>
-            <StyledLink to="register">Register</StyledLink>
-          </NavItem>
-          <NavItem>
-            <StyledLink to="login">Log In</StyledLink>
-          </NavItem>
-          <NavItem>
-            <StyledLink to="contacts">Contacts</StyledLink>
-          </NavItem>
-        </Navigation>
-      </Header>
-
+      <AppBar />
       <Main>
         <Suspense fallback={null}>
           <Outlet />

src/components/Layout/Layout.styled.jsx

@@ -1,38 +1,11 @@
 import styled from '@emotion/styled';
-import { NavLink } from 'react-router-dom';
 
 export const Container = styled.div`
   width: 1400px;
   margin: 0 auto;
   padding: 10px;
 `;
 
-export const Header = styled.header`
-  margin-bottom: 20px;
-`;
-
-export const Navigation = styled.ul`
-  display: flex;
-  gap: 50px;
-`;
-
-export const NavItem = styled.li``;
-
-export const StyledLink = styled(NavLink)`
-  font-size: 20px;
-  color: #000000;
-  background-color: #78a1bb;
-  padding: 8px;
-  border-radius: 4px;
-
-  &.active {
-    color: #000000;
-    background-color: #e9af3d;
-    padding: 8px;
-    border-radius: 4px;
-  }
-`;
-
 export const Main = styled.main`
   background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
   background-repeat: no-repeat;

src/hooks/useAuth.js

@@ -0,0 +1,18 @@
+import { useSelector } from 'react-redux';
+import {
+  selectUser,
+  selectIsLoggedIn,
+  selectIsRefreshing,
+} from '../redux/auth/selectors';
+
+export const useAuth = () => {
+  const isLoggedIn = useSelector(selectIsLoggedIn);
+  const isRefreshing = useSelector(selectIsRefreshing);
+  const user = useSelector(selectUser);
+
+  return {
+    isLoggedIn,
+    isRefreshing,
+    user,
+  };
+};

src/index.js

@@ -1,18 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from 'components/App';
-import './index.css';
 
 import { BrowserRouter } from 'react-router-dom';
-// import { Provider } from 'react-redux';
-// import { store } from './redux/store';
+import { PersistGate } from 'redux-persist/integration/react';
+import { Provider } from 'react-redux';
+import { store, persistor } from './redux/store';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    {/* <Provider store={store}> */}
-    <BrowserRouter basename="/goit-react-hw-08-phonebook">
-      <App />
-    </BrowserRouter>
-    {/* </Provider> */}
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <BrowserRouter basename="/goit-react-hw-08-phonebook">
+          <App />
+        </BrowserRouter>
+      </PersistGate>
+    </Provider>
   </React.StrictMode>
 );

src/redux/contactsSlice.js

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const contactsSlice = createSlice({
+  name: 'contacts',
+  initialState: { contacts: [] },
+  reducers: {
+    deleteContactAction: (state, action) => {
+      state.contacts = state.contacts.filter(el => el.id !== action.payload);
+    },
+    addContactAction: (state, action) => {
+      state.contacts = [...state.contacts, action.payload];
+    },
+  },
+});
+
+export const { addContactAction, deleteContactAction } = contactsSlice.actions;
+
+export const contactsReducer = contactsSlice.reducer;

src/redux/filterSlice.js

@@ -0,0 +1,17 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const filterSlice = createSlice({
+  name: 'filter',
+  initialState: {
+    filter: '',
+  },
+  reducers: {
+    setSearchFilterAction(state, action) {
+      return { ...state, filter: `${action.payload}` };
+    },
+  },
+});
+
+export const { setSearchFilterAction } = filterSlice.actions;
+
+export const filterReducer = filterSlice.reducer;

src/redux/reducer.js

@@ -0,0 +1,17 @@
+import { persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
+import { contactsReducer } from './contactsSlice';
+import { filterReducer } from './filterSlice';
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, contactsReducer);
+
+export const reducer = {
+  contacts: persistedReducer,
+  filter: filterReducer,
+};

src/redux/selectors.js

@@ -0,0 +1,2 @@
+export const getContacts = state => state.contacts.contacts;
+export const getFilterValue = state => state.filter.filter;

src/redux/store.js

@@ -0,0 +1,22 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { reducer } from './reducer';
+import {
+  persistStore,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+
+export const store = configureStore({
+  reducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+});
+export const persistor = persistStore(store);