mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-22 07:00:58 -05:00
feat(categories): autosave category changes
This commit is contained in:
Paul
parent
da47348273
commit
bb5509f660
5 changed files with 371 additions and 214 deletions
|
|
@ -48,11 +48,11 @@ export type UploadState =
|
|||
| { type: "none" }
|
||||
| { type: "attached"; files: File[] }
|
||||
| {
|
||||
type: "uploading";
|
||||
files: File[];
|
||||
percent: number;
|
||||
cancel: CancelTokenSource;
|
||||
}
|
||||
type: "uploading";
|
||||
files: File[];
|
||||
percent: number;
|
||||
cancel: CancelTokenSource;
|
||||
}
|
||||
| { type: "sending"; files: File[] }
|
||||
| { type: "failed"; files: File[]; error: string };
|
||||
|
||||
|
|
@ -173,9 +173,9 @@ export default observer(({ channel }: Props) => {
|
|||
const text =
|
||||
action === "quote"
|
||||
? `${content
|
||||
.split("\n")
|
||||
.map((x) => `> ${x}`)
|
||||
.join("\n")}\n\n`
|
||||
.split("\n")
|
||||
.map((x) => `> ${x}`)
|
||||
.join("\n")}\n\n`
|
||||
: `${content} `;
|
||||
|
||||
if (!draft || draft.length === 0) {
|
||||
|
|
@ -225,8 +225,8 @@ export default observer(({ channel }: Props) => {
|
|||
toReplace == ""
|
||||
? msg.content.toString() + newText
|
||||
: msg.content
|
||||
.toString()
|
||||
.replace(new RegExp(toReplace, flags), newText);
|
||||
.toString()
|
||||
.replace(new RegExp(toReplace, flags), newText);
|
||||
|
||||
if (newContent != msg.content) {
|
||||
if (newContent.length == 0) {
|
||||
|
|
@ -305,10 +305,10 @@ export default observer(({ channel }: Props) => {
|
|||
files,
|
||||
percent: Math.round(
|
||||
(i * 100 + (100 * e.loaded) / e.total) /
|
||||
Math.min(
|
||||
files.length,
|
||||
CAN_UPLOAD_AT_ONCE,
|
||||
),
|
||||
Math.min(
|
||||
files.length,
|
||||
CAN_UPLOAD_AT_ONCE,
|
||||
),
|
||||
),
|
||||
cancel,
|
||||
}),
|
||||
|
|
@ -398,6 +398,7 @@ export default observer(({ channel }: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: change to useDebounceCallback
|
||||
// eslint-disable-next-line
|
||||
const debouncedStopTyping = useCallback(
|
||||
debounce(stopTyping as (...args: unknown[]) => void, 1000),
|
||||
|
|
@ -553,13 +554,13 @@ export default observer(({ channel }: Props) => {
|
|||
placeholder={
|
||||
channel.channel_type === "DirectMessage"
|
||||
? translate("app.main.channel.message_who", {
|
||||
person: channel.recipient?.username,
|
||||
})
|
||||
person: channel.recipient?.username,
|
||||
})
|
||||
: channel.channel_type === "SavedMessages"
|
||||
? translate("app.main.channel.message_saved")
|
||||
: translate("app.main.channel.message_where", {
|
||||
channel_name: channel.name ?? undefined,
|
||||
})
|
||||
? translate("app.main.channel.message_saved")
|
||||
: translate("app.main.channel.message_where", {
|
||||
channel_name: channel.name ?? undefined,
|
||||
})
|
||||
}
|
||||
disabled={
|
||||
uploadState.type === "uploading" ||
|
||||
|
|
|
|||
32
src/components/ui/SaveStatus.tsx
Normal file
32
src/components/ui/SaveStatus.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { Check, CloudUpload } from "@styled-icons/boxicons-regular";
|
||||
import { Pencil } from "@styled-icons/boxicons-solid";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StatusBase = styled.div`
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: capitalize;
|
||||
`;
|
||||
|
||||
export type EditStatus = "saved" | "editing" | "saving";
|
||||
interface Props {
|
||||
status: EditStatus;
|
||||
}
|
||||
|
||||
export default function SaveStatus({ status }: Props) {
|
||||
return (
|
||||
<StatusBase>
|
||||
{status === "saved" ? (
|
||||
<Check size={20} />
|
||||
) : status === "editing" ? (
|
||||
<Pencil size={20} />
|
||||
) : (
|
||||
<CloudUpload size={20} />
|
||||
)}
|
||||
{/* FIXME: add i18n */}
|
||||
<span>{status}</span>
|
||||
</StatusBase>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
import isEqual from "lodash.isequal";
|
||||
|
||||
import { Inputs, useCallback, useEffect, useRef } from "preact/hooks";
|
||||
|
||||
export function debounce(cb: (...args: unknown[]) => void, duration: number) {
|
||||
// Store the timer variable.
|
||||
let timer: NodeJS.Timeout;
|
||||
|
|
@ -13,3 +17,60 @@ export function debounce(cb: (...args: unknown[]) => void, duration: number) {
|
|||
}, duration);
|
||||
};
|
||||
}
|
||||
|
||||
export function useDebounceCallback(
|
||||
cb: (...args: unknown[]) => void,
|
||||
inputs: Inputs,
|
||||
duration = 1000,
|
||||
) {
|
||||
// eslint-disable-next-line
|
||||
return useCallback(
|
||||
debounce(cb as (...args: unknown[]) => void, duration),
|
||||
inputs,
|
||||
);
|
||||
}
|
||||
|
||||
export function useAutosaveCallback(
|
||||
cb: (...args: unknown[]) => void,
|
||||
inputs: Inputs,
|
||||
duration = 1000,
|
||||
) {
|
||||
const ref = useRef(cb);
|
||||
|
||||
// eslint-disable-next-line
|
||||
const callback = useCallback(
|
||||
debounce(() => ref.current(), duration),
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
ref.current = cb;
|
||||
callback();
|
||||
// eslint-disable-next-line
|
||||
}, [cb, callback, ...inputs]);
|
||||
}
|
||||
|
||||
export function useAutosave<T>(
|
||||
cb: () => void,
|
||||
dependency: T,
|
||||
initialValue: T,
|
||||
onBeginChange?: () => void,
|
||||
duration?: number,
|
||||
) {
|
||||
if (onBeginChange) {
|
||||
// eslint-disable-next-line
|
||||
useEffect(
|
||||
() => {
|
||||
!isEqual(dependency, initialValue) && onBeginChange();
|
||||
},
|
||||
// eslint-disable-next-line
|
||||
[dependency],
|
||||
);
|
||||
}
|
||||
|
||||
return useAutosaveCallback(
|
||||
() => !isEqual(dependency, initialValue) && cb(),
|
||||
[dependency],
|
||||
duration,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ export default observer(() => {
|
|||
title: (
|
||||
<Text id="app.settings.server_pages.categories.title" />
|
||||
),
|
||||
hideTitle: true,
|
||||
},
|
||||
{
|
||||
id: "members",
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
import { Check } from "@styled-icons/boxicons-regular";
|
||||
import isEqual from "lodash.isequal";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
|
||||
import { Category } from "revolt-api/types/Servers";
|
||||
import { Server } from "revolt.js/dist/maps/Servers";
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import { ulid } from "ulid";
|
||||
|
||||
import { useState } from "preact/hooks";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useErrorBoundary, useState } from "preact/hooks";
|
||||
|
||||
import { useAutosave, useAutosaveCallback } from "../../../lib/debounce";
|
||||
|
||||
import ChannelIcon from "../../../components/common/ChannelIcon";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import ComboBox from "../../../components/ui/ComboBox";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
import SaveStatus, { EditStatus } from "../../../components/ui/SaveStatus";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
|
||||
/* interface CreateCategoryProps {
|
||||
|
|
@ -25,42 +30,52 @@ function CreateCategory({ callback }: CreateCategoryProps) {
|
|||
} */
|
||||
|
||||
const KanbanEntry = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 4px;
|
||||
|
||||
gap: 4px;
|
||||
margin: 4px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.9em;
|
||||
background: var(--primary-background);
|
||||
> .inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
gap: 4px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
font-size: 0.9em;
|
||||
background: var(--primary-background);
|
||||
|
||||
span {
|
||||
min-width: 0;
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
span {
|
||||
min-width: 0;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const KanbanList = styled.div`
|
||||
gap: 8px;
|
||||
width: 180px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
background: var(--secondary-background);
|
||||
const KanbanList = styled.div<{ last: boolean }>`
|
||||
${(props) =>
|
||||
!props.last &&
|
||||
css`
|
||||
padding-inline-end: 4px;
|
||||
`}
|
||||
|
||||
> [data-rbd-droppable-id] {
|
||||
min-height: 24px;
|
||||
> .inner {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 2px;
|
||||
flex-direction: column;
|
||||
background: var(--secondary-background);
|
||||
|
||||
> [data-rbd-droppable-id] {
|
||||
min-height: 24px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -71,13 +86,13 @@ const KanbanListTitle = styled.div`
|
|||
`;
|
||||
|
||||
const KanbanBoard = styled.div`
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const FullSize = styled.div`
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
|
||||
> * {
|
||||
height: 100%;
|
||||
|
|
@ -85,191 +100,238 @@ const FullSize = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
server: Server;
|
||||
}
|
||||
|
||||
export const Categories = observer(({ server }: Props) => {
|
||||
const [status, setStatus] = useState<EditStatus>("saved");
|
||||
const [categories, setCategories] = useState<Category[]>(
|
||||
server.categories ?? [],
|
||||
);
|
||||
|
||||
useAutosave(
|
||||
async () => {
|
||||
setStatus("saving");
|
||||
await server.edit({ categories });
|
||||
setStatus("saved");
|
||||
},
|
||||
categories,
|
||||
server.categories,
|
||||
() => setStatus("editing"),
|
||||
);
|
||||
|
||||
return (
|
||||
<DragDropContext
|
||||
onDragEnd={(target) => {
|
||||
const { destination, source, draggableId, type } = target;
|
||||
<>
|
||||
<Header>
|
||||
<h1>
|
||||
<Text id={`app.settings.server_pages.categories.title`} />
|
||||
</h1>
|
||||
<SaveStatus status={status} />
|
||||
</Header>
|
||||
<DragDropContext
|
||||
onDragEnd={(target) => {
|
||||
const { destination, source, draggableId, type } = target;
|
||||
|
||||
if (
|
||||
!destination ||
|
||||
(destination.droppableId === source.droppableId &&
|
||||
destination.index === source.index)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
!destination ||
|
||||
(destination.droppableId === source.droppableId &&
|
||||
destination.index === source.index)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (type === "column") {
|
||||
// Remove from array.
|
||||
const cat = categories.find((x) => x.id === draggableId);
|
||||
const arr = categories.filter((x) => x.id !== draggableId);
|
||||
if (type === "column") {
|
||||
// Remove from array.
|
||||
const cat = categories.find(
|
||||
(x) => x.id === draggableId,
|
||||
);
|
||||
const arr = categories.filter(
|
||||
(x) => x.id !== draggableId,
|
||||
);
|
||||
|
||||
// Insert at new position.
|
||||
arr.splice(destination.index, 0, cat!);
|
||||
setCategories(arr);
|
||||
} else {
|
||||
setCategories(
|
||||
categories.map((category) => {
|
||||
if (category.id === destination.droppableId) {
|
||||
const channels = category.channels.filter(
|
||||
(x) => x !== draggableId,
|
||||
);
|
||||
|
||||
channels.splice(
|
||||
destination.index,
|
||||
0,
|
||||
draggableId,
|
||||
);
|
||||
|
||||
return {
|
||||
...category,
|
||||
channels,
|
||||
};
|
||||
} else if (category.id === source.droppableId) {
|
||||
return {
|
||||
...category,
|
||||
channels: category.channels.filter(
|
||||
// Insert at new position.
|
||||
arr.splice(destination.index, 0, cat!);
|
||||
setCategories(arr);
|
||||
} else {
|
||||
setCategories(
|
||||
categories.map((category) => {
|
||||
if (category.id === destination.droppableId) {
|
||||
const channels = category.channels.filter(
|
||||
(x) => x !== draggableId,
|
||||
),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
return category;
|
||||
}),
|
||||
);
|
||||
}
|
||||
}}>
|
||||
<FullSize>
|
||||
<Droppable
|
||||
droppableId="categories"
|
||||
direction="horizontal"
|
||||
type="column">
|
||||
{(provided) =>
|
||||
(
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}>
|
||||
<KanbanBoard>
|
||||
{categories.map((category, index) => (
|
||||
<Draggable
|
||||
key={category.id}
|
||||
draggableId={category.id}
|
||||
index={index}>
|
||||
{(provided) =>
|
||||
(
|
||||
<div
|
||||
{...(provided.draggableProps as any)}
|
||||
ref={provided.innerRef}>
|
||||
<KanbanList
|
||||
key={category.id}>
|
||||
<KanbanListTitle
|
||||
{...(provided.dragHandleProps as any)}>
|
||||
<span>
|
||||
{
|
||||
category.title
|
||||
}
|
||||
</span>
|
||||
</KanbanListTitle>
|
||||
<Droppable
|
||||
droppableId={
|
||||
category.id
|
||||
channels.splice(
|
||||
destination.index,
|
||||
0,
|
||||
draggableId,
|
||||
);
|
||||
|
||||
return {
|
||||
...category,
|
||||
channels,
|
||||
};
|
||||
} else if (category.id === source.droppableId) {
|
||||
return {
|
||||
...category,
|
||||
channels: category.channels.filter(
|
||||
(x) => x !== draggableId,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
return category;
|
||||
}),
|
||||
);
|
||||
}
|
||||
}}>
|
||||
<FullSize>
|
||||
<Droppable
|
||||
droppableId="categories"
|
||||
direction="horizontal"
|
||||
type="column">
|
||||
{(provided) =>
|
||||
(
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}>
|
||||
<KanbanBoard>
|
||||
{categories.map((category, index) => (
|
||||
<Draggable
|
||||
key={category.id}
|
||||
draggableId={category.id}
|
||||
index={index}>
|
||||
{(provided) =>
|
||||
(
|
||||
<div
|
||||
{...(provided.draggableProps as any)}
|
||||
ref={
|
||||
provided.innerRef
|
||||
}>
|
||||
<KanbanList
|
||||
last={
|
||||
index ===
|
||||
categories.length -
|
||||
1
|
||||
}
|
||||
key={
|
||||
category.id
|
||||
}>
|
||||
{(provided) =>
|
||||
(
|
||||
<div
|
||||
ref={
|
||||
provided.innerRef
|
||||
}
|
||||
{...provided.droppableProps}>
|
||||
{category.channels.map(
|
||||
(
|
||||
x,
|
||||
index,
|
||||
) => {
|
||||
const channel =
|
||||
server.client.channels.get(
|
||||
x,
|
||||
);
|
||||
if (
|
||||
!channel
|
||||
)
|
||||
return null;
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={
|
||||
x
|
||||
}
|
||||
draggableId={
|
||||
x
|
||||
}
|
||||
index={
|
||||
index
|
||||
}>
|
||||
{(
|
||||
provided,
|
||||
) =>
|
||||
(
|
||||
<div
|
||||
{...(provided.draggableProps as any)}
|
||||
{...provided.dragHandleProps}
|
||||
ref={
|
||||
provided.innerRef
|
||||
}>
|
||||
<KanbanEntry>
|
||||
<ChannelIcon
|
||||
target={
|
||||
channel
|
||||
}
|
||||
size={
|
||||
24
|
||||
}
|
||||
/>
|
||||
<span>
|
||||
{
|
||||
channel.name
|
||||
}
|
||||
</span>
|
||||
</KanbanEntry>
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Draggable>
|
||||
);
|
||||
},
|
||||
)}
|
||||
<div class="inner">
|
||||
<KanbanListTitle
|
||||
{...(provided.dragHandleProps as any)}>
|
||||
<span>
|
||||
{
|
||||
provided.placeholder
|
||||
category.title
|
||||
}
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Droppable>
|
||||
</KanbanList>
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</KanbanBoard>
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Droppable>
|
||||
</FullSize>
|
||||
</DragDropContext>
|
||||
</span>
|
||||
</KanbanListTitle>
|
||||
<Droppable
|
||||
droppableId={
|
||||
category.id
|
||||
}
|
||||
key={
|
||||
category.id
|
||||
}>
|
||||
{(
|
||||
provided,
|
||||
) =>
|
||||
(
|
||||
<div
|
||||
ref={
|
||||
provided.innerRef
|
||||
}
|
||||
{...provided.droppableProps}>
|
||||
{category.channels.map(
|
||||
(
|
||||
x,
|
||||
index,
|
||||
) => {
|
||||
const channel =
|
||||
server.client.channels.get(
|
||||
x,
|
||||
);
|
||||
if (
|
||||
!channel
|
||||
)
|
||||
return null;
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={
|
||||
x
|
||||
}
|
||||
draggableId={
|
||||
x
|
||||
}
|
||||
index={
|
||||
index
|
||||
}>
|
||||
{(
|
||||
provided,
|
||||
) =>
|
||||
(
|
||||
<div
|
||||
{...(provided.draggableProps as any)}
|
||||
{...provided.dragHandleProps}
|
||||
ref={
|
||||
provided.innerRef
|
||||
}>
|
||||
<KanbanEntry>
|
||||
<div class="inner">
|
||||
<ChannelIcon
|
||||
target={
|
||||
channel
|
||||
}
|
||||
size={
|
||||
24
|
||||
}
|
||||
/>
|
||||
<span>
|
||||
{
|
||||
channel.name
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</KanbanEntry>
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Draggable>
|
||||
);
|
||||
},
|
||||
)}
|
||||
{
|
||||
provided.placeholder
|
||||
}
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Droppable>
|
||||
</div>
|
||||
</KanbanList>
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</KanbanBoard>
|
||||
</div>
|
||||
) as any
|
||||
}
|
||||
</Droppable>
|
||||
</FullSize>
|
||||
</DragDropContext>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue