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 = () => {
@@ -248,7 +252,7 @@ const Submit = () => {
- {subplebbit?.rules?.length > 0 && (
+ {selectedSubplebbitData?.rules?.length > 0 && (
- {t('rules_for')} p/{subplebbit?.shortAddress}
+ {t('rules_for')} p/{selectedSubplebbitData.shortAddress}
-
{subplebbit?.rules?.map((rule: string, index: number) => - {rule}
)}
+
{selectedSubplebbitData.rules?.map((rule: string, index: number) => - {rule}
)}
@@ -308,7 +323,7 @@ const Submit = () => {