tWIL 2022.08 1주차

import { ContextType, useCallback, useContext, useEffect, useState } from "react";
import type { Blocker, History, Transition } from "history";
import {
  Navigator as BaseNavigator,
  UNSAFE_NavigationContext as NavigationContext,
  useLocation,
  useNavigate,
} from "react-router-dom";

interface Navigator extends BaseNavigator {
  block: History["block"];
}

type NavigationContextWithBlock = ContextType<typeof NavigationContext> & {
  navigator: Navigator;
};

/**
 * @source https://github.com/remix-run/react-router/commit/256cad70d3fd4500b1abcfea66f3ee622fb90874
 */
function useBlocker(blocker: Blocker, when = true) {
  const { navigator } = useContext(NavigationContext) as NavigationContextWithBlock;

  useEffect(() => {
    if (!when) {
      return;
    }

    const unblock = navigator.block((tx: Transition) => {
      const autoUnblockingTx = {
        ...tx,
        retry() {
          // Automatically unblock the transition so it can play all the way
          // through before retrying it. T O D O: Figure out how to re-enable
          // this block if the transition is cancelled for some reason.
          unblock();
          tx.retry();
        },
      };

      blocker(autoUnblockingTx);
    });

    // eslint-disable-next-line consistent-return
    return unblock;
  }, [navigator, blocker, when]);
}

//  showPrompt - modal on/off, when - prompt on/off
export function usePrompt(when: boolean) {
  const navigate = useNavigate();
  const location = useLocation();
  const [showPrompt, setShowPrompt] = useState(false);
  const [lastLocation, setLastLocation] = useState<Transition | null>(null);
  const [confirmedNavigation, setConfirmedNavigation] = useState(false);

  const cancelNavigation = useCallback(() => {
    setShowPrompt(false);
  }, []);

  const handleBlockedNavigation = useCallback(
    (tx: Transition) => {
      if (!confirmedNavigation && tx.location.pathname !== location.pathname) {
        setShowPrompt(true);
        setLastLocation(tx);
        return false;
      }
      return true;
    },
    [confirmedNavigation, location.pathname]
  );

  const confirmNavigation = useCallback(() => {
    setShowPrompt(false);
    setConfirmedNavigation(true);
  }, []);
  useEffect(() => {
    if (confirmedNavigation && lastLocation) {
      navigate(lastLocation.location.pathname);
    }
  }, [confirmedNavigation, lastLocation, navigate]);

  useBlocker(handleBlockedNavigation, when);

  return { showPrompt, confirmNavigation, cancelNavigation };
}

import React from "react";
import { usePrompt } from "hooks";

export function Certification(props: CertificationPropType) {
  const { showPrompt, confirmNavigation, cancelNavigation } = usePrompt(true);

  return (
    // ...omitted
      <SignupDialog
        showPrompt={showPrompt}
        confirmNavigation={confirmNavigation}
        cancelNavigation={cancelNavigation}
      />
  )

import * as React from "react";
import { Dialog, DialogContent } from "@mui/material";

interface PropType {
  showPrompt: boolean;
  confirmNavigation(): void;
  cancelNavigation(): void;
}

export function SignupDialog(props: PropType) {
  const { showPrompt, confirmNavigation, cancelNavigation } = props;
  return (
    <Dialog onClose={cancelNavigation} open={showPrompt}>
      <DialogContent>// ...omitted</DialogContent>
    </Dialog>
  );
}

import * as React from "react";
import { Dialog, DialogContent } from "@mui/material";

interface PropType {
  open: boolean;
  handleClose(): void;
  confirmNavigation(): void;
  email?: string;
}

export function CertificationDialog(props: PropType) {
  const { open, handleClose, email, confirmNavigation } = props;
  return (
    <Dialog
      onClose={() => {
        confirmNavigation();
        handleClose();
      }}
      open={open}
    >
      // ...omitted
        <Button
          onClick={() => {
            confirmNavigation();
            handleClose();
          }}
        >
          <Typography variant="title20">로그인</Typography>
        </Button>
      </DialogContent>
    </Dialog>
  );
}

import { useEffect, useRef } from "react";
import { UseBeforeunloadHandler } from "./types";

/**
 * It adds an event listener to the window object that listens for the beforeunload event
 * @deprecation action in store reducer
 * @param {UseBeforeunloadHandler} handler - UseBeforeunloadHandler
 */
export const useBeforeunload = (handler: UseBeforeunloadHandler) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const eventListenerRef = useRef<any>();

  useEffect(() => {
    eventListenerRef.current = (event: BeforeUnloadEvent) => {
      const returnValue = handler?.(event);
      // Handle legacy `event.returnValue` property
      // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
      if (typeof returnValue === "string") {
        return (event.returnValue = returnValue);
      }
      // Chrome doesn't support `event.preventDefault()` on `BeforeUnloadEvent`,
      // instead it requires `event.returnValue` to be set
      // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#browser_compatibility
      if (event.defaultPrevented) {
        return (event.returnValue = "");
      }
    };
  }, [handler]);

  useEffect(() => {
    const eventListener = (event: BeforeUnloadEvent) =>
      eventListenerRef.current(event);
    window.addEventListener("beforeunload", eventListener);
    return () => {
      window.removeEventListener("beforeunload", eventListener);
    };
  }, []);
};

import React from "react";
import { getCookie } from "utils";
import { useAppDispatch, rememberUserFetch } from "Store";

const remember = getCookie("bhplf-auth-remember");

/**
 * This hook is used to remember the user's login status
 */
export function useRememberUser() {
  const dispatch = useAppDispatch();
  React.useEffect(() => {
    if (remember === "true") {
      dispatch(rememberUserFetch(true));
    } else {
      dispatch(rememberUserFetch(false));
    }
  }, [dispatch]);
}

export const authSlice = createSlice({
  name: "authentication",
  initialState,
  reducers: {
    rememberUserFetch: (state, action: PayloadAction<boolean>) => {
      state.rememberUser = action.payload;
      const { rememberUser } = state;
      setCookie("auth-remember", `${rememberUser}`);
      if (!rememberUser) {
        window.addEventListener("beforeunload", beforeUnloadEventListener);
      } else {
        window.removeEventListener("beforeunload", beforeUnloadEventListener);
      }
    },
    // ...omitted
  },
});

/**
 * It sets a cookie with the name "bhplf-reg-date" and the value of the current time in milliseconds.
 */
function beforeUnloadEventListener() {
  setCookie("reg-date", `${moment().valueOf()}`);
}

import { Auth } from "aws-amplify";
import { getCookie } from "utils";
import moment from "moment";

/**
 * If the user has a cookie that says they registered more than 5 seconds ago and they didn't check the
 * remember me box, then sign them out
 * @returns A function that returns a promise.
 */
export async function checkRemember() {
  const regDateString = getCookie("bhplf-reg-date");
  const rememberUser = getCookie("bhplf-auth-remember");
  if (!regDateString) return;
  if (!rememberUser) return;
  const regDate = moment(regDateString, "x");
  const diff = moment().diff(regDate);
  if (diff > 5000 && rememberUser === "false") {
    await Auth.signOut();
  }
}