create react app

amirhoseinZare · May 30, 2021 · 7221aae · 7221aae
1 parent 280910b
commit 7221aae
Show file tree

Hide file tree

Showing 17 changed files with 577 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!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>
+    <!--
+      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>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,36 @@
+body {
+    margin: 0;
+}
+
+h1, h2, ul {
+    margin: 0;
+}
+
+#container {
+    display:flex;
+    width:100%;
+    position: relative;
+}
+
+#menuItems{
+    width: 20%;
+}
+
+#datagrid{
+    width: 80%;
+    display: flex;
+    flex-direction:column;
+    justify-content: space-between;
+}
+
+table {
+    border-spacing: 0;
+}
+
+tr, td, th {
+    text-align:left;
+}
+
+td, th {
+    padding:10px 25px 10px 0;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,49 @@
+import { Component } from "react"
+import "./App.css"
+import { Datagrid, MenuItems } from "./components/index"
+import { getData } from "./model/AjaxRequests"
+import { InputData } from './components/index'
+import {Paginator} from './components/index'
+
+class App extends Component {
+
+    componentDidMount() {
+        getData('orders')
+            .then(data => {
+                const fetchedData = JSON.parse(data)
+                const dataLength = fetchedData.length
+                this.setState({ data: fetchedData, title: 'orders', dataLength:dataLength })
+            })
+            .catch(err => console.log(err))
+    }
+
+    state = {
+        data: [{}],
+        customers:['name','age','gender'],
+        orders:['user','price','quantity'],
+        products:['name','price','color'],
+        currentTitle:'customers',
+        dataLength:0
+    }
+
+    setData =async (data, title) => {
+        await this.setState({ data: data, title: title })
+        await this.setState({ currentTitle:title })
+        console.log(this.state)
+    }
+    url='http://localhost:3002/'
+
+    render() {
+        return (
+            <div id="container">
+                <MenuItems dataSetter={this.setData} />
+                <Datagrid data={this.state.data} title={this.state.title}><Paginator length={this.state.dataLength}/></Datagrid>
+                <div>
+                    <InputData url={this.url+this.state.currentTitle} title1={this.state.currentTitle[0]} title2={this.state.currentTitle[1]} title3={this.state.currentTitle[2]} />
+                </div>
+            </div>
+        )
+    }
+}
+
+export { App }
diff --git a/src/components/DataGrid/DataGrid.js b/src/components/DataGrid/DataGrid.js
@@ -0,0 +1,49 @@
+import { Component } from "react"
+import style from "./DataGrid.module.css"
+
+class Datagrid extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        const {data, title} = this.props
+        const fields = Object.keys(data[0]).filter(field => field!=="id")
+        return (
+            <div id="datagrid">
+                <div className={style.datagridContainer}>
+                    <div className={style.datagridHeader}>
+                        <h2>{title}</h2>
+                        <div>
+                            <button className={style.shareButton}>Share</button>
+                            <button className={style.exportButton}>Export</button>
+                            <button className={style.weekButton} style={{marginLeft:"20px"}}>This Week</button>
+                        </div>
+                    </div>
+                    <table className={style.datagridTable}>
+                        <thead>
+                            <tr style={{backgroundColor:"#eee"}}>
+                                <th>#</th>
+                                {fields.map((field, fieldIndex) => <th key={fieldIndex}>{field}</th>)}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {data.map( (item, dataIndex) => {
+                                return (
+                                    <tr key ={dataIndex} style={{backgroundColor: dataIndex%2===0 ? "#fff" : "#eee"}} >
+                                        <td>{item['id']}</td>
+                                        {fields.map( (field, fieldIndex)=><td key={fieldIndex}>{item[field]}</td>)}
+                                    </tr>
+                                )
+                            })}
+
+                        </tbody>
+                    </table>
+                </div>
+                {this.props.children}
+            </div>
+        )
+    }
+}
+
+export {Datagrid}
diff --git a/src/components/DataGrid/DataGrid.module.css b/src/components/DataGrid/DataGrid.module.css
@@ -0,0 +1,66 @@
+.datagridContainer {
+    width: 90%;
+    margin:10px auto;
+}
+
+.datagridHeader {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #888;
+    margin-bottom:30px;
+    padding-bottom:10px;
+}
+
+.datagridTable {
+    width: 100%;
+}
+
+/* .datagridButton {
+    border:1px solid #444;
+    background-color:#fff;
+    padding: 5px 8px;
+    border-radius:5px;
+    -webkit-border-radius:5px;
+    -moz-border-radius:5px;
+    -ms-border-radius:5px;
+    -o-border-radius:5px;
+} */
+
+.shareButton{
+    border:2px solid #444;
+    background-color:#fff;
+    padding: 5px 8px;
+    border-radius:5px;
+    -webkit-border-radius:5px;
+    -moz-border-radius:5px;
+    -ms-border-radius:5px;
+    -o-border-radius:5px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.exportButton{
+    border:2px solid #444;
+    background-color:#fff;
+    padding: 5px 8px;
+    border-radius:5px;
+    -webkit-border-radius:5px;
+    -moz-border-radius:5px;
+    -ms-border-radius:5px;
+    -o-border-radius:5px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+}
+
+.weekButton{
+    border:2px solid #444;
+    background-color:#fff;
+    padding: 5px 8px;
+    border-radius:5px;
+    -webkit-border-radius:5px;
+    -moz-border-radius:5px;
+    -ms-border-radius:5px;
+    -o-border-radius:5px;
+}
diff --git a/src/components/InputData/InputData.js b/src/components/InputData/InputData.js
@@ -0,0 +1,28 @@
+import {Component} from 'react'
+import style from './InputData.module.css'
+
+class InputData extends Component{
+    handleCloseButton = () => {
+      document.getElementById("dataform").style.display = "none"; 
+    }
+
+  render(){
+    return(
+      <form className={style.form} id="dataform">
+        <button className={style.close} onClick={this.handleCloseButton}>X</button>
+        <label className={style.lable} for='one'>{this.props.title1}</label> <br/>
+        <input className={style.input} type='text' name={this.props.title1} />
+
+        <label className={style.lable} for='two'>{this.props.title2}</label><br/>
+        <input className={style.input} type='text' name={this.props.title2} />
+
+        <label className={style.lable} for='three'>{this.props.title3}</label><br/>
+        <input className={style.input} type='text' name={this.props.title3} />
+
+        <button type='submit' className={style.button}> Submit</button>
+      </form>
+    )
+  }
+}
+
+export {InputData}
diff --git a/src/components/InputData/InputData.module.css b/src/components/InputData/InputData.module.css
@@ -0,0 +1,51 @@
+.form{
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  border-radius: 10px;
+  padding: 50px;
+  background: lightgray;
+}
+
+.input{
+  border: none;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+.label {
+  display: inline-flex;
+}
+
+.button {
+
+  background-color: gray;
+  padding: 10px 20px;
+  display: flex;
+  margin-left: 10px;
+  text-align: center;
+ align-self: center;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+}
+.button:hover {
+  background-color: white;
+}
+.close {
+  position: absolute;
+  right: 0px;
+  margin: 10px;
+  top: 0px;
+  border-radius: 5px;
+  border: none;
+  padding: 5px 10px;
+  background-color: gray;
+  cursor: pointer;
+}
+.close:hover {
+  background-color: white;
+}
diff --git a/src/components/MenuItems/MenuItems.js b/src/components/MenuItems/MenuItems.js
@@ -0,0 +1,43 @@
+import {Component} from 'react'
+import style from "./MenuItems.module.css"
+import {getData} from "../../model/AjaxRequests"
+
+class MenuItems extends Component {
+
+    handleClick = async (dataName)=>{
+        const data = await getData(dataName)
+        const fetchedData = JSON.parse(data)
+        const length = fetchedData.length
+        this.props.dataSetter(fetchedData, dataName)
+    }
+
+    render() {
+        return (
+            <div className={style.sideNav} id="menuitems">
+                <div className={style.sideDiv}>
+                    <span className={style.sideSpan}>
+                    <img className={style.sideImg} src="https://aux.iconspalace.com/uploads/dashboard-icon-256-1241939503.png"/></span>
+                    <a className={style.sideLink} href="#dashboard" onClick={()=>this.handleClick('orders')}>Dashboard</a>
+                </div>
+                <div className={style.sideDiv}>
+                    <span className={style.sideSpan}>
+                    <img className={style.sideImg} src="https://img.icons8.com/pastel-glyph/2x/purchase-order.png" /></span>
+                    <a className={style.sideLink} href="#orders" onClick={()=>this.handleClick('orders')}>Orders</a>
+                </div>
+                <div className={style.sideDiv}>
+                    <span className={style.sideSpan}>
+                    <img className={style.sideImg} src="https://cdn.iconscout.com/icon/free/png-256/customers-11-866159.png" /></span>
+                    <a className={style.sideLink} href="#products" onClick={()=>this.handleClick('products')}>Products</a>
+                </div>
+                <div className={style.sideDiv}>
+                    <span className={style.sideSpan}>
+                    <img className={style.sideImg} src="https://cdn2.iconfinder.com/data/icons/e-commerce-line-4-1/1024/open_box4-512.png" /></span>
+                    <a className={style.sideLink} href="#customers" onClick={()=>this.handleClick('customers')}>Customers</a>
+                </div>
+            </div>
+        )
+    }
+}
+
+export { MenuItems }
+