feat: delay
This commit is contained in:
Nevo David
parent
407cfa67ef
commit
4836b2e7c1
|
|
@ -148,6 +148,7 @@ export const AddEditModalInnerInner: FC<AddEditModalProps> = (props) => {
|
|||
0,
|
||||
existingData.integration,
|
||||
existingData.posts.map((post) => ({
|
||||
delay: 0,
|
||||
content:
|
||||
post.content.indexOf('<p>') > -1
|
||||
? post.content
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
'use client';
|
||||
|
||||
import React, { FC, useCallback } from 'react';
|
||||
import { DelayIcon } from '@gitroom/frontend/components/ui/icons';
|
||||
import clsx from 'clsx';
|
||||
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
|
||||
export const DelayComponent: FC<{
|
||||
currentIndex: number;
|
||||
currentDelay: number;
|
||||
}> = ({ currentIndex, currentDelay }) => {
|
||||
const t = useT();
|
||||
const { current, setInternalDelay, setGlobalDelay } = useLaunchStore(
|
||||
useShallow((state) => ({
|
||||
current: state.current,
|
||||
setGlobalDelay: state.setGlobalDelay,
|
||||
setInternalDelay: state.setInternalDelay,
|
||||
}))
|
||||
);
|
||||
|
||||
const setDelay = useCallback(
|
||||
(index: number) => (minutes: number) => {
|
||||
if (current !== 'global') {
|
||||
return setInternalDelay(current, index, minutes);
|
||||
}
|
||||
|
||||
return setGlobalDelay(index, minutes);
|
||||
},
|
||||
[currentIndex, current]
|
||||
);
|
||||
|
||||
return (
|
||||
<DelayIcon
|
||||
// move it into the modal
|
||||
onClick={() => setDelay(currentIndex)(100)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={
|
||||
!currentDelay
|
||||
? t('delay_comment', 'Delay comment')
|
||||
: `Comment delayed by ${currentDelay} minutes`
|
||||
}
|
||||
className={clsx(
|
||||
'cursor-pointer',
|
||||
currentDelay > 0 && 'bg-[#D82D7E] text-white rounded-full'
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -63,7 +63,9 @@ import {
|
|||
ResetIcon,
|
||||
TrashIcon,
|
||||
EmojiIcon,
|
||||
DelayIcon,
|
||||
} from '@gitroom/frontend/components/ui/icons';
|
||||
import { DelayComponent } from '@gitroom/frontend/components/new-launch/delay.component';
|
||||
|
||||
const InterceptBoldShortcut = Extension.create({
|
||||
name: 'preventBoldWithUnderline',
|
||||
|
|
@ -118,6 +120,8 @@ export const EditorWrapper: FC<{
|
|||
deleteInternalValue,
|
||||
setGlobalValue,
|
||||
setInternalValue,
|
||||
setInternalDelay,
|
||||
setGlobalDelay,
|
||||
internalFromAll,
|
||||
totalChars,
|
||||
postComment,
|
||||
|
|
@ -150,6 +154,8 @@ export const EditorWrapper: FC<{
|
|||
deleteInternalValue: state.deleteInternalValue,
|
||||
setGlobalValue: state.setGlobalValue,
|
||||
setInternalValue: state.setInternalValue,
|
||||
setGlobalDelay: state.setGlobalDelay,
|
||||
setInternalDelay: state.setInternalDelay,
|
||||
totalChars: state.totalChars,
|
||||
appendInternalValueMedia: state.appendInternalValueMedia,
|
||||
appendGlobalValueMedia: state.appendGlobalValueMedia,
|
||||
|
|
@ -191,6 +197,7 @@ export const EditorWrapper: FC<{
|
|||
const newValue = value.map((p, index) => {
|
||||
return {
|
||||
id: makeId(10),
|
||||
delay: 0,
|
||||
...(items?.[index]?.media
|
||||
? { media: items[index].media }
|
||||
: { media: [] }),
|
||||
|
|
@ -275,7 +282,10 @@ export const EditorWrapper: FC<{
|
|||
const goBackToGlobal = useCallback(async () => {
|
||||
if (
|
||||
await deleteDialog(
|
||||
t('are_you_sure_go_back_to_global_mode', 'This action is irreversible. Are you sure you want to go back to global mode?'),
|
||||
t(
|
||||
'are_you_sure_go_back_to_global_mode',
|
||||
'This action is irreversible. Are you sure you want to go back to global mode?'
|
||||
),
|
||||
t('yes_go_back_to_global_mode', 'Yes, go back to global mode')
|
||||
)
|
||||
) {
|
||||
|
|
@ -295,6 +305,7 @@ export const EditorWrapper: FC<{
|
|||
if (internal) {
|
||||
return addInternalValue(index, current, [
|
||||
{
|
||||
delay: 0,
|
||||
content: '',
|
||||
id: makeId(10),
|
||||
media: [],
|
||||
|
|
@ -304,6 +315,7 @@ export const EditorWrapper: FC<{
|
|||
|
||||
return addGlobalValue(index, [
|
||||
{
|
||||
delay: 0,
|
||||
content: '',
|
||||
id: makeId(10),
|
||||
media: [],
|
||||
|
|
@ -317,7 +329,10 @@ export const EditorWrapper: FC<{
|
|||
(index: number) => async () => {
|
||||
if (
|
||||
!(await deleteDialog(
|
||||
t('are_you_sure_delete_this_post', 'Are you sure you want to delete this post?'),
|
||||
t(
|
||||
'are_you_sure_delete_this_post',
|
||||
'Are you sure you want to delete this post?'
|
||||
),
|
||||
t('yes_delete_it', 'Yes, delete it!')
|
||||
))
|
||||
) {
|
||||
|
|
@ -358,7 +373,10 @@ export const EditorWrapper: FC<{
|
|||
<div className="w-[54px] h-[54px] rounded-full bg-newSettings opacity-80" />
|
||||
</div>
|
||||
<div className="text-[14px] font-[600] text-white">
|
||||
{t('cant_edit_networks_when_creating_set', "You can't edit networks when creating a set")}
|
||||
{t(
|
||||
'cant_edit_networks_when_creating_set',
|
||||
"You can't edit networks when creating a set"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute w-full h-full left-0 top-0 bg-newBackdrop opacity-60 z-[100] rounded-[12px]" />
|
||||
|
|
@ -380,7 +398,10 @@ export const EditorWrapper: FC<{
|
|||
<div className="w-[54px] h-[54px] rounded-full bg-newSettings opacity-80" />
|
||||
</div>
|
||||
<div className="text-[14px] font-[600] text-white">
|
||||
{t('click_to_exit_global_editing', 'Click this button to exit global editing and customize the post for this channel')}
|
||||
{t(
|
||||
'click_to_exit_global_editing',
|
||||
'Click this button to exit global editing and customize the post for this channel'
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white rounded-[8px] h-[44px] px-[20px] bg-[#D82D7E] cursor-pointer flex justify-center items-center">
|
||||
|
|
@ -430,7 +451,7 @@ export const EditorWrapper: FC<{
|
|||
chars={chars}
|
||||
childButton={
|
||||
<>
|
||||
{((canEdit && items.length - 1 === index) || !comments) ? (
|
||||
{(canEdit && items.length - 1 === index) || !comments ? (
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1">
|
||||
{comments && (
|
||||
|
|
@ -449,7 +470,10 @@ export const EditorWrapper: FC<{
|
|||
<div className="flex gap-[6px] items-center">
|
||||
<div className="w-[8px] h-[8px] rounded-full bg-[#FC69FF]" />
|
||||
<div className="text-[14px] font-[600]">
|
||||
{t('editing_a_specific_network', 'Editing a Specific Network')}
|
||||
{t(
|
||||
'editing_a_specific_network',
|
||||
'Editing a Specific Network'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[6px] items-center">
|
||||
|
|
@ -479,10 +503,16 @@ export const EditorWrapper: FC<{
|
|||
<TrashIcon
|
||||
onClick={deletePost(index)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={t('delete_post_tooltip', 'Delete Post')}
|
||||
data-tooltip-content={t(
|
||||
'delete_post_tooltip',
|
||||
'Delete Post'
|
||||
)}
|
||||
className="cursor-pointer text-[#FF3F3F]"
|
||||
/>
|
||||
)}
|
||||
{index > 0 && (
|
||||
<DelayComponent currentIndex={index} currentDelay={g.delay} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -622,14 +652,14 @@ export const Editor: FC<{
|
|||
>
|
||||
<div className="relative cursor-text flex flex-1 flex-col">
|
||||
<div {...getRootProps()} className="flex flex-1 flex-col">
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute left-0 top-0 w-full h-full bg-black/70 z-[300] transition-all items-center justify-center flex text-white text-sm',
|
||||
!isDragActive ? 'pointer-events-none opacity-0' : 'opacity-100'
|
||||
)}
|
||||
>
|
||||
{t('drop_files_here_to_upload', 'Drop your files here to upload')}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute left-0 top-0 w-full h-full bg-black/70 z-[300] transition-all items-center justify-center flex text-white text-sm',
|
||||
!isDragActive ? 'pointer-events-none opacity-0' : 'opacity-100'
|
||||
)}
|
||||
>
|
||||
{t('drop_files_here_to_upload', 'Drop your files here to upload')}
|
||||
</div>
|
||||
<div className="px-[10px] pt-[10px] bg-newBgColorInner rounded-t-[6px] relative z-[99]">
|
||||
<OnlyEditor
|
||||
value={props.value}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,11 @@ import { newDayjs } from '@gitroom/frontend/components/layout/set.timezone';
|
|||
interface Values {
|
||||
id: string;
|
||||
content: string;
|
||||
delay: number;
|
||||
media: { id: string; path: string; thumbnail?: string }[];
|
||||
}
|
||||
|
||||
interface Internal {
|
||||
export interface Internal {
|
||||
integration: Integrations;
|
||||
integrationValue: Values[];
|
||||
}
|
||||
|
|
@ -47,6 +48,12 @@ interface StoreState {
|
|||
global: Values[];
|
||||
internal: Internal[];
|
||||
addGlobalValue: (index: number, value: Values[]) => void;
|
||||
setGlobalDelay: (index: number, minutes: number) => void;
|
||||
setInternalDelay: (
|
||||
integrationId: string,
|
||||
index: number,
|
||||
minutes: number
|
||||
) => void;
|
||||
addInternalValue: (
|
||||
index: number,
|
||||
integrationId: string,
|
||||
|
|
@ -557,4 +564,23 @@ export const useLaunchStore = create<StoreState>()((set) => ({
|
|||
set((state) => ({
|
||||
comments,
|
||||
})),
|
||||
setGlobalDelay: (index: number, minutes: number) =>
|
||||
set((state) => ({
|
||||
global: state.global.map((item, i) =>
|
||||
i === index ? { ...item, delay: minutes } : item
|
||||
),
|
||||
})),
|
||||
setInternalDelay: (integrationId: string, index: number, minutes: number) =>
|
||||
set((state) => ({
|
||||
internal: state.internal.map((item) =>
|
||||
item.integration.id === integrationId
|
||||
? {
|
||||
...item,
|
||||
integrationValue: item.integrationValue.map((v, i) =>
|
||||
i === index ? { ...v, delay: minutes } : v
|
||||
),
|
||||
}
|
||||
: item
|
||||
),
|
||||
})),
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -164,6 +164,27 @@ export const TrashIcon: FC<IconProps> = ({
|
|||
</svg>
|
||||
);
|
||||
|
||||
export const DelayIcon: FC<IconProps> = ({
|
||||
size = 20,
|
||||
className,
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 32 32"
|
||||
fill="red"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM16 27C13.8244 27 11.6977 26.3549 9.88873 25.1462C8.07979 23.9375 6.66989 22.2195 5.83733 20.2095C5.00477 18.1995 4.78693 15.9878 5.21137 13.854C5.63581 11.7202 6.68345 9.7602 8.22183 8.22183C9.76021 6.68345 11.7202 5.6358 13.854 5.21136C15.9878 4.78692 18.1995 5.00476 20.2095 5.83733C22.2195 6.66989 23.9375 8.07979 25.1462 9.88873C26.3549 11.6977 27 13.8244 27 16C26.9967 18.9164 25.8367 21.7123 23.7745 23.7745C21.7123 25.8367 18.9164 26.9967 16 27ZM24 16C24 16.2652 23.8946 16.5196 23.7071 16.7071C23.5196 16.8946 23.2652 17 23 17H16C15.7348 17 15.4804 16.8946 15.2929 16.7071C15.1054 16.5196 15 16.2652 15 16V9C15 8.73478 15.1054 8.48043 15.2929 8.29289C15.4804 8.10536 15.7348 8 16 8C16.2652 8 16.5196 8.10536 16.7071 8.29289C16.8946 8.48043 17 8.73478 17 9V15H23C23.2652 15 23.5196 15.1054 23.7071 15.2929C23.8946 15.4804 24 15.7348 24 16Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Dropdown Arrow (filled triangle)
|
||||
export const DropdownArrowIcon: FC<IconProps & { rotated?: boolean }> = ({
|
||||
size = 20,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue