@material-ui/icons#RefreshRounded JavaScript Examples

The following examples show how to use @material-ui/icons#RefreshRounded. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Waifu.jsx    From animeworldz with MIT License 5 votes vote down vote up 
function Waifu() {
  const listInnerRef = useRef(null);
  const [picsList, setPicsList] = useState([]);
  const [refreshKey, setRefreshKey] = useState(0);
  const [keyword, setKeyword] = useState("waifu");
  const classes = useStyles();

  const getWaifuPics = () => {
    axios
      .post(`https://api.waifu.pics/many/sfw/${keyword}`, {})
      .then((res) => setPicsList(res.data))
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    getWaifuPics();
  }, [refreshKey, keyword]);

  let temp = [];
  if (picsList.length !== 0) {
    picsList.files.map((img) => {
      temp.push({
        src: img,
        width: 4,
        height: 4,
      });
    });
  }

  const handleChange = (event) => {
    setKeyword(event.target.value);
  };

  const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
      if (scrollTop + clientHeight === scrollHeight) {
        console.log("reached bottom");
      }
    }
  };

  return (
    <div className={classes.root} ref={listInnerRef} onScroll={onScroll}>
      <Gallery photos={temp ? temp : ""} />
      <Select
        value={keyword}
        onChange={handleChange}
        className={classes.select}
        color="secondary"
        variant="outlined"
        autoFocus={true}
      >
        <MenuItem value={"waifu"}>Waifu</MenuItem>
        <MenuItem value={"neko"}>Neko</MenuItem>
        <MenuItem value={"megumin"}>Megumin</MenuItem>
        <MenuItem value={"cuddle"}>Cuddle</MenuItem>
        <MenuItem value={"pat"}>Pat</MenuItem>
        <MenuItem value={"slap"}>Slap</MenuItem>
        <MenuItem value={"dance"}>Dance</MenuItem>
      </Select>
      <Fab
        color="secondary"
        aria-label="refresh"
        className={classes.fab}
        onClick={() => setRefreshKey((prev) => prev + 1)}
      >
        <RefreshRounded />
      </Fab>
    </div>
  );
}