forked from abner/for-legacy-web
Use tabWidth 4 without actual tabs.
This commit is contained in:
Paul
@@ -16,178 +16,178 @@ import ComboBox from "../../../components/ui/ComboBox";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
|
||||
interface Props {
|
||||
server: Servers.Server;
|
||||
server: Servers.Server;
|
||||
}
|
||||
|
||||
export function Overview({ server }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const client = useContext(AppContext);
|
||||
|
||||
const [name, setName] = useState(server.name);
|
||||
const [description, setDescription] = useState(server.description ?? "");
|
||||
const [systemMessages, setSystemMessages] = useState(
|
||||
server.system_messages,
|
||||
);
|
||||
const [name, setName] = useState(server.name);
|
||||
const [description, setDescription] = useState(server.description ?? "");
|
||||
const [systemMessages, setSystemMessages] = useState(
|
||||
server.system_messages,
|
||||
);
|
||||
|
||||
useEffect(() => setName(server.name), [server.name]);
|
||||
useEffect(
|
||||
() => setDescription(server.description ?? ""),
|
||||
[server.description],
|
||||
);
|
||||
useEffect(
|
||||
() => setSystemMessages(server.system_messages),
|
||||
[server.system_messages],
|
||||
);
|
||||
useEffect(() => setName(server.name), [server.name]);
|
||||
useEffect(
|
||||
() => setDescription(server.description ?? ""),
|
||||
[server.description],
|
||||
);
|
||||
useEffect(
|
||||
() => setSystemMessages(server.system_messages),
|
||||
[server.system_messages],
|
||||
);
|
||||
|
||||
const [changed, setChanged] = useState(false);
|
||||
function save() {
|
||||
let changes: Partial<
|
||||
Pick<Servers.Server, "name" | "description" | "system_messages">
|
||||
> = {};
|
||||
if (name !== server.name) changes.name = name;
|
||||
if (description !== server.description)
|
||||
changes.description = description;
|
||||
if (!isEqual(systemMessages, server.system_messages))
|
||||
changes.system_messages = systemMessages;
|
||||
const [changed, setChanged] = useState(false);
|
||||
function save() {
|
||||
let changes: Partial<
|
||||
Pick<Servers.Server, "name" | "description" | "system_messages">
|
||||
> = {};
|
||||
if (name !== server.name) changes.name = name;
|
||||
if (description !== server.description)
|
||||
changes.description = description;
|
||||
if (!isEqual(systemMessages, server.system_messages))
|
||||
changes.system_messages = systemMessages;
|
||||
|
||||
client.servers.edit(server._id, changes);
|
||||
setChanged(false);
|
||||
}
|
||||
client.servers.edit(server._id, changes);
|
||||
setChanged(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.overview}>
|
||||
<div className={styles.row}>
|
||||
<FileUploader
|
||||
width={80}
|
||||
height={80}
|
||||
style="icon"
|
||||
fileType="icons"
|
||||
behaviour="upload"
|
||||
maxFileSize={2_500_000}
|
||||
onUpload={(icon) =>
|
||||
client.servers.edit(server._id, { icon })
|
||||
}
|
||||
previewURL={client.servers.getIconURL(
|
||||
server._id,
|
||||
{ max_side: 256 },
|
||||
true,
|
||||
)}
|
||||
remove={() =>
|
||||
client.servers.edit(server._id, { remove: "Icon" })
|
||||
}
|
||||
/>
|
||||
<div className={styles.name}>
|
||||
<h3>
|
||||
<Text id="app.main.servers.name" />
|
||||
</h3>
|
||||
<InputBox
|
||||
contrast
|
||||
value={name}
|
||||
maxLength={32}
|
||||
onChange={(e) => {
|
||||
setName(e.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className={styles.overview}>
|
||||
<div className={styles.row}>
|
||||
<FileUploader
|
||||
width={80}
|
||||
height={80}
|
||||
style="icon"
|
||||
fileType="icons"
|
||||
behaviour="upload"
|
||||
maxFileSize={2_500_000}
|
||||
onUpload={(icon) =>
|
||||
client.servers.edit(server._id, { icon })
|
||||
}
|
||||
previewURL={client.servers.getIconURL(
|
||||
server._id,
|
||||
{ max_side: 256 },
|
||||
true,
|
||||
)}
|
||||
remove={() =>
|
||||
client.servers.edit(server._id, { remove: "Icon" })
|
||||
}
|
||||
/>
|
||||
<div className={styles.name}>
|
||||
<h3>
|
||||
<Text id="app.main.servers.name" />
|
||||
</h3>
|
||||
<InputBox
|
||||
contrast
|
||||
value={name}
|
||||
maxLength={32}
|
||||
onChange={(e) => {
|
||||
setName(e.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>
|
||||
<Text id="app.main.servers.description" />
|
||||
</h3>
|
||||
<TextAreaAutoSize
|
||||
maxRows={10}
|
||||
minHeight={60}
|
||||
maxLength={1024}
|
||||
value={description}
|
||||
placeholder={"Add a topic..."}
|
||||
onChange={(ev) => {
|
||||
setDescription(ev.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
<h3>
|
||||
<Text id="app.main.servers.description" />
|
||||
</h3>
|
||||
<TextAreaAutoSize
|
||||
maxRows={10}
|
||||
minHeight={60}
|
||||
maxLength={1024}
|
||||
value={description}
|
||||
placeholder={"Add a topic..."}
|
||||
onChange={(ev) => {
|
||||
setDescription(ev.currentTarget.value);
|
||||
if (!changed) setChanged(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<h3>
|
||||
<Text id="app.main.servers.custom_banner" />
|
||||
</h3>
|
||||
<FileUploader
|
||||
height={160}
|
||||
style="banner"
|
||||
fileType="banners"
|
||||
behaviour="upload"
|
||||
maxFileSize={6_000_000}
|
||||
onUpload={(banner) =>
|
||||
client.servers.edit(server._id, { banner })
|
||||
}
|
||||
previewURL={client.servers.getBannerURL(
|
||||
server._id,
|
||||
{ width: 1000 },
|
||||
true,
|
||||
)}
|
||||
remove={() =>
|
||||
client.servers.edit(server._id, { remove: "Banner" })
|
||||
}
|
||||
/>
|
||||
<h3>
|
||||
<Text id="app.main.servers.custom_banner" />
|
||||
</h3>
|
||||
<FileUploader
|
||||
height={160}
|
||||
style="banner"
|
||||
fileType="banners"
|
||||
behaviour="upload"
|
||||
maxFileSize={6_000_000}
|
||||
onUpload={(banner) =>
|
||||
client.servers.edit(server._id, { banner })
|
||||
}
|
||||
previewURL={client.servers.getBannerURL(
|
||||
server._id,
|
||||
{ width: 1000 },
|
||||
true,
|
||||
)}
|
||||
remove={() =>
|
||||
client.servers.edit(server._id, { remove: "Banner" })
|
||||
}
|
||||
/>
|
||||
|
||||
<h3>
|
||||
<Text id="app.settings.server_pages.overview.system_messages" />
|
||||
</h3>
|
||||
{[
|
||||
["User Joined", "user_joined"],
|
||||
["User Left", "user_left"],
|
||||
["User Kicked", "user_kicked"],
|
||||
["User Banned", "user_banned"],
|
||||
].map(([i18n, key]) => (
|
||||
// ! FIXME: temporary code just so we can expose the options
|
||||
<p
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<span style={{ flexShrink: "0", flex: `25%` }}>{i18n}</span>
|
||||
<ComboBox
|
||||
value={
|
||||
systemMessages?.[
|
||||
key as keyof typeof systemMessages
|
||||
] ?? "disabled"
|
||||
}
|
||||
onChange={(e) => {
|
||||
if (!changed) setChanged(true);
|
||||
const v = e.currentTarget.value;
|
||||
if (v === "disabled") {
|
||||
const {
|
||||
[key as keyof typeof systemMessages]: _,
|
||||
...other
|
||||
} = systemMessages;
|
||||
setSystemMessages(other);
|
||||
} else {
|
||||
setSystemMessages({
|
||||
...systemMessages,
|
||||
[key]: v,
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<option value="disabled">
|
||||
<Text id="general.disabled" />
|
||||
</option>
|
||||
{server.channels.map((id) => {
|
||||
const channel = client.channels.get(id);
|
||||
if (!channel) return null;
|
||||
return (
|
||||
<option value={id}>
|
||||
{getChannelName(client, channel, true)}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</ComboBox>
|
||||
</p>
|
||||
))}
|
||||
<h3>
|
||||
<Text id="app.settings.server_pages.overview.system_messages" />
|
||||
</h3>
|
||||
{[
|
||||
["User Joined", "user_joined"],
|
||||
["User Left", "user_left"],
|
||||
["User Kicked", "user_kicked"],
|
||||
["User Banned", "user_banned"],
|
||||
].map(([i18n, key]) => (
|
||||
// ! FIXME: temporary code just so we can expose the options
|
||||
<p
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<span style={{ flexShrink: "0", flex: `25%` }}>{i18n}</span>
|
||||
<ComboBox
|
||||
value={
|
||||
systemMessages?.[
|
||||
key as keyof typeof systemMessages
|
||||
] ?? "disabled"
|
||||
}
|
||||
onChange={(e) => {
|
||||
if (!changed) setChanged(true);
|
||||
const v = e.currentTarget.value;
|
||||
if (v === "disabled") {
|
||||
const {
|
||||
[key as keyof typeof systemMessages]: _,
|
||||
...other
|
||||
} = systemMessages;
|
||||
setSystemMessages(other);
|
||||
} else {
|
||||
setSystemMessages({
|
||||
...systemMessages,
|
||||
[key]: v,
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<option value="disabled">
|
||||
<Text id="general.disabled" />
|
||||
</option>
|
||||
{server.channels.map((id) => {
|
||||
const channel = client.channels.get(id);
|
||||
if (!channel) return null;
|
||||
return (
|
||||
<option value={id}>
|
||||
{getChannelName(client, channel, true)}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</ComboBox>
|
||||
</p>
|
||||
))}
|
||||
|
||||
<p>
|
||||
<Button onClick={save} contrast disabled={!changed}>
|
||||
<Text id="app.special.modals.actions.save" />
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
<p>
|
||||
<Button onClick={save} contrast disabled={!changed}>
|
||||
<Text id="app.special.modals.actions.save" />
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user