{currentFood.name}
{currentFood.description}
-
diff --git a/src/Components/Foods/Foods.js b/src/Components/Foods/Foods.js
index f9343ff..3e233e4 100644
--- a/src/Components/Foods/Foods.js
+++ b/src/Components/Foods/Foods.js
@@ -22,9 +22,14 @@ const Foods = (props) => {
// console.log("data from mongodb", data);
setFoods(data)
})
- }, [])
+ }, [foods])
+ console.log(foods);
- const selectedFoods = foods.filter(food => food.category === selectedFoodType)
+
+ const selectedFoods = foods!==null && foods.filter(food => food.category === selectedFoodType)
+
+
+
// console.log(selectedFoodType);
return (
diff --git a/src/Components/Login/Login.js b/src/Components/Login/Login.js
index 0209662..2206960 100644
--- a/src/Components/Login/Login.js
+++ b/src/Components/Login/Login.js
@@ -4,6 +4,8 @@ import { useForm } from 'react-hook-form';
import Logo from '../../Images/logo2.png';
import {Link} from 'react-router-dom';
import { useAuth } from './useAuth';
+import signInBtn from '../../Images/login-with-google-button.png'
+import signOutBtn from '../../Images/logout.jpg'
const Login = () => {
@@ -25,6 +27,37 @@ const Login = () => {
}
// console.log(auth);
+
+ const is_valid_email = email => /(.+)@(.+){2,}\.(.+){2,}/.test(email)
+ const hasNumber = input => /\d/.test(input)
+
+ const handleChange = event => {
+ //perform validation
+ let isValid = true
+ if (event.target.name === "email") {
+ isValid = is_valid_email(event.target.value);
+ }
+ else if (event.target.name === "password") {
+ isValid = event.target.value.length > 8 && hasNumber(event.target.value);
+ }
+ }
+
+
+ //google
+ const handleSignIn = () => {
+ auth.signInWithGoogle()
+ .then(res => {
+ // console.log('redirect now');
+ window.location.pathname = '/checkout'
+ })
+ }
+
+ const handleSignOut = () => {
+ auth.signOut()
+ .then(res => {
+ window.location.pathname = '/'
+ })
+ }
return (
@@ -34,14 +67,14 @@ const Login = () => {
-
\
+
{
returningUser ?
-
+
}
+ ${(currentFood.price).toFixed(2)}
+${currentFood.price}
@@ -106,11 +112,13 @@ const FoodDetails = (props) => {
- {currentFood.img.map(img=> 
)}
+ {/* {currentFood !== null && currentFood.img.map(img => )} */}
+ 
+
- 
+
+
+
+
+
{
errors.error && Or
+ { + auth.user ? + // + + : + // + + } +{errors.error}
} + + + + ); }; diff --git a/src/Components/Login/useAuth.js b/src/Components/Login/useAuth.js index b8f03cd..fca3406 100644 --- a/src/Components/Login/useAuth.js +++ b/src/Components/Login/useAuth.js @@ -34,6 +34,10 @@ export const PrivateRoute = ({ children, ...rest }) => { ); } +const getUser = user => { + const { displayName, email, photoURL } = user + return { name: displayName, email, photo: photoURL } +} const Auth = () => { const [user, setUser] = useState(null); useEffect(() => { @@ -68,11 +72,24 @@ const Auth = () => { }); - - - } + const signInWithGoogle = () => { + const provider = new firebase.auth.GoogleAuthProvider() + return firebase.auth().signInWithPopup(provider) + .then(res => { + // console.log(res); + const signedInUser = getUser(res.user) + setUser(signedInUser) + return res.user + }) + .catch(err => { + // console.log(err) + setUser(null) + return err.message + }); + } + const signOut = () => { return firebase.auth().signOut() .then(res => setUser(null)) @@ -81,6 +98,7 @@ const Auth = () => { user, signIn, signUp, + signInWithGoogle, signOut } } diff --git a/src/Images/login-with-google-button.png b/src/Images/login-with-google-button.png new file mode 100644 index 0000000..716e0b7 Binary files /dev/null and b/src/Images/login-with-google-button.png differ diff --git a/src/Images/logout.jpg b/src/Images/logout.jpg new file mode 100644 index 0000000..6a73c85 Binary files /dev/null and b/src/Images/logout.jpg differ