create detail profile page

src/index.js

@@ -29,6 +29,8 @@ import Login from "views/examples/Login.js";
 import Profile from "views/examples/Profile.js";
 import Register from "views/examples/Register.js";
 import Tracecode from "views/examples/Tracecode.js"
+import DetailProfile from "views/examples/DetailProfile.js"
+import { Routes } from "./reoutes";
 
 ReactDOM.render(
   <BrowserRouter>
@@ -39,6 +41,11 @@ ReactDOM.render(
         exact
         render={props => <Tracecode {...props} />}
       />
+      <Route
+        path={'/profile/detail'}
+        exact
+        render={props => <DetailProfile {...props} />}
+      />
       <Route
         path="/landing-page"
         exact

src/reoutes.js

+export const Routes = {
+    SearchDetail: { path: "./profile"},
+    TraceCode: { path: "./trace-code"}
+}
\ No newline at end of file

src/views/Index.js

@@ -60,6 +60,7 @@ class Index extends React.Component {
           <Hero />
           <section className="section">
             <Container>
+              <Inputs />
             </Container>
           </section>
         </main>

src/views/IndexSections/Inputs.js

@@ -15,7 +15,7 @@
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 */
-import React from "react";
+import React, { useState, useEffect } from "react";
 // nodejs library that concatenates classes
 import classnames from "classnames";
 // reactstrap components
@@ -27,49 +27,85 @@ import {
   InputGroup,
   Container,
   Row,
-  Col
+  Col,
+  Button,
+  Form
 } from "reactstrap";
+import { useHistory } from 'react-router-dom';
+import dummyData from "../../data/index.json";
+import { Routes } from "../../reoutes";
 
-class Inputs extends React.Component {
-  state = {};
-  render() {
+const Inputs = () => {
+  const [searchProfile, setSearchProfile] = useState();
+  const history = useHistory();
+
+  const handleChangeSearch = (event) => {
+    console.log("change change");
+    setSearchProfile(event.target.value);
+  }
+
+  const onHandleSearch = () => {
+    console.log("dummyData.data", dummyData.data);
+    const nameCode = dummyData.data.map(item => item.code);
+    console.log("nameCode", nameCode);
+    if(searchProfile === nameCode){
+      history.push({
+        pathname: Routes.SearchProfile.path + `${searchProfile}`,
+        state: { code_name: searchProfile }
+      });
+    }else {
+      history.push("");
+    }
+    
+    console.log("this.state.searchProfile", searchProfile);
+  }
+
+  
     return (
       <>
         <section className="section pb-0 section-components">
           <Container className="mb-5">
             {/* Inputs */}
-            <h3 className="h4 text-success font-weight-bold mb-4">Inputs</h3>
-            <div className="mb-3">
+            <h3 className="h4 text-success font-weight-bold mb-4">Search profile</h3>
+            {/* <div className="mb-3">
               <small className="text-uppercase font-weight-bold">
                 Form controls
               </small>
-            </div>
+            </div> */}
             <Row>
               <Col lg="4" sm="6">
-                <FormGroup>
+                {/* <FormGroup>
                   <Input placeholder="Regular" type="text" />
-                </FormGroup>
-                <FormGroup
-                  className={classnames({
-                    focused: this.state.searchFocused
-                  })}
-                >
-                  <InputGroup className="mb-4">
-                    <InputGroupAddon addonType="prepend">
-                      <InputGroupText>
-                        <i className="ni ni-zoom-split-in" />
-                      </InputGroupText>
-                    </InputGroupAddon>
-                    <Input
-                      placeholder="Search"
-                      type="text"
-                      onFocus={e => this.setState({ searchFocused: true })}
-                      onBlur={e => this.setState({ searchFocused: false })}
-                    />
-                  </InputGroup>
-                </FormGroup>
+                </FormGroup> */}
+                
+                  <FormGroup
+                    // className={classnames({
+                    //   focused: this.state.searchFocused
+                    // })}
+                  >
+                    <InputGroup className="mb-4">
+                      <InputGroupAddon addonType="prepend">
+                        <InputGroupText>
+                          <i className="ni ni-zoom-split-in" />
+                        </InputGroupText>
+                      </InputGroupAddon>
+                      <Input
+                        placeholder="Search"
+                        type="text"
+                        // onFocus={e => this.setState({ searchFocused: true })}
+                        // onBlur={e => this.setState({ searchFocused: false })}
+                        value={searchProfile}
+                        onChange={handleChangeSearch}
+                      />
+                    </InputGroup>
+                  </FormGroup>
+                  <Button className="btn-1" color="primary" type="button" onClick={onHandleSearch} >
+                    Search
+                  </Button>
+                
               </Col>
-              <Col lg="4" sm="6">
+              
+              {/* <Col lg="4" sm="6">
                 <FormGroup>
                   <Input disabled placeholder="Regular" type="text" />
                 </FormGroup>
@@ -108,12 +144,12 @@ class Inputs extends React.Component {
                     type="email"
                   />
                 </FormGroup>
-              </Col>
+              </Col> */}
             </Row>
           </Container>
-          <div className="py-5 bg-secondary">
+          {/* <div className="py-5 bg-secondary">
             <Container>
-              {/* Inputs (alternative) */}
+              Inputs (alternative)
               <div className="mb-3">
                 <small className="text-uppercase font-weight-bold">
                   Form controls (alternative)
@@ -199,11 +235,10 @@ class Inputs extends React.Component {
                 </Col>
               </Row>
             </Container>
-          </div>
+          </div> */}
         </section>
       </>
     );
-  }
 }
 
 export default Inputs;