From 9fdd759e5df2a46cf9b43a69b6edb123d50c9b3f Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Wed, 13 May 2020 15:11:27 +0200
Subject: [PATCH] connect navBar to the sotre

---
 src/components/NavBar.tsx | 17 ++++++++++++-----
 src/store/auth/index.ts   | 28 +++++++++++++++++++++++-----
 src/store/index.ts        |  3 +++
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index fbfadc0..00b5967 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,17 +1,23 @@
 import React, {FC} from 'react';
+// Routing
 import {Link} from 'react-router-dom';
+import * as ROUTES from '../constants/routes';
+//Redux
+import {connect} from 'react-redux';
+import {selectAuthState} from '../store/auth';
+// Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons';
-import * as ROUTES from '../constants/routes';
 
 interface IProps {
-  isAuthenticated?: boolean;
-  loading?: boolean;
+  isAuthenticated: boolean;
+  loading: boolean;
 }
 /**
  * Main Navbar serves navigation routes.
  */
-const NavBar: FC<IProps> = ({isAuthenticated = false, loading = false}) => {
+const NavBar: FC<IProps> = ({isAuthenticated, loading}) => {
+  console.log(isAuthenticated, loading);
   const publicLinks = (
     <ul data-testid="publicLinks">
       <li>
@@ -74,4 +80,5 @@ const NavBar: FC<IProps> = ({isAuthenticated = false, loading = false}) => {
   );
 };
 
-export default NavBar;
+/** connect HOC subscribes to the store */
+export default connect(selectAuthState)(NavBar);
diff --git a/src/store/auth/index.ts b/src/store/auth/index.ts
index b71abe5..b722cc4 100644
--- a/src/store/auth/index.ts
+++ b/src/store/auth/index.ts
@@ -1,15 +1,33 @@
 import {createSlice} from '@reduxjs/toolkit';
+import {RootState} from '..';
+
+interface SliceState {
+  isAuthenticated: boolean;
+  loading: boolean;
+  // TODO: switch any by the actual user interface
+  user: any;
+}
+
+const initialState: SliceState = {
+  isAuthenticated: false,
+  loading: true,
+  user: null,
+};
 
 const authSlice = createSlice({
   name: 'auth',
-  initialState: {
-    isAuthenticated: false,
-    loading: true,
-    user: null,
-  },
+  initialState,
   reducers: {},
 });
 
+// export actions
 export const {} = authSlice.actions;
 
+// export selectors
+export const selectAuthState = (state: RootState) => {
+  const {isAuthenticated, loading} = state.auth;
+  return {isAuthenticated, loading};
+};
+
+// export reducer
 export default authSlice.reducer;
diff --git a/src/store/index.ts b/src/store/index.ts
index 56c2d6c..746f2f4 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -7,4 +7,7 @@ const store = configureStore({
   },
 });
 
+// State type
+export type RootState = ReturnType<typeof store.getState>;
+
 export default store;