diff --git a/src/views/submit-page/submit-page.tsx b/src/views/submit-page/submit-page.tsx index 57eebe8c..b4977741 100644 --- a/src/views/submit-page/submit-page.tsx +++ b/src/views/submit-page/submit-page.tsx @@ -70,21 +70,34 @@ const UrlField = () => { }; const Submit = () => { - const account = useAccount(); const { t } = useTranslation(); const params = useParams(); - const paramsSubplebbitAddress = params.subplebbitAddress; - const [inputAddress, setInputAddress] = useState(''); - const [selectedSubplebbit, setSelectedSubplebbit] = useState(paramsSubplebbitAddress); - const subplebbit = useSubplebbit({ subplebbitAddress: selectedSubplebbit }); const navigate = useNavigate(); + const { setSubmitStore, resetSubmitStore } = useSubmitStore(); - const { title, content, link, subplebbitAddress, publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore(); + const [inputAddress, setInputAddress] = useState(params.subplebbitAddress || ''); + const [selectedSubplebbit, setSelectedSubplebbit] = useState(params.subplebbitAddress || ''); + + useEffect(() => { + return () => { + resetSubmitStore(); + }; + }, [resetSubmitStore]); + + useEffect(() => { + setInputAddress(params.subplebbitAddress || ''); + setSelectedSubplebbit(params.subplebbitAddress || ''); + setSubmitStore({ subplebbitAddress: params.subplebbitAddress || '' }); + }, [params.subplebbitAddress, setSubmitStore]); + + const { title, content, link, subplebbitAddress, publishCommentOptions, setSubmitStore: setSubmitStoreHook, resetSubmitStore: resetSubmitStoreHook } = useSubmitStore(); const { index, publishComment } = usePublishComment(publishCommentOptions); - const { subscriptions } = account || {}; + const { subscriptions } = useAccount() || {}; const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses(); - const { isOffline, offlineTitle } = useIsSubplebbitOffline(subplebbit); + const selectedSubplebbitData = useSubplebbit({ subplebbitAddress: selectedSubplebbit }); + + const { isOffline, offlineTitle } = useIsSubplebbitOffline(selectedSubplebbitData); const onPublish = () => { if (!title) { @@ -106,10 +119,10 @@ const Submit = () => { // redirect to pending page when pending comment is created useEffect(() => { if (typeof index === 'number') { - resetSubmitStore(); + resetSubmitStoreHook(); navigate(`/profile/${index}`); } - }, [index, resetSubmitStore, navigate]); + }, [index, resetSubmitStoreHook, navigate]); const subsDescription =
{subscriptions?.length > 5 ? t('submit_subscriptions') : t('submit_subscriptions_notice')}
; @@ -118,22 +131,13 @@ const Submit = () => { return shuffled.slice(0, count); }; + // show list of random subplebbits only once when the component mounts const [randomSubplebbits, setRandomSubplebbits] = useState([]); useEffect(() => { - // Generate random subplebbits only once when the component mounts const generatedSubplebbits = getRandomSubplebbits(defaultSubplebbitAddresses, 10); setRandomSubplebbits(generatedSubplebbits); }, [defaultSubplebbitAddresses]); const listSource = subscriptions?.length > 5 ? subscriptions : randomSubplebbits; - const subscriptionsList = ( -
- {listSource.map((subscription: string) => ( - setSelectedSubplebbit(subscription)}> - {Plebbit.getShortAddress(subscription)} - - ))} -
- ); const [activeDropdownIndex, setActiveDropdownIndex] = useState(-1); const [isInputAddressFocused, setIsInputAddressFocused] = useState(false); @@ -157,7 +161,7 @@ const Submit = () => { setIsInputAddressFocused(false); } }, - [filteredSubplebbitAddresses, activeDropdownIndex, setSubmitStore, setSelectedSubplebbit, setIsInputAddressFocused], + [filteredSubplebbitAddresses, activeDropdownIndex, setSubmitStore], ); useEffect(() => { @@ -173,7 +177,7 @@ const Submit = () => {
  • setSelectedSubplebbit(subplebbitAddress)} + onClick={() => handleSubplebbitSelect(subplebbitAddress)} onMouseEnter={() => setActiveDropdownIndex(index)} > {subplebbitAddress} @@ -183,45 +187,45 @@ const Submit = () => { ); const handleAddressChange = (e: ChangeEvent) => { - setInputAddress(e.target.value); - setSelectedSubplebbit(e.target.value); + const newValue = e.target.value; + setInputAddress(newValue); + setSelectedSubplebbit(newValue); + setSubmitStoreHook({ subplebbitAddress: newValue }); }; - useEffect(() => { - if (inputAddress) { - setSelectedSubplebbit(inputAddress); - } - }, [inputAddress]); - - useEffect(() => { - if (selectedSubplebbit) { - setSubmitStore({ subplebbitAddress: selectedSubplebbit }); - } - }, [selectedSubplebbit, setSubmitStore]); - - useEffect(() => { - if (paramsSubplebbitAddress) { - setSubmitStore({ subplebbitAddress: paramsSubplebbitAddress }); - } - }, [paramsSubplebbitAddress, setSubmitStore]); - useEffect(() => { window.scrollTo(0, 0); }, []); - const documentTitle = t('submit_to_string', { string: subplebbit?.title || subplebbit?.shortAddress || 'Seedit', interpolation: { escapeValue: false } }); + const documentTitle = t('submit_to_string', { + string: selectedSubplebbitData?.title || selectedSubplebbitData?.shortAddress || 'Seedit', + interpolation: { escapeValue: false }, + }); + useEffect(() => { document.title = documentTitle; }, [documentTitle]); + const handleSubplebbitSelect = (subplebbitAddress: string) => { + setSelectedSubplebbit(subplebbitAddress); + setInputAddress(subplebbitAddress); + setSubmitStore({ subplebbitAddress: subplebbitAddress }); + setIsInputAddressFocused(false); + setActiveDropdownIndex(-1); + }; + return (

    : <> }} + values={{ + link: selectedSubplebbitData?.title || selectedSubplebbitData?.shortAddress || 'seedit', + }} + components={{ + 1: selectedSubplebbitData?.shortAddress ? : <>, + }} />

    @@ -236,7 +240,7 @@ const Submit = () => {