Layouts

EunsooJung · Feb 16, 2020 · 1d0b518 · 1d0b518
1 parent bb38dc7
commit 1d0b518
Show file tree

Hide file tree

Showing 17 changed files with 379 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.env
diff --git a/package.json b/package.json
@@ -7,8 +7,10 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "antd": "^3.26.9",
+    "dotenv": "^8.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
-
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
-
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,13 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [{
+    "src": "favicon.ico",
+    "sizes": "64x64 32x32 24x24 16x16",
+    "type": "image/x-icon"
+  }],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,4 @@
-@import '~antd/dist/antd.css';
-
+/* @import '~antd/dist/antd.css'; */
 .App {
   text-align: center;
 }

diff --git a/src/Routes.js b/src/Routes.js
@@ -0,0 +1,60 @@
+import React from 'react';
+/** Wrap the rest of the application routes, make props available to
+ * other nested components
+ */
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+
+import SignUp from './user/SignUp';
+import SignIn from './user/SignIn';
+import Home from './components/Home';
+// import Menu from './components/Menu';
+
+// import PrivateRoute from './auth/PrivateRoute';
+// import Dashboard from './user/UserDashboard';
+// import AdminRoute from './auth/AdminRoute';
+// import AdminDashboard from './user/AdminDashboard';
+// import AddCategory from './admin/AddCategory';
+// import AddProduct from './admin/AddProduct';
+// import Shop from './core/Shop';
+// import Product from './core/Product';
+// import Cart from './core/Cart';
+// import Orders from './admin/Orders';
+// import Profile from './user/Profile';
+// import ManageProducts from './admin/ManageProducts';
+// import UpdateProduct from './admin/UpdateProduct';
+// import UpdateCategory from './admin/updateCategory';
+
+const Routes = () => {
+  return (
+    <BrowserRouter>
+      {/* <Menu /> */}
+      <Switch>
+        <Route path='/' exact component={Home} />
+        {/* <Route path='/shop' exact component={Shop} /> */}
+        <Route path='/signin' exact component={SignIn} />
+        <Route path='/signup' exact component={SignUp} />
+        {/* <PrivateRoute path='/user/dashboard' exact component={Dashboard} />
+        <AdminRoute path='/admin/dashboard' exact component={AdminDashboard} />
+        <AdminRoute path='/create/category' exact component={AddCategory} />
+        <AdminRoute path='/create/product' exact component={AddProduct} />
+        <Route path='/product/:productId' exact component={Product} />
+        <Route path='/cart' exact component={Cart} />
+        <AdminRoute path='/admin/orders' exact component={Orders} />
+        <PrivateRoute path='/profile/:userId' exact component={Profile} />
+        <PrivateRoute path='/admin/products' exact component={ManageProducts} />
+        <AdminRoute
+          path='/admin/product/update/:productId'
+          exact
+          component={UpdateProduct}
+        />
+        <AdminRoute
+          path='/admin/category/update/:categoryId'
+          exact
+          component={UpdateCategory}
+        /> */}
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default Routes;
diff --git a/src/component-antd/Header.js b/src/component-antd/Header.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import 'antd/dist/antd.css';
+import '../index.css';
+import { PageHeader } from 'antd';
+import { render } from '@testing-library/react';
+
+const Header = () => <div> This is Header </div>;
+
+export default withRouter(Header);
diff --git a/src/component-antd/Home.js b/src/component-antd/Home.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import '../index.css';
+
+const Home = () => <div> Welcome My Home </div>;
+
+export default Home;
diff --git a/src/component-antd/SideNav.js b/src/component-antd/SideNav.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { Menu, Link, Icon, Switch } from 'antd';
+
+const { SubMenu } = Menu;
+
+class SideNav extends React.Component {
+  state = {
+    mode: 'inline',
+    theme: 'light'
+  };
+
+  changeMode = value => {
+    this.setState({
+      mode: value ? 'vertical' : 'inline'
+    });
+  };
+
+  changeTheme = value => {
+    this.setState({
+      theme: value ? 'dark' : 'light'
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <Switch onChange={this.changeMode} /> Change Mode
+        <span className='ant-divider' style={{ margin: '0 1em' }} />
+        <Switch onChange={this.changeTheme} /> Change Theme
+        <br />
+        <br />
+        <Menu
+          style={{ width: 256 }}
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode={this.state.mode}
+          theme={this.state.theme}
+        >
+          <Menu.Item key='1'>
+            <Icon type='mail' />
+            Product
+          </Menu.Item>
+          <Menu.Item key='2'>
+            <Icon type='calendar' />
+            Navigation Two
+          </Menu.Item>
+          <SubMenu
+            key='sub1'
+            title={
+              <span>
+                <Icon type='appstore' />
+                <span>Navigation Three</span>
+              </span>
+            }
+          >
+            <Menu.Item key='3'>Option 3</Menu.Item>
+            <Menu.Item key='4'>Option 4</Menu.Item>
+            <SubMenu key='sub1-2' title='Submenu'>
+              <Menu.Item key='5'>Option 5</Menu.Item>
+              <Menu.Item key='6'>Option 6</Menu.Item>
+            </SubMenu>
+          </SubMenu>
+          <SubMenu
+            key='sub2'
+            title={
+              <span>
+                <Icon type='setting' />
+                <span>Navigation Four</span>
+              </span>
+            }
+          >
+            <Menu.Item key='7'>Option 7</Menu.Item>
+            <Menu.Item key='8'>Option 8</Menu.Item>
+            <Menu.Item key='9'>Option 9</Menu.Item>
+            <Menu.Item key='10'>Option 10</Menu.Item>
+          </SubMenu>
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default withRouter(SideNav);
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import Layout from './Layout';
+
+const Home = () => (
+  <Layout title='Home Page' description='Full-Stack Dev'>
+    ...
+  </Layout>
+);
+export default Home;
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import Menu from './Menu';
+
+/** To display dynamically using props with default value */
+const Layout = ({
+  title = 'Title',
+  description = 'Description',
+  className,
+  children
+}) => (
+  <div>
+    <Menu />
+    <div className='jumbotron'>
+      <h2>{title}</h2>
+      <p className='lead'>{description}</p>
+    </div>
+    <div className={className}>{children}</div>
+  </div>
+);
+
+export default Layout;
diff --git a/src/components/Menu.js b/src/components/Menu.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link, withRouter } from 'react-router-dom';
+import { Icon } from 'antd';
+
+const isActive = (history, path) => {
+  if (history.location.pathname === path) {
+    return { color: '#ff9900' };
+  } else {
+    return { color: '#ffffff' };
+  }
+};
+
+const Menu = ({ history }) => (
+  <ul className='nav nav-tabs bg-primary'>
+    <li className='nav-item'>
+      <Link className='nav-link' style={isActive(history, '/')} to='/'>
+        <Icon type='home' /> Home
+      </Link>
+    </li>
+
+    <li className='nav-item'>
+      <Link
+        className='nav-link'
+        style={isActive(history, '/signin')}
+        to='/signin'
+      >
+        Signin
+      </Link>
+    </li>
+
+    <li className='nav-item'>
+      <Link
+        className='nav-link'
+        style={isActive(history, '/signup')}
+        to='/signup'
+      >
+        Signup
+      </Link>
+    </li>
+  </ul>
+);
+
+export default withRouter(Menu);
diff --git a/src/config.js b/src/config.js
@@ -0,0 +1 @@
+export const API = process.env.REACT_APP_API_URL;
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import Routes from './Routes';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Routes />, document.getElementById('root'));
diff --git a/src/user/SignIn.js b/src/user/SignIn.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import Layout from '../components/Layout';
+
+const SignIn = () => (
+  <Layout title='SignIn' description='SignIn to Full-Stack Dev'>
+    ...
+  </Layout>
+);
+export default SignIn;
diff --git a/src/user/SignUp.js b/src/user/SignUp.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import Layout from '../components/Layout';
+import { API } from '../config';
+
+const SignUp = () => (
+  <Layout title='SignUp' description='SignUp to Full-Stack Dev'>
+    {API}
+  </Layout>
+);
+export default SignUp;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const API = process.env.REACT_APP_API_URL;