feat: fix post edit

This commit is contained in:
Nevo David 2026-01-05 22:34:36 +07:00
parent ead98cb41f
commit bb9aa1aee6
2 changed files with 85 additions and 42 deletions

View File

@ -4,6 +4,7 @@ import React, {
FC,
ReactNode,
useCallback,
useEffect,
useMemo,
useRef,
useState,
@ -74,9 +75,11 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
locked,
current,
activateExitButton,
setHide,
} = useLaunchStore(
useShallow((state) => ({
hide: state.hide,
setHide: state.setHide,
date: state.date,
setDate: state.setDate,
current: state.current,
@ -92,6 +95,12 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
}))
);
useEffect(() => {
if (hide) {
setHide(false);
}
}, [hide]);
const currentIntegrationText = useMemo(() => {
if (current === 'global') {
return '';
@ -100,20 +109,22 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
const currentIntegration = integrations.find((p) => p.id === current)!;
return (
<div className="flex items-center gap-[10px]">
<div className="relative">
<img
src={`/icons/platforms/${currentIntegration.identifier}.png`}
className="w-[20px] h-[20px] rounded-[4px]"
alt={currentIntegration.identifier}
/>
<SettingsIcon
size={15}
className="text-white absolute -end-[5px] -bottom-[5px]"
/>
</div>
<div>{currentIntegration.name} {t('channel_settings', 'Settings')}</div>
<div className="flex items-center gap-[10px]">
<div className="relative">
<img
src={`/icons/platforms/${currentIntegration.identifier}.png`}
className="w-[20px] h-[20px] rounded-[4px]"
alt={currentIntegration.identifier}
/>
<SettingsIcon
size={15}
className="text-white absolute -end-[5px] -bottom-[5px]"
/>
</div>
<div>
{currentIntegration.name} {t('channel_settings', 'Settings')}
</div>
</div>
);
}, [current]);
@ -158,7 +169,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
setLoading(true);
if (
!(await deleteDialog(
t('are_you_sure_you_want_to_delete_post', 'Are you sure you want to delete this post?'),
t(
'are_you_sure_you_want_to_delete_post',
'Are you sure you want to delete this post?'
),
t('yes_delete_it', 'Yes, delete it!')
))
) {
@ -191,9 +205,14 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
for (const item of notEnoughChars) {
toaster.show(
'' +
item.integration.name +
' ' + t('post_needs_content_or_image', 'Your post should have at least one character or one image.'),
`${capitalize(item.integration.identifier.split('-')[0])} (${
item.integration.name
}):` +
' ' +
t(
'post_needs_content_or_image',
'Your post should have at least one character or one image.'
),
'warning'
);
setLoading(false);
@ -203,7 +222,12 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
for (const item of checkAllValid) {
if (item.valid === false) {
toaster.show(t('please_fix_your_settings', 'Please fix your settings'), 'warning');
toaster.show(
`${capitalize(item.integration.identifier.split('-')[0])} (${
item.integration.name
}): ${t('please_fix_your_settings', 'Please fix your settings')}`,
'warning'
);
item.fix();
setLoading(false);
setShowSettings(true);
@ -240,7 +264,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
for (const item of sliceNeeded) {
toaster.show(
`${item?.integration?.name} (${item?.integration?.identifier}) ${t('post_is_too_long', 'post is too long, please fix it')}`,
`${item?.integration?.name} (${item?.integration?.identifier}) ${t(
'post_is_too_long',
'post is too long, please fix it'
)}`,
'warning'
);
item.preview();
@ -265,7 +292,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
const shortLink = !shortLinkUrl.ask
? false
: await deleteDialog(
t('shortlink_urls_question', 'Do you want to shortlink the URLs? it will let you get statistics over clicks'),
t(
'shortlink_urls_question',
'Do you want to shortlink the URLs? it will let you get statistics over clicks'
),
t('yes_shortlink_it', 'Yes, shortlink it!')
);
@ -486,9 +516,16 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
selectedIntegrations.length === 0 || loading || locked
}
onClick={schedule('draft')}
className="cursor-pointer disabled:cursor-not-allowed px-[20px] h-[44px] bg-btnSimple justify-center items-center flex rounded-[8px] text-[15px] font-[600]"
className="relative cursor-pointer disabled:cursor-not-allowed px-[20px] h-[44px] bg-btnSimple justify-center items-center flex rounded-[8px] text-[15px] font-[600]"
>
{t('save_as_draft', 'Save as Draft')}
{loading && (
<div className="absolute left-[50%] top-[50%] -translate-y-[50%] -translate-x-[50%]">
<div className="animate-spin h-[20px] w-[20px] border-4 border-textColor border-t-transparent rounded-full" />
</div>
)}
<div className={clsx(loading && 'invisible')}>
{t('save_as_draft', 'Save as Draft')}
</div>
</button>
)}
{addEditSets && (
@ -509,9 +546,19 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
selectedIntegrations.length === 0 || loading || locked
}
onClick={schedule('schedule')}
className="text-white min-w-[180px] btnSub disabled:cursor-not-allowed disabled:opacity-80 outline-none gap-[8px] flex justify-center items-center h-[44px] rounded-[8px] bg-[#612BD3] ps-[20px] pe-[16px]"
className="text-white relative min-w-[180px] btnSub disabled:cursor-not-allowed disabled:opacity-80 outline-none gap-[8px] flex justify-center items-center h-[44px] rounded-[8px] bg-[#612BD3] ps-[20px] pe-[16px]"
>
<div className="text-[15px] font-[600]">
{loading && (
<div className="absolute left-[50%] top-[50%] -translate-y-[50%] -translate-x-[50%]">
<div className="animate-spin h-[20px] w-[20px] border-4 border-white border-t-transparent rounded-full" />
</div>
)}
<div
className={clsx(
'text-[15px] font-[600]',
loading && 'invisible'
)}
>
{selectedIntegrations.length === 0
? t('check_circles_above', 'Check the circles above')
: dummy
@ -563,7 +610,10 @@ After using the addPostFor{num} it will create a new addPostContentFor{num+ 1} f
`}
labels={{
title: t('your_assistant', 'Your Assistant'),
initial: t('assistant_initial_message', 'Hi! I can help you to refine your social media posts.'),
initial: t(
'assistant_initial_message',
'Hi! I can help you to refine your social media posts.'
),
}}
/>
</div>

View File

@ -43,14 +43,13 @@ export function useHasScroll(ref: RefObject<HTMLElement>): boolean {
}
export const SelectCurrent: FC = () => {
const { selectedIntegrations, current, setCurrent, locked, setHide, hide } =
const { selectedIntegrations, current, setCurrent, locked, setHide } =
useLaunchStore(
useShallow((state) => ({
selectedIntegrations: state.selectedIntegrations,
current: state.current,
setCurrent: state.setCurrent,
locked: state.locked,
hide: state.hide,
setHide: state.setHide,
}))
);
@ -58,14 +57,6 @@ export const SelectCurrent: FC = () => {
const contentRef = useRef<HTMLDivElement>(null);
const hasScroll = useHasScroll(contentRef);
useEffect(() => {
if (!hide) {
return;
}
setHide(false);
}, [hide]);
return (
<>
<div className="select-none left-0 absolute w-full z-[100] px-[20px]">
@ -146,12 +137,11 @@ export const SelectCurrent: FC = () => {
export const IsGlobal: FC<{ id: string }> = ({ id }) => {
const t = useT();
const { isInternal } =
useLaunchStore(
useShallow((state) => ({
isInternal: !!state.internal.find(p => p.integration.id === id),
}))
);
const { isInternal } = useLaunchStore(
useShallow((state) => ({
isInternal: !!state.internal.find((p) => p.integration.id === id),
}))
);
if (!isInternal) {
return null;
@ -160,7 +150,10 @@ export const IsGlobal: FC<{ id: string }> = ({ id }) => {
return (
<div
data-tooltip-id="tooltip"
data-tooltip-content={t('no_longer_global_mode', 'No longer in global mode')}
data-tooltip-content={t(
'no_longer_global_mode',
'No longer in global mode'
)}
className="w-[8px] h-[8px] bg-[#FC69FF] -top-[1px] -end-[3px] absolute rounded-full"
/>
);