diff --git a/resources/assets/src/index.tsx b/resources/assets/src/index.tsx index 0fa4fd30..6e19eb3f 100644 --- a/resources/assets/src/index.tsx +++ b/resources/assets/src/index.tsx @@ -41,9 +41,7 @@ async function loadModules() { typeof route.el === 'string' ? document.querySelector(route.el) : route.el - ReactDOM.render(, c, () => { - setTimeout(() => emitter.emit('mounted', { el: route.el }), 0) - }) + ReactDOM.render(, c) } } } diff --git a/resources/assets/src/scripts/hooks/useEmitMounted.ts b/resources/assets/src/scripts/hooks/useEmitMounted.ts new file mode 100644 index 00000000..5c75f9f5 --- /dev/null +++ b/resources/assets/src/scripts/hooks/useEmitMounted.ts @@ -0,0 +1,8 @@ +import { useEffect } from 'react' +import { emit } from '../event' + +export default function useEmitMounted() { + useEffect(() => { + emit('mounted') + }, []) +} diff --git a/resources/assets/src/views/auth/Forgot.tsx b/resources/assets/src/views/auth/Forgot.tsx index c642337e..3df7a405 100644 --- a/resources/assets/src/views/auth/Forgot.tsx +++ b/resources/assets/src/views/auth/Forgot.tsx @@ -1,5 +1,6 @@ import React, { useState, useRef } from 'react' import { hot } from 'react-hot-loader/root' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import urls from '@/scripts/urls' @@ -13,6 +14,8 @@ const Forgot: React.FC = () => { const [warningMessage, setWarningMessage] = useState('') const ref = useRef(null) + useEmitMounted() + const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.target.value) } diff --git a/resources/assets/src/views/auth/Login.tsx b/resources/assets/src/views/auth/Login.tsx index 3304a26c..7feb17ee 100644 --- a/resources/assets/src/views/auth/Login.tsx +++ b/resources/assets/src/views/auth/Login.tsx @@ -1,6 +1,7 @@ import React, { useState, useRef, useEffect } from 'react' import { hot } from 'react-hot-loader/root' import useBlessingExtra from '@/scripts/hooks/useBlessingExtra' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import { showModal } from '@/scripts/notify' @@ -37,6 +38,8 @@ const Login: React.FC = () => { const recaptcha = useBlessingExtra('recaptcha') const invisibleRecaptcha = useBlessingExtra('invisible') + useEmitMounted() + useEffect(() => { setHasTooManyFails(blessing.extra.tooManyFails as boolean) }, []) diff --git a/resources/assets/src/views/auth/Registration.tsx b/resources/assets/src/views/auth/Registration.tsx index fadaec28..49ec231c 100644 --- a/resources/assets/src/views/auth/Registration.tsx +++ b/resources/assets/src/views/auth/Registration.tsx @@ -1,6 +1,7 @@ import React, { useState, useRef } from 'react' import { hot } from 'react-hot-loader/root' import useBlessingExtra from '@/scripts/hooks/useBlessingExtra' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import { toast } from '@/scripts/notify' @@ -20,6 +21,8 @@ const Registration: React.FC = () => { const confirmationRef = useRef(null) const captchaRef = useRef(null) + useEmitMounted() + const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.target.value) } diff --git a/resources/assets/src/views/auth/Reset.tsx b/resources/assets/src/views/auth/Reset.tsx index 72e30796..d614ea55 100644 --- a/resources/assets/src/views/auth/Reset.tsx +++ b/resources/assets/src/views/auth/Reset.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { hot } from 'react-hot-loader/root' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import { toast } from '@/scripts/notify' @@ -12,6 +13,8 @@ const Reset: React.FC = () => { const [warningMessage, setWarningMessage] = useState('') const [isPending, setIsPending] = useState(false) + useEmitMounted() + const handlePasswordChange = (event: React.ChangeEvent) => { setPassword(event.target.value) } diff --git a/resources/assets/src/views/skinlib/Show/index.tsx b/resources/assets/src/views/skinlib/Show/index.tsx index d23934f4..3a5204f5 100644 --- a/resources/assets/src/views/skinlib/Show/index.tsx +++ b/resources/assets/src/views/skinlib/Show/index.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react' import { createPortal } from 'react-dom' import { hot } from 'react-hot-loader/root' import useBlessingExtra from '@/scripts/hooks/useBlessingExtra' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import useMount from '@/scripts/hooks/useMount' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' @@ -35,6 +36,8 @@ const Show: React.FC = () => { const reportScore = useBlessingExtra('report') const container = useMount('#previewer') + useEmitMounted() + useEffect(() => { const fetchInfo = async () => { const url = location.href diff --git a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx index 390c6e52..eb24f286 100644 --- a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx +++ b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react' import { hot } from 'react-hot-loader/root' import useBlessingExtra from '@/scripts/hooks/useBlessingExtra' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import { toast } from '@/scripts/notify' @@ -28,6 +29,8 @@ const SkinLibrary: React.FC = () => { const [totalPages, setTotalPages] = useState(1) const currentUid = useBlessingExtra('currentUid', null) + useEmitMounted() + useEffect(() => { const parseSearch = (query: string) => { const search = new URLSearchParams(query) diff --git a/resources/assets/src/views/skinlib/Upload.tsx b/resources/assets/src/views/skinlib/Upload.tsx index 1bcd3a4c..db545810 100644 --- a/resources/assets/src/views/skinlib/Upload.tsx +++ b/resources/assets/src/views/skinlib/Upload.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom' import { hot } from 'react-hot-loader/root' import { t } from '@/scripts/i18n' import useBlessingExtra from '@/scripts/hooks/useBlessingExtra' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import useMount from '@/scripts/hooks/useMount' import * as fetch from '@/scripts/net' import { showModal, toast } from '@/scripts/notify' @@ -32,6 +33,8 @@ const Upload: React.FC = () => { const container = useMount('#previewer') + useEmitMounted() + const handleNameChange = (event: React.ChangeEvent) => { setName(event.target.value) } diff --git a/resources/assets/src/views/user/Closet/index.tsx b/resources/assets/src/views/user/Closet/index.tsx index 747059b7..aca03a4b 100644 --- a/resources/assets/src/views/user/Closet/index.tsx +++ b/resources/assets/src/views/user/Closet/index.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react' import { hot } from 'react-hot-loader/root' import debounce from 'lodash.debounce' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import { showModal, toast } from '@/scripts/notify' @@ -40,6 +41,8 @@ const Closet: React.FC = () => { const [cape, setCape] = useState(null) const [showModalApply, setShowModalApply] = useState(false) + useEmitMounted() + useEffect(() => { const getItems = async () => { setIsLoading(true) diff --git a/resources/assets/src/views/user/Dashboard/index.tsx b/resources/assets/src/views/user/Dashboard/index.tsx index 9ecaa903..ab3665cb 100644 --- a/resources/assets/src/views/user/Dashboard/index.tsx +++ b/resources/assets/src/views/user/Dashboard/index.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect, useCallback } from 'react' import styled from '@emotion/styled' import { hot } from 'react-hot-loader/root' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import { toast } from '@/scripts/notify' @@ -53,6 +54,8 @@ const Dashboard: React.FC = () => { const [canSignAfterZero, setCanSignAfterZero] = useState(false) const [signGap, setSignGap] = useState(24) + useEmitMounted() + useEffect(() => { const fetchInfo = async () => { setLoading(true) diff --git a/resources/assets/src/views/user/Players/index.tsx b/resources/assets/src/views/user/Players/index.tsx index d46ad6d1..045527fc 100644 --- a/resources/assets/src/views/user/Players/index.tsx +++ b/resources/assets/src/views/user/Players/index.tsx @@ -1,9 +1,10 @@ import React, { useState, useEffect } from 'react' import { hot } from 'react-hot-loader/root' +import useEmitMounted from '@/scripts/hooks/useEmitMounted' +import useTexture from '@/scripts/hooks/useTexture' import { t } from '@/scripts/i18n' import * as fetch from '@/scripts/net' import { showModal, toast } from '@/scripts/notify' -import useTexture from '@/scripts/hooks/useTexture' import { Player, TextureType } from '@/scripts/types' import urls from '@/scripts/urls' import Loading from '@/components/Loading' @@ -22,6 +23,8 @@ const Players: React.FC = () => { const [showModalAddPlayer, setShowModalAddPlayer] = useState(false) const [showModalReset, setShowModalReset] = useState(false) + useEmitMounted() + const selectPlayer = (player: Player) => { setSelected(player.pid) setSkin(player.tid_skin)