diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..ecb0989
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,7 @@
+REACT_APP_FIREBASE_API_KEY="PASTE VALUE HERE"
+REACT_APP_FIREBASE_AUTHDOMAIN="PASTE VALUE HERE"
+REACT_APP_FIREBASE_PROJECT_ID="PASTE VALUE HERE"
+REACT_APP_FIREBASE_STORAGEBUCKET="PASTE VALUE HERE"
+REACT_APP_FIREBASE_MESSAGINGSENDERID="PASTE VALUE HERE"
+REACT_APP_FIREBASE_APPID="PASTE VALUE HERE"
+REACT_APP_FIREBASE_MEASUREMENTID="PASTE VALUE HERE"
\ No newline at end of file
diff --git a/README.md b/README.md
index 10714e8..2531838 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,28 @@
-## Exercise 1
+## Exercise 3
-This exercise is to edit and remove items from a todo list
+This exercise is to add authentication using localstorage and [react-router](https://reactrouter.com/web/guides/quick-start)
### To do
-- [ ] Edit to-do
-- [ ] Remove to-do
+- [ ] Add login page route (`/login`) with login form that accepts user name and password. Use [react-hook-form](https://react-hook-form.com/)
+- [ ] Redirect the user to the `/login` route if they are not logged-in
+- [ ] Restrict the user from viewing the tasks if they are not logged-in (using [react-router](https://reactrouter.com/web/guides/quick-start))
+- [ ] Update userContext with logged in user information
+- [ ] Store tasks with author information
+- [ ] Display tasks with author information (any author can view all tasks)
+- [ ] Display a 404 page if the user navigates to a route that does not exist
### Setup Instructions
- Fork the repo
-- Clone the repo
+- Setup Firebase project and copy config credentials
+- Rename `.env.example` to `.env.local`
+- Copy Firebase credentials to `.env.local`
- Install dependencies using `yarn`
- Run locally using `yarn start`
### Submission Instructions
-- Make changes on a separate branch
+- Fork the repo
+- Commit changes to your repo using `git add .` and `git commit -m [commit message]`
- Submit PR to the branch
diff --git a/package.json b/package.json
index ea7aa39..75b84d0 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
+ "firebase": "^8.2.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
diff --git a/src/App.js b/src/App.js
index 110ad9c..c1ec8ec 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,35 @@
-import { useState, useEffect } from "react";
+import React from "react";
+import firebase from "firebase/app";
+import "firebase/firestore";
+
+import { AuthContext, AuthProvider } from "./context/auth";
+
import "./App.css";
+const firebaseConfig = {
+ apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+ authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
+ projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+ storageBucket: process.env.REACT_APP_STORAGEBUCKET,
+ messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
+ appId: process.env.REACT_APP_FIREBASE_APPID,
+ measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID,
+};
+//This check is to avoid firebase re-initializing multiple times
+if (typeof window !== "undefined" && !firebase.apps.length) {
+ firebase.initializeApp(firebaseConfig);
+}
+//Load firebase firestore
+const db = firebase.firestore();
+
const App = () => {
- const [title, setTitle] = useState("");
- const [tasks, setTasks] = useState([]);
+ const [title, setTitle] = React.useState("");
+ const [tasks, setTasks] = React.useState([]);
+
+ const user = React.useContext(AuthContext);
+ console.log(user);
- useEffect(() => {
+ React.useEffect(() => {
//Check if localstorage is
const storedTasks = JSON.parse(window.localStorage.getItem("tasks"));
console.log(storedTasks);
@@ -14,8 +38,18 @@ const App = () => {
}
}, []);
+ React.useEffect(() => {
+ db.collection("todos").onSnapshot((querySnapshot) => {
+ var todos = [];
+ querySnapshot.forEach((doc) => {
+ todos.push(doc.data().title);
+ });
+ console.log("Current todos: ", todos);
+ });
+ }, []);
+
//UseEffect re-renders application whenever dependency objects are changed
- useEffect(() => {
+ React.useEffect(() => {
//Save to localstorage whenever tasks is updated
if (tasks.length > 0) {
console.log("save tasks to localstorage");
@@ -45,36 +79,38 @@ const App = () => {
};
return (
-
-
-
-
-
+
+
+
+
+
+
-
- {tasks?.length > 0
- ? tasks.map((item, index) => (
- -
- {item}
-
-
-
- ))
- : "Nothing in list"}
-
-
+ {tasks?.length > 0
+ ? tasks.map((item, index) => (
+ -
+ {item}
+
+
+
+ ))
+ : "Nothing in list"}
+
+