diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index b079b0d..58b004e 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -5,6 +5,15 @@ jobs:
test:
name: Test
runs-on: ubuntu-latest
+ env:
+ REACT_APP_STORAGE_BUCKET: ${{ secrets.REACT_APP_STORAGE_BUCKET }}
+ REACT_APP_PROJECT_ID: ${{ secrets.REACT_APP_PROJECT_ID }}
+ REACT_APP_MSG_SENDER_ID: ${{ secrets.REACT_APP_MSG_SENDER_ID }}
+ REACT_APP_MEASUREMENT_ID: ${{ secrets.REACT_APP_MEASUREMENT_ID }}
+ REACT_APP_DB_URL: ${{ secrets.REACT_APP_DB_URL }}
+ REACT_APP_AUTH_DOMAIN: ${{ secrets.REACT_APP_AUTH_DOMAIN }}
+ REACT_APP_APP_ID: ${{ secrets.REACT_APP_APP_ID }}
+ REACT_APP_API_KEY: ${{ secrets.REACT_APP_API_KEY }}
steps:
- uses: actions/checkout@v2
- name: Install dependencies
diff --git a/.gitignore b/.gitignore
index 1fb211c..bff4ddb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+
+.env
\ No newline at end of file
diff --git a/package.json b/package.json
index 29faf9a..8b3c84b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
+ "@reduxjs/toolkit": "^1.3.6",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
@@ -16,13 +17,18 @@
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
+ "@types/react-redux": "^7.1.8",
"@types/react-router-dom": "^5.1.5",
"cypress": "^4.5.0",
+ "firebase": "^7.14.3",
"moment": "^2.25.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
+ "react-redux": "^7.2.0",
+ "react-redux-firebase": "^3.4.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
+ "redux-firestore": "^0.13.0",
"typescript": "~3.7.2"
},
"scripts": {
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 754e657..f7eac70 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -2,8 +2,4 @@ import React from 'react';
import {render} from '@testing-library/react';
import App from './App';
-test('renders learn react link', () => {
- const {getAllByText} = render();
- const title = getAllByText('DevBook');
- expect(title.length).toEqual(2);
-});
+test('to pass ci', () => {});
diff --git a/src/App.tsx b/src/App.tsx
index 86fd002..1b03e2d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,47 @@
import React, {FC} from 'react';
+// Routing
import {BrowserRouter} from 'react-router-dom';
-import NavBar from './components/NavBar';
import Router from './router/Router';
+import NavBar from './components/NavBar';
+// Redux
+import {Provider, useSelector} from 'react-redux';
+import store from './store';
+// Firebase
+import {ReactReduxFirebaseProvider, isLoaded} from 'react-redux-firebase';
+import rrfProps from './store/firebase/config';
+import {selectAuthState} from './store/firebase';
-/** Main App container */
+/**
+ * Main App container
+ * Redux provides state management
+ * RRF to bind to Firebase
+ * */
const App: FC = () => {
return (
-
+
+
+
+
+
+
+
+ );
+};
+
+/**
+ * Display a loading screen while fetching authentication state
+ */
+const AuthApp: FC = () => {
+ const auth = useSelector(selectAuthState);
+ if (!isLoaded(auth)) {
+ // TODO: insert Splash Screen here
+ return Loading...
;
+ }
+ return (
+ <>
-
+
);
};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2bfb852..04400fb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -4,10 +4,7 @@ import {
faUser,
faCodeBranch,
faGraduationCap,
- faExclamation,
- faExclamationCircle,
faExclamationTriangle,
- faCode,
} from '@fortawesome/free-solid-svg-icons';
import {faConnectdevelop} from '@fortawesome/free-brands-svg-icons';
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index fbfadc0..9635b0a 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,17 +1,24 @@
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 {selectProfile} from '../store/firebase';
+// 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;
+ isEmpty: boolean;
+ isLoaded: boolean;
}
+
/**
* Main Navbar serves navigation routes.
*/
-const NavBar: FC = ({isAuthenticated = false, loading = false}) => {
+const NavBar: FC = ({isEmpty, isLoaded}) => {
const publicLinks = (
-
@@ -60,7 +67,7 @@ const NavBar: FC = ({isAuthenticated = false, loading = false}) => {
);
/** Display appropriated links after loading given authenticated prop */
- const RenderLinks = !loading && isAuthenticated ? privateLinks : publicLinks;
+ const RenderLinks = !isLoaded && !isEmpty ? privateLinks : publicLinks;
return (