From f329f6733af78e1dc2e9b1e9908d973ba9de1f30 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 31 Jan 2020 16:20:16 +0100
Subject: [PATCH] preloader

---
 README.md             |  3 +--
 src/App.js            |  5 ++++-
 src/pages/Profile.jsx | 16 +++++++++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index f9db158..8e55ff5 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,7 @@ Free meal planner for cooks short on ideas! (like me …)
 - Get a full menu (Starter, Main, Dessert + Cocktail)
 - Send a daily suggestion to newsletter
 - History
+- Language selection
 
 ## Supports
 
@@ -93,9 +94,7 @@ Free meal planner for cooks short on ideas! (like me …)
 ## TO DO
 
 - add sidenav on mobile
-- accounts v2 (profile page)
 - send message after contact form validation (confirm to sender and msg+info to admin)
 - code cleanup (props and refactoring)
-- put a preloader
 - Back to top button
 - Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default)
diff --git a/src/App.js b/src/App.js
index bb699d9..e86fe52 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import { getData } from "./utils/methods";
 import history from "./utils/history";
 import { Profile } from "./pages/Profile";
 import { PrivateRoute } from "./components/PrivateRoute";
+import { PreLoader } from "./components/PreLoader";
 
 export const App = () => {
   const { loading } = useAuth0();
@@ -109,7 +110,9 @@ export const App = () => {
   const buttonUrl = "/random";
 
   return loading ? (
-    <div>Loading</div>
+    <div className="container center-align valign-wrapper">
+      <PreLoader />
+    </div>
   ) : (
     <Router history={history}>
       <header>
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index edd7337..21f4d78 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -1,17 +1,23 @@
 import React from "react";
 import { useAuth0 } from "../utils/auth0-spa";
+import { PreLoader } from "../components/PreLoader";
 
 export const Profile = () => {
   const { loading, user } = useAuth0();
 
-  return loading || !user ? (
-    <div>Loading ... </div> // is catched by PrivateRoute
+  return loading || !user ? ( // is catched by PrivateRoute
+    <div className="container center-align">
+      <PreLoader />
+    </div>
   ) : (
     <div className="container">
-      <img className="responsive-img" src={user.picture} alt="Avatar" />
+      <img className="circle responsive-img" src={user.picture} alt="Avatar" />
       <h2>{user.name}</h2>
-      <p>{user.email}</p>
-      <code>{JSON.stringify(user, null, 2)}</code>
+      <p>
+        <b>Email: </b>
+        {user.email}
+      </p>
+      {/* <code>{JSON.stringify(user, null, 2)}</code> */}
     </div>
   );
 };