feat: fix post edit
This commit is contained in:
parent
ead98cb41f
commit
bb9aa1aee6
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue