updated

Author: okibayu

ism/react-app/package-lock.json

@@ -13,14 +13,15 @@
     "node-sass": "^4.13.0",
     "popper.js": "^1.16.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
+    "react": "16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
-    "react-dom": "^16.12.0",
+    "react-dom": "16.12.0",
     "react-ion-slider": "^1.0.5",
     "react-owl-carousel": "^2.3.1",
     "react-popper": "^1.3.7",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.3.0"
+    "react-scripts": "3.3.0",
+    "react-spring": "^8.0.27"
   },
   "scripts": {
     "start": "react-scripts start",

ism/react-app/package.json

@@ -124,7 +124,7 @@ class SearchForm extends React.Component {
     this.$el.on('change', this.handleChange);
 
     this.slideToggle = this.slideToggle;
-    this.$el.slideToggle('fast', this.handleClick);
+    this.$el.slideToggle('fast', this.state);
 
   }
 
@@ -442,7 +442,7 @@ class SearchForm extends React.Component {
                   method="post" 
                   onSubmit={this.submitForm}
                   >
-                    {fireRedirect && (<Redirect to={'/trains/available'}/>)}
+                    {fireRedirect && (<Redirect to={'/trains/results'}/>)}
                     <div className="mb-3">
                       <div className="custom-control custom-radio custom-control-inline">
                         <input id="train-oneway" name="train-trip" className="custom-control-input" defaultChecked required type="radio" />

ism/react-app/src/components/SearchForm.js

@@ -30,3 +30,8 @@
 	transform: scale($val);
 }
 
+@mixin transform($property) {
+	-webkit-transform: $property;
+	-ms-transform: $property;
+	transform: $property;
+}

ism/react-app/src/components/scss/_mixins.scss

@@ -12,6 +12,7 @@ class Filter extends React.Component {
                 </div>
                 <div className="filter-header">
                     <a href="#" className="btn btn-sm shadow-sm collapsed" data-toggle="collapse" data-target="#kelas" role="button" aria-expanded="false" aria-controls="#kelas">Kelas</a>
+                    <div className="status" />
                 </div>
                 <div className="filter-header">
                     <a href="#" className="btn btn-sm shadow-sm collapsed" data-toggle="collapse" data-target="#kereta" role="button" aria-expanded="false" aria-controls="#kereta">Kereta Api</a>

ism/react-app/src/components/trains/Filter.js

@@ -14,7 +14,6 @@ const ContentHome = loadable(() => import('./components/reused/ContentHome'));
 const ContentFlights = loadable(() => import('./components/reused/ContentFlights'));
 const ContentHotels = loadable(() => import('./components/reused/ContentHotels'));
 const ContentTrains = loadable(() => import('./components/reused/ContentTrains'));
-// const TrainResults = loadable(() => import('./components/trains/TrainResults'));
 const Footer = loadable(() => import('./components/reused/Footer'));
 
 class DynamicImport extends Component {
@@ -36,30 +35,29 @@ class DynamicImport extends Component {
 
 function Child () {
   let {id} = useParams();
-  let bg404 = {
-    width: "100%",
-    height: "100%",
-    backgroundImage: `url(${Background})`,
-    position: "cover"
-  };
+  const bg404 = {
+        width: "100%",
+        backgroundImage: `url(${Background})`,
+        position: "cover"
+      };
 
-return (
-    <div className="section" style={bg404} background-size="contain">
-      <div className="container">
-        <div className="row align-items-center p-3">
-        <div className="col text-center">
-          <img src={icon404}></img> >
-          <h3>WHOOPS!</h3>
-            Looks like something's broken here.<br></br>
-            The page you were looking for could not be found.<br></br>
-            <i className="fas fa-link"></i> <span className="text-danger"> {id}<br></br>
-            </span>
-        </div>
-      </div>
-      </div>
-    </div>
-  );
-}
+      return (
+          <div className="section" style={bg404} background-size="contain">
+            <div className="container">
+              <div className="row align-items-center p-3">
+              <div className="col text-center">
+                <img src={icon404}></img> >
+                <h3>WHOOPS!</h3>
+                  Looks like something's broken here.<br></br>
+                  The page you were looking for could not be found.<br></br>
+                  <i className="fas fa-link"></i> <span className="text-danger"> {id}<br></br>
+                  </span>
+              </div>
+            </div>
+            </div>
+          </div>
+        );
+  }
 
 const TrainResults = (props) => (
   <DynamicImport load={() => import('./components/trains/TrainResults')}>