Create ConfigRoleInput, ConfigChannelInput, and ConfigTimezoneOffsetI…

…nput
BirthdayyBot · Apr 9, 2024 · cdfaa4b · cdfaa4b
1 parent cd3a46a
commit cdfaa4b
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 21 deletions.
diff --git a/src/components/GuildConfig/ConfigInput.tsx b/src/components/GuildConfig/ConfigInput.tsx
@@ -1,18 +1,92 @@
-import { FC } from 'react';
+'use client';
+import { timezonesOffsets } from '@/types/config';
+import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui';
+import { APIChannel, APIRole } from 'discord-api-types/v10';
+import { useState } from 'react';
 
-interface ConfigInputProps {
-  configType: 'role' | 'channel' | 'string' | 'number';
-  children?: React.ReactNode;
+interface ConfigRoleInputProps {
+  configType: 'role';
+  guildId: string;
+  defaultRole: string;
+  roles: APIRole[];
 }
+interface ConfigChannelInputProps {
+  configType: 'channel';
+  guildId: string;
+  defaultChannel: string;
+  channels: APIChannel[];
+}
+
+interface ConfigTimezoneOffsetInputProps {
+  defaultTimezoneOffset: string;
+  guildId: string;
+}
+
+export function ConfigRoleInput({ roles, defaultRole, guildId }: ConfigRoleInputProps) {
+  const [selectedRoleId, setSelectedRoleId] = useState<string>(defaultRole);
+  const role = roles.find((role) => role.id === selectedRoleId);
 
-const ConfigInput: FC<ConfigInputProps> = ({ children, configType }) => {
   return (
-    <div className="ConfigInput">
-      <h3 className="font-heading text-3xl font-bold">ConfigInput</h3>
+    <div className="ConfigRoleInput">
+      <Select value={role?.id}>
+        <SelectTrigger>
+          <SelectValue placeholder={role?.name ?? 'Select a role'} />
+        </SelectTrigger>
+        <SelectContent>
+          {roles.map((r) => {
+            if (r.id === guildId) return null;
+            return (
+              <SelectItem key={r.id} value={r.id} onSelect={() => setSelectedRoleId(r.id)}>
+                {r.name}
+              </SelectItem>
+            );
+          })}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+export function ConfigChannelInput({ channels, defaultChannel }: ConfigChannelInputProps) {
+  const [selectedChannelId, setSelectedChannelId] = useState<string>(defaultChannel);
+  const channel = channels.find((channel) => channel.id === selectedChannelId);
 
-      {children}
+  return (
+    <div className="ConfigRoleInput">
+      <Select value={channel?.id}>
+        <SelectTrigger>
+          <SelectValue placeholder={channel?.name ?? 'Select a channel'} />
+        </SelectTrigger>
+        <SelectContent>
+          {channels.map((c) => (
+            <SelectItem key={c.id} value={c.id} onSelect={() => setSelectedChannelId(c.id)}>
+              {c.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
-};
+}
+export function ConfigTimezoneOffsetInput({ defaultTimezoneOffset }: ConfigTimezoneOffsetInputProps) {
+  const [selectedTimezone, setSelectedTimezone] = useState<string>(defaultTimezoneOffset);
+
+  return (
+    <div className="ConfigTimezoneOffsetInput">
+      <Input type="number" defaultValue={defaultTimezoneOffset} onChange={(e) => setSelectedTimezone(e.target.value)} />
 
-export default ConfigInput;
+      <Select value={selectedTimezone}>
+        <SelectTrigger>
+          <SelectValue placeholder={defaultTimezoneOffset ?? 'Select a timezone offset'} />
+        </SelectTrigger>
+        <SelectContent>
+          {timezonesOffsets.map((timezone) => (
+            <SelectItem key={timezone} value={timezone}>
+              {timezone}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
diff --git a/src/components/GuildConfig/GuildConfig.tsx b/src/components/GuildConfig/GuildConfig.tsx
@@ -1,23 +1,29 @@
-'use client';
-import { TimezoneZodSchema } from '@/schema/config';
-import AutoForm from '@/ui/auto-form';
+import { GuildChannelInfoMock, GuildInfoMock } from '@/mock/guild.mock';
 import { H3 } from '@/ui/typography';
-import { FC } from 'react';
+import { ConfigChannelInput, ConfigRoleInput, ConfigTimezoneOffsetInput } from './ConfigInput';
 
 interface GuildConfigComponentProps {
   guildId: string;
   children?: React.ReactNode;
 }
 
-const GuildConfigComponent: FC<GuildConfigComponentProps> = ({ children, guildId }) => {
+export default function GuildConfigComponent({ children, guildId }: GuildConfigComponentProps) {
   return (
     <div className="GuildConfigComponent">
       <H3>GuildConfigComponent</H3>
-      <AutoForm formSchema={TimezoneZodSchema}>{/* <AutoFormSubmit>Send now</AutoFormSubmit> */}</AutoForm>
-
-      {children}
+      <ConfigRoleInput
+        configType="role"
+        guildId="980559116076470272"
+        roles={GuildInfoMock.roles}
+        defaultRole="980560581306232844"
+      />
+      <ConfigChannelInput
+        configType="channel"
+        guildId="980559116076470272"
+        channels={GuildChannelInfoMock}
+        defaultChannel="1080819909317099541"
+      />
+      <ConfigTimezoneOffsetInput defaultTimezoneOffset={'0'} guildId="980559116076470272" />
     </div>
   );
-};
-
-export default GuildConfigComponent;
+}
diff --git a/src/lib/mock/guild.mock.ts b/src/lib/mock/guild.mock.ts
@@ -336,3 +336,62 @@ export const GuildInfoMock: APIGuild = {
 	system_channel_flags: GuildSystemChannelFlags.SuppressGuildReminderNotifications,
 	description: null,
 };
+
+export const GuildChannelInfoMock = [
+	{
+		id: '1086294199625846875',
+		name: 'general',
+		type: 0,
+		nsfw: false,
+		permissions: '268435456',
+		position: 0,
+	},
+	{
+		id: '1086294199625846835',
+		name: 'random',
+		type: 0,
+		nsfw: false,
+		permissions: '268435456',
+		position: 0,
+	},
+	{
+		id: '1086294199625845875',
+		name: 'announcements',
+		type: 0,
+		nsfw: false,
+		permissions: '268435456',
+		position: 0,
+	},
+	{
+		id: '1086294199625846865',
+		name: 'bot-commands',
+		type: 0,
+		nsfw: false,
+		permissions: '268435456',
+		position: 0,
+	},
+	{
+		id: '1086294199225846875',
+		name: 'bot-commands-2',
+		type: 0,
+		nsfw: false,
+		permissions: '268435456',
+		position: 0,
+	},
+	{
+		id: '1086294199665846875',
+		name: 'bot-commands-3',
+		type: 0,
+		nsfw: false,
+		permissions: '268435456',
+		position: 0,
+	},
+	{
+		id: '1086214199625846875',
+		name: 'bot-commands-4',
+		type: 0,
+		nsfw: false,
+		permissions: '268435456',
+		position: 0,
+	},
+];
diff --git a/src/lib/types/config.ts b/src/lib/types/config.ts
@@ -0,0 +1,26 @@
+export const timezonesOffsets = [
+	'-11',
+	'-10',
+	'-9',
+	'-8',
+	'-7',
+	'-6',
+	'-5',
+	'-4',
+	'-3',
+	'-2',
+	'-1',
+	'0',
+	'1',
+	'2',
+	'3',
+	'4',
+	'5',
+	'6',
+	'7',
+	'8',
+	'9',
+	'10',
+	'11',
+	'12',
+];