Category: JavaScript

Categories
React Answers

How to make redirects after an axios post request with Express and React?

Labrador retriever puppy walking on green grass

To make redirects after an axios post request with Express and React, we set window.location to the new URL value after the response from the axios request to the Express back end is available.

For instance, we write

import React, { Component } from "react";
//...

class MyClass extends Component {
  onSubmit = async (e) => {
    e.preventDefault();
    const { username, password } = this.state;
    const response = await axios.post("/login", { username, password });
    if (response.data.redirect == "/") {
      window.location = "/index";
    } else if (response.data.redirect == "/login") {
      window.location = "/login";
    }
  };
  //...
}
export default MyClass;

to create the onSubmit method that calls axios.post to make a POST request to the /login endpoint in our Express back end,

Then we get the response which has the redirect URL.

And then we set window.location to a new value to go to the URL.

Categories
React Answers

How to use history.push(‘path’) in react router 5.1.2 in a React stateful component?

Labrador retriever puppy walking on green grass

To use history.push(‘path’) in react router 5.1.2 in a React stateful component, we call withRouter with our component so that the history prop is available in our component.

For instance, we write

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class MyClass extends Component {
  routingFunction = (param) => {
    this.props.history.push({
      pathname: `/target-path`,
      state: param,
    });
  };
  //...
}
export default withRouter(MyClass);

to create the routingFunction method that calls this.props.history.push with an object that redirects to pathname.

Categories
React Answers

How to pass the initial state while rendering a component with React?

Labrador retriever puppy walking on green grass

To pass the initial state while rendering a component with React, we set the prop value as the value of the state’s initial value in getInitialState.

For instance, we write

class C extends Component {
  //...
  getInitialState() {
    return { foo: this.props.foo };
  }
  //...
}

to set the initial value of the foo state to the foo prop’s value.

Categories
JavaScript Answers

How to Round Time to the Nearest Quarter-Hour in JavaScript?

white and brown shih tzu puppy

Sometimes, we want to round time to the nearest quarter-hour in JavaScript

In this article, we’ll look at how to round time to the nearest quarter-hour in JavaScript.

Round Time to the Nearest Quarter-Hour in JavaScript

To round time to the nearest quarter-hour in JavaScript, we can use existing JavaScript date methods.

For instance, we can write:

const roundTimeQuarterHour = (time) => {
  const timeToReturn = new Date(time);
  timeToReturn.setMilliseconds(Math.round(timeToReturn.getMilliseconds() / 1000) * 1000);
  timeToReturn.setSeconds(Math.round(timeToReturn.getSeconds() / 60) * 60);
  timeToReturn.setMinutes(Math.round(timeToReturn.getMinutes() / 15) * 15);
  return timeToReturn;
}
const dt = new Date(2021, 1, 1, 1, 13, 1, 1)
console.log(roundTimeQuarterHour(dt))

to create the roundTimeQuarterHour function that takes the time to round.

In the function, we convert that to a date object with the Date constructor top create the timeToReturn date object.

Then we call setMilliseconds to set timeToReturn the nearest 1000 milliseconds.

Next, we call setSeconds to round timeToReturn to the nearest 60 seconds.

Then, we call setNMinutes to round timeToReturn to the nearest 15 minutes by getting the number of minutes from the time with getMinutes , dividing that by 15 and multiplying that by 15 again.

Therefore, the console log should log:

Mon Feb 01 2021 01:15:00 GMT-0800 (Pacific Standard Time)

Conclusion

To round time to the nearest quarter-hour in JavaScript, we can use existing JavaScript date methods.

Categories
JavaScript Answers

How to Disable Clicking Inside a Div with CSS or JavaScript?

white and brown long coated small dog

To disable clicking inside a div with CSS or JavaScript, we can set the pointer-events CSS property to none .

Also, we can add a click event listener to the div and then call event.preventDefault inside.

For instance, if we have the following div:

<div id='foo'>  
  foo  
</div>

Then we can disable clicks inside it with CSS by writing:

#foo {  
  pointer-events: none;  
}

To disable clicks with JavaScript, we can write:

const foo = document.querySelector('#foo')  
foo.addEventListener('click', (event) => {  
  event.preventDefault();  
});

to select the div by its ID with document.querySelector .

Then we call addEventListener on it with 'click' and a click event handler that calls event.preventDefault to stop the default action when the div is clicked.