WIP firebase integrations

Author: junip

package-lock.json

@@ -17,10 +17,12 @@
     "@apollo/react-hooks": "^3.1.5",
     "@types/react": "^16.9.35",
     "apollo-boost": "^0.4.9",
+    "firebase": "^7.15.0",
     "graphql": "^15.0.0",
     "node-sass": "^4.14.1",
     "parcel-bundler": "^1.12.4",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0"
   }
 }

package.json

@@ -1,6 +1,22 @@
 import React from 'react'
 import ReactDOM from 'react-dom';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
+
+// paths
+import Login from './components/Login'
+import Register from './components/Register'
+
 import './scss/main.scss'
+
+
+// router
+
 import { ApolloProvider } from '@apollo/react-hooks'
 import ShowCountries from '../src/components/ShowCountries'
 import ApolloClient from 'apollo-boost'
@@ -10,12 +26,18 @@ const client = new ApolloClient({
 })
 
 const App = () => {
+
   return (
-   <ApolloProvider client={client}>
-     <div className=""> 
-        <ShowCountries/>
-     </div>
-   </ApolloProvider>
+    <Router>
+      <Route path="/login" component={Login} />
+      <Route path="/signup" component={Register} />
+    </Router>
+   
+  //  <ApolloProvider client={client}>
+  //    <div className=""> 
+  //       {/* <ShowCountries/> */}
+  //    </div>
+  //  </ApolloProvider>
   )
 }
 

src/App.js

@@ -0,0 +1,21 @@
+// Firebase App (the core Firebase SDK) is always required and
+// must be listed before other Firebase SDKs
+import * as firebase from "firebase/app";
+
+// Add the Firebase services that you want to use
+import "firebase/auth";
+
+const config = {
+  apiKey: "AIzaSyAcPbOBP9js9jC6LGtm9ZjqwXjVpQjBQxM",
+  authDomain: "react-firebase-fc06e.firebaseapp.com",
+  databaseURL: "https://react-firebase-fc06e.firebaseio.com",
+  projectId: "react-firebase-fc06e",
+  storageBucket: "react-firebase-fc06e.appspot.com",
+  messagingSenderId: "564100058598",
+  appId: "1:564100058598:web:8c6ebd5ba04dc4faab1a27",
+  measurementId: "G-GZNMEDXZPH"
+};
+
+firebase.initializeApp(config)
+
+export default config;

src/Firebase/config.js

@@ -0,0 +1,22 @@
+// import React from 'react';
+// import { Route, Redirect } from 'react-router-dom'
+// import { AuthContext } from "../context/AuthContext";
+
+// const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
+//   const {currentUser} = useContext(AuthContext);
+//   return (
+//     <Route
+//       {...rest}
+//       render={routeProps =>
+//         !!currentUser ? (
+//           <RouteComponent {...routeProps} />
+//         ) : (
+//           <Redirect to={"/login"} />
+//         )
+//       } 
+//     />
+//   );
+// };
+
+
+// export default PrivateRoute

src/Routes/PrivateRoute.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Login  = () => {
+  return(<div>
+
+  </div>)
+}
+
+export default Login
+
+

src/components/HomePage.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+const Register  = () => {
+
+  const [email, setEmail] = useState('')
+  const [pass, setPass] = useState('')
+
+  const onInputChange = (e, name) => {
+    let inputValue = e.target.value
+    if(name === 'pass') { 
+      setPass(inputValue)
+    } if(name === 'email') {
+      setEmail(inputValue)
+    }
+  }
+
+
+  const registerUser = () => {
+    
+  }
+
+  return(
+  <div className="form">
+    <div className="form-row">
+      <label>Email</label>
+      <input name="email" onChange={(e) => onInputChange(e,'email')}></input>
+    </div>
+    <div className="form-row">
+      <label>Password</label>
+      <input name="password" type="password" onChange={(e) => onInputChange(e, 'pass')}></input>
+    </div>
+    <button className="form-row">
+      Login
+    </button>
+   
+  </div>)
+}
+
+export default Register
+
+

src/components/Login.js

@@ -0,0 +1,5 @@
+.form {
+  .form-row {
+    margin-top: 12px;
+  }
+}

src/components/Register.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from 'react';
+import authConfig from '../Firebase/config'
+
+export const AuthContext = React.createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState(null);
+  const [pending, setPending] = useState(true);
+
+  useEffect(() => {
+    authConfig.auth().onAuthStateChanged((user) => {
+      setCurrentUser(user)
+      setPending(false)
+    });
+  }, []);
+
+  if(pending){
+    return <>Loading...</>
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        currentUser
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};