absent-sapphire•10mo ago

Refresh the page when closing the modal

export const PointsModal = ({ type, point_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'points',
      action: 'create',
      redirect: 'list',
    },
  })

  const handleModalOpen = async () => {
    let available_points = 0
    try {
      const response = await fetch(`${process.env.NEXT_PUBLIC_PUBLIC_IP}/points/${member_id}`, {
        headers: {
          'Content-Type': 'application/json',
        },
      })

      if (response.status === 200) {
        const data = await response.json();
        available_points = data.data.available_points;
        setValue('available_points', available_points);
      }    
    } catch (error) {
      console.error('Error get customer point : ', error);
    }
  };

  const t = useTranslate()
  const isPay = type === 'pay'
  const pointType = isPay ? 'OP01002' : 'OP01004'
  const pointTypeName = isPay ? '적립' : '회수'

  const [open, setOpen] = useState(false)

  const onSubmit = (variables: Nullable<IPointDetail>) => {
    onFinish(variables).then(() => {
      reset()
    })
    handleClose()
  }
  const handleOpen = () => {
    handleModalOpen()
    setOpen(true)
  }
  const handleClose = () => {
    setOpen(false)
  }

export const PointsModal = ({ type, point_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'points',
      action: 'create',
      redirect: 'list',
    },
  })

  const handleModalOpen = async () => {
    let available_points = 0
    try {
      const response = await fetch(`${process.env.NEXT_PUBLIC_PUBLIC_IP}/points/${member_id}`, {
        headers: {
          'Content-Type': 'application/json',
        },
      })

      if (response.status === 200) {
        const data = await response.json();
        available_points = data.data.available_points;
        setValue('available_points', available_points);
      }    
    } catch (error) {
      console.error('Error get customer point : ', error);
    }
  };

  const t = useTranslate()
  const isPay = type === 'pay'
  const pointType = isPay ? 'OP01002' : 'OP01004'
  const pointTypeName = isPay ? '적립' : '회수'

  const [open, setOpen] = useState(false)

  const onSubmit = (variables: Nullable<IPointDetail>) => {
    onFinish(variables).then(() => {
      reset()
    })
    handleClose()
  }
  const handleOpen = () => {
    handleModalOpen()
    setOpen(true)
  }
  const handleClose = () => {
    setOpen(false)
  }

How to refresh when I close the modal?

2 Replies

kapa.ai•10mo ago

Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To refresh the page when closing the modal, you can use the window.location.reload() function in your handleClose function. This function will refresh the page when it's called. Here's how you can do it:

const handleClose = () => {
  setOpen(false);
  window.location.reload();
}

const handleClose = () => {
  setOpen(false);
  window.location.reload();
}

Please note that this will cause the entire page to reload, which might not be the best user experience. If you want to update some data on the page, it would be better to refetch that data specifically rather than reloading the entire page. Unfortunately, the provided extracts do not contain information on how to refetch data with refine. For more information on this, you can check the refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below