TIL)노마드코더 React hooks(4)

//알림 hooks
const useNotification = (title,option) => {
  const fireNotif = () => {
    if(Notification.permission !== "granted") {
      Notification.requestPermission().then(permission => {
        if(permission === "granted") {
          new Notification(title,option)
        }else {
          return;
        }
      })
    }else {
      new Notification(title,option)
    }
  }
  return fireNotif;
}

export default function App() {
  const triggerNotif = useNotification("Hello",{body : "How are you?"});
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <button onClick={triggerNotif}>Hi</button>
    </div>
  );
}

window에서 안되시는 분들은 윈도우 우측하단 메뉴창에 대화창 표시 누르시고 알림관리 들어가셔서 앱 알림 받기에 본인의 브라우저가 알림 켜져있는지 확인

//useAxios trigger를 통해 로딩 제어
//index.js
export default function App() {
  //instance의 경우 Axios에 주지않아도 상관XX.
  const {loading,error ,data,refetch} = useAxios({url:"url"});
   return <div className="App" style={{ height: "1000vh" }}>
      <h2>{data&& data.status}</h2>
      <h2>{loading && "Loading" }</h2>
      <button onClick={refetch}>Hi</button>
    </div>
}

//useAxios.js
//기본값으로 axiosClient를 요청.
//axiosInstance = axios는 약간의 customization과 configuration을 허용하여 (ex: 디폴트 url설정,자동으로 헤더를 설정하는것)
import defaultAxios from "axios";

const useAxios = (opts, axiosInstance = defaultAxios) => {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null
  });
  const [trigger, setTrigger] = useState(0);
  const refetch = () => {
    setState({
      ...state,
      loading: true
    });
    setTrigger(Date.now());
  };
  if (!opts.url) {
    return;
  }
  useEffect(() => {
    axiosInstance(opts).then((data) => {
      setState({
        ...state,
        loading: false,
        data
      })
     
    })
    .catch(error => {
      setState({
        ...state,
        loading:false,
        error
      })
    }) 
  }, [trigger]);
  //state retunr대신 ...state와 새로운 함수(refetch)를 return함
  return { ...state, refetch };
};