20191204

Author: coderamins

src/components/AppRoute.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { isLogin } from '../utils';
+
+const AppRoute=({component:Component,layout:Layout,...rest})=>(
+    <Route
+        {...rest}
+        render={props=>(
+            <Layout>
+                isLogin() ?
+                <Component {...props}/>:
+                <Redirect to="/login" />
+            </Layout>
+        )}
+    />
+);
+
+export default AppRoute;

src/components/Header/SiteHeader.js

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Layout, Header, Navigation, Drawer, Content } from "react-mdl";
+
+class SiteHeader extends Component {
+  render() {
+    return (
+      <Header
+        title={
+          <span>
+            <strong>کافه کد</strong>
+          </span>
+        }
+        scroll
+        img=""
+      >
+        <Navigation dir="rtl">
+          <a href="/home">صفحه نخست</a>
+          <a href="/tutorials">دوره ها</a>
+          <a href="/about">درباره ما</a>
+          <a href="/contact">ارتباط با ما</a>
+          <div className="clientarea">
+            <Link to="/signup">ثبت نام</Link>
+            <span> / </span>
+            <a href="/login">ورود</a>
+          </div>
+        </Navigation>
+      </Header>
+    );
+  }
+}
+
+export default SiteHeader;

src/components/Header/index.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import { Route, Link, Switch, BrowserRouter as Router } from "react-router-dom";
+import { Layout, Header, Navigation, Drawer, Content } from "react-mdl";
+
+import Footer from "../../components/footer/footer";
+import SiteHeader from "../../components/Header/SiteHeader";
+
+export default ({ children }) => (
+  <>
+    <Layout>
+      <SiteHeader />
+      <Content>
+        <div className="page-content" />
+      </Content>
+      <Footer />
+    </Layout>
+    <Footer />
+  </>
+);
+// const MainLayout = ({children, ...rest}) => {
+//   return (
+//     <div className="page page-dashboard">
+//       <div className="sidebar">This is the Second Layout</div>
+//       <div className="main">{children}</div>
+//     </div>
+//   )
+// }
+
+// const MainLayoutRoute = ({component: Component, ...rest}) => {
+//   return (
+//     <Route {...rest} render={matchProps => (
+//       <MainLayout>
+//           <Component {...matchProps} />
+//       </MainLayout>
+//     )} />
+//   )
+// };
+
+// export default MainLayoutRoute;

src/components/Layouts/MainLayout.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import { Route, Link, Switch, BrowserRouter as Router } from "react-router-dom";
+import { Layout, Header, Navigation, Drawer, Content } from "react-mdl";
+
+import Footer from "../../components/footer/footer";
+
+export default ({ children }) => (
+  <>
+    <Layout>
+      <Content>
+        <div className="page-content" />
+      </Content>
+      <Footer />
+    </Layout>
+    <Footer />
+  </>
+);

src/components/Layouts/UserLayout.js

@@ -2,11 +2,8 @@ import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import { isLogin } from '../../utils';
 
-const PrivateRoute = ({component: Component, ...rest}) => {
+const PrivateRoute = ({component:Component,layout:Layout,...rest}) => {
     return (
-
-        // Show the component only when the user is logged in
-        // Otherwise, redirect the user to /signin page
         <Route {...rest} render={props => (
             isLogin() ?
                 <Component {...props} />

src/components/PrivateRoute/PrivateRoute.jsx

@@ -8,16 +8,18 @@ import Contact from '../pages/Contactus'
 import LoginPage from "../pages/LoginPage/LoginPage";
 import SignUpPage from "../pages/SignUpPage/SignUpPage.jsx";
 import PrivateRoute from "../components/PrivateRoute/PrivateRoute";
+import MainLayout from "../components/Layouts/MainLayout";
+import UserLayout from "../components/Layouts/UserLayout";
 
 const Main =() =>(
     <Switch>
-        <Route exact path="/" component={Home} />
-        <PrivateRoute path="/home" component={Home} />
-        <PrivateRoute path="/tutorials" component={Tutorials} />
-        <PrivateRoute path="/about" component={About} />
-        <PrivateRoute path="/contact" component={Contact} />
-        <Route exact path="/signup" component={SignUpPage} />
-        <Route exact path="/Login" component={LoginPage} />
+        <Route exact path="/" component={Home} layout={MainLayout} />
+        <PrivateRoute path="/home" component={Home} layout={MainLayout} />
+        <PrivateRoute path="/tutorials" component={Tutorials} layout={MainLayout} />
+        <PrivateRoute path="/about" component={About} layout={MainLayout} />
+        <PrivateRoute path="/contact" component={Contact} layout={MainLayout} />
+        <Route exact path="/signup" component={SignUpPage} layout={UserLayout} />
+        <Route exact path="/Login" component={LoginPage} layout={UserLayout} />
     </Switch>
 )