+1 -1

app/dashboard/[guildId]/nsfw-image-scanning/page.tsx

reviewed

··· 18 18 const guild = guildStore((g) => g); 19 19 const params = useParams(); 20 20 21 21 - const url = `/guilds/${params.guildId}/modules/nsfw-image-scanning`; 21 21 + const url = `/guilds/${params.guildId}/modules/nsfw-image-scanning` as const; 22 22 23 23 const [data, setData] = useState<ApiV1GuildsModulesNsfwModerationGetResponse | null>(null); 24 24

+87 -115

app/dashboard/[guildId]/starboard/page.tsx

reviewed

··· 1 1 - 2 1 "use client"; 3 2 import Image from "next/image"; 4 3 import { useParams } from "next/navigation"; 5 5 - import { useEffect, useState } from "react"; 4 4 + import { useState } from "react"; 6 5 import { HiViewGridAdd } from "react-icons/hi"; 6 6 + import { useQuery } from "react-query"; 7 7 8 8 import { guildStore } from "@/common/guilds"; 9 9 import Highlight from "@/components/discord/markdown"; ··· 14 14 import SelectMenu from "@/components/inputs/SelectMenu"; 15 15 import Switch from "@/components/inputs/Switch"; 16 16 import { ScreenMessage } from "@/components/screen-message"; 17 17 - import { ApiV1GuildsModulesStarboardGetResponse, RouteErrorResponse } from "@/typings"; 17 17 + import { getData } from "@/lib/api"; 18 18 + import { ApiV1GuildsModulesStarboardGetResponse } from "@/typings"; 18 19 19 20 export default function Home() { 20 21 const guild = guildStore((g) => g); 22 22 + const params = useParams(); 21 23 22 22 - const [error, setError] = useState<string>(); 23 23 - const [starboard, setStarboard] = useState<ApiV1GuildsModulesStarboardGetResponse>(); 24 24 - const [is, update] = useState<boolean>(); 24 24 + const url = `/guilds/${params.guildId}/modules/starboard` as const; 25 25 + 26 26 + const [data, setData] = useState<ApiV1GuildsModulesStarboardGetResponse | null>(null); 27 27 + 28 28 + const { status } = useQuery( 29 29 + ["guilds", params.guildId, "modules", "starboard"], 30 30 + () => getData<ApiV1GuildsModulesStarboardGetResponse>(url), 31 31 + { 32 32 + enabled: !!params.guildId, 33 33 + onSuccess: (d) => setData(d) 34 34 + } 35 35 + ); 36 36 + 37 37 + const handleSwitchToggle = (enabled: boolean) => { 38 38 + if (!data) return; 39 39 + const updatedLocalData = { ...data, enabled }; 40 40 + setData(updatedLocalData); 41 41 + }; 25 42 26 43 const [example, setExample] = useState({ 27 44 avatar: "https://cdn.waya.one/r/823554a71e92ca6192ab500d9b597a7f.png", ··· 30 47 emoji: "" 31 48 }); 32 49 33 33 - const params = useParams(); 34 34 - 35 35 - useEffect(() => { 36 36 - handleUserStyle(starboard?.style || 0); 37 37 - 38 38 - fetch(`${process.env.NEXT_PUBLIC_API}/guilds/${params.guildId}/modules/starboard`, { 39 39 - headers: { 40 40 - authorization: localStorage.getItem("token") as string 41 41 - } 42 42 - }) 43 43 - .then(async (res) => { 44 44 - const response = await res.json() as ApiV1GuildsModulesStarboardGetResponse; 45 45 - if (!response) return; 46 46 - 47 47 - switch (res.status) { 48 48 - case 200: { 49 49 - setStarboard(response); 50 50 - 51 51 - handleUserStyle(response.style); 52 52 - setExample({ 53 53 - ...example, 54 54 - emoji: response.emoji 55 55 - }); 56 56 - 57 57 - break; 58 58 - } 59 59 - default: { 60 60 - setStarboard(undefined); 61 61 - setError((response as unknown as RouteErrorResponse).message); 62 62 - break; 63 63 - } 64 64 - } 65 65 - 66 66 - }) 67 67 - .catch(() => { 68 68 - setError("Error while fetching starboard data"); 69 69 - }); 70 70 - 71 71 - }, []); 72 72 - 73 50 const handleUserStyle = (value: number) => { 74 51 switch (value) { 75 52 case 0: ··· 111 88 } 112 89 }; 113 90 114 114 - if (error) { 115 115 - return <> 91 91 + if (status === "loading") return <></>; 92 92 + if (!data || status === "error") { 93 93 + return ( 116 94 <ScreenMessage 117 95 title="Something went wrong.." 118 118 - description={error} 96 96 + description="We couldn't load the data for this page." 119 97 href={`/dashboard/${guild?.id}`} 120 98 button="Go back to overview" 121 99 icon={<HiViewGridAdd />} 122 100 /> 123 123 - </>; 101 101 + ); 124 102 } 125 125 - 126 126 - if (!starboard) return <></>; 127 103 128 104 return ( 129 129 - <div> 105 105 + <> 130 106 131 107 <Switch 132 132 - name="Starboard module enabled." 133 133 - url={`/guilds/${guild?.id}/modules/starboard`} 108 108 + name="Starboard module enabled" 109 109 + url={url} 134 110 dataName="enabled" 135 135 - defaultState={starboard?.enabled || false} 111 111 + defaultState={data.enabled || false} 136 112 disabled={false} 137 137 - onSave={(s) => { 138 138 - starboard.enabled = s; 139 139 - setStarboard(starboard); 140 140 - update(!is); 141 141 - }} 113 113 + onSave={handleSwitchToggle} 142 114 /> 143 115 144 116 <Switch 145 145 - name="Allow bots and webhooks." 146 146 - url={`/guilds/${guild?.id}/modules/starboard`} 117 117 + name="Allow bots and webhooks" 118 118 + url={url} 147 119 dataName="allowBots" 148 148 - defaultState={starboard?.allowBots || false} 149 149 - disabled={!starboard.enabled} 120 120 + defaultState={data.allowBots || false} 121 121 + disabled={!data.enabled} 150 122 /> 151 123 152 124 <Switch 153 153 - name="Allow NSFW channels." 154 154 - url={`/guilds/${guild?.id}/modules/starboard`} 125 125 + name="Allow NSFW channels" 126 126 + url={url} 155 127 dataName="allowNSFW" 156 156 - defaultState={starboard?.allowNSFW || false} 157 157 - disabled={!starboard.enabled} 128 128 + defaultState={data.allowNSFW || false} 129 129 + disabled={!data.enabled} 158 130 /> 159 131 160 132 <Switch 161 161 - name="Allow message edits." 162 162 - description="If a message is being edited, update it in the starboard." 163 163 - url={`/guilds/${guild?.id}/modules/starboard`} 133 133 + name="Allow message edits" 134 134 + description="If a message is being edited, update it in the data." 135 135 + url={url} 164 136 dataName="allowEdits" 165 165 - defaultState={starboard?.allowEdits || false} 166 166 - disabled={!starboard.enabled} 137 137 + defaultState={data.allowEdits || false} 138 138 + disabled={!data.enabled} 167 139 /> 168 140 169 141 <Switch 170 170 - name="Allow author reaction." 171 171 - description="If a the message author can star their own messages." 172 172 - url={`/guilds/${guild?.id}/modules/starboard`} 142 142 + name="Allow author reaction" 143 143 + description="Lets the message author star their own messages." 144 144 + url={url} 173 145 dataName="allowSelfReact" 174 174 - defaultState={starboard?.allowSelfReact || false} 175 175 - disabled={!starboard.enabled} 146 146 + defaultState={data.allowSelfReact || false} 147 147 + disabled={!data.enabled} 176 148 /> 177 149 178 150 <Switch 179 179 - name="Display stared message reference." 180 180 - description="Display the message the starboard message repleid to." 181 181 - url={`/guilds/${guild?.id}/modules/starboard`} 151 151 + name="Display stared message reference" 152 152 + description="Repost the message reply in the data." 153 153 + url={url} 182 154 dataName="displayReference" 183 183 - defaultState={starboard?.displayReference || false} 184 184 - disabled={!starboard.enabled} 155 155 + defaultState={data.displayReference || false} 156 156 + disabled={!data.enabled} 185 157 /> 186 158 187 159 <Switch 188 188 - name="Delete message on reaction loose." 160 160 + name="Delete message from starboard upon losing reactions" 189 161 description="If a message in the starboard looses the required reactions, it gets deleted." 190 190 - url={`/guilds/${guild?.id}/modules/starboard`} 162 162 + url={url} 191 163 dataName="delete" 192 192 - defaultState={starboard?.delete || false} 193 193 - disabled={!starboard.enabled} 164 164 + defaultState={data.delete || false} 165 165 + disabled={!data.enabled} 194 166 /> 195 167 196 168 <NumberInput 197 197 - name="How many reactions should be required." 198 198 - description="Amount of reactions with the emote are needed to get a message into the starboard." 199 199 - url={`/guilds/${guild?.id}/modules/starboard`} 169 169 + name="Number of reactions required" 170 170 + description="Sets the number of reactions needed to get a message onto the data." 171 171 + url={url} 200 172 dataName="requiredEmojis" 201 201 - defaultState={starboard?.requiredEmojis ?? 0} 202 202 - disabled={!starboard.enabled} 173 173 + defaultState={data.requiredEmojis ?? 0} 174 174 + disabled={!data.enabled} 203 175 min={1} 204 176 /> 205 177 206 178 <SelectMenu 207 179 name="Channel" 208 208 - url={`/guilds/${guild?.id}/modules/starboard`} 180 180 + url={url} 209 181 dataName="channelId" 210 182 items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => { return { name: `#${c.name}`, value: c.id, error: c.missingPermissions.join(", ") }; })} 211 183 description="Select the channel where the starboard messages should be send into." 212 212 - defaultState={starboard?.channelId} 213 213 - disabled={!starboard.enabled} 184 184 + defaultState={data.channelId} 185 185 + disabled={!data.enabled} 214 186 /> 215 187 216 188 <div className="lg:flex gap-3"> 217 189 <div className="lg:w-1/2"> 218 190 <SelectMenu 219 191 name="Emoji" 220 220 - url={`/guilds/${guild?.id}/modules/starboard`} 192 192 + url={url} 221 193 dataName="emoji" 222 194 items={[ 223 195 { icon: "⭐", name: "Star", value: "⭐" }, ··· 227 199 }) || [] 228 200 ]} 229 201 description="Select the emoji that needs to be reacted with." 230 230 - defaultState={starboard?.emoji} 202 202 + defaultState={data.emoji} 231 203 onSave={(options) => { 232 204 setExample({ 233 205 ...example, 234 206 emoji: options.value as string 235 207 }); 236 208 }} 237 237 - disabled={!starboard.enabled} 209 209 + disabled={!data.enabled} 238 210 /> 239 211 </div> 240 212 241 213 <div className="lg:w-1/2"> 242 214 <SelectMenu 243 243 - name="Profile Display Style" 244 244 - url={`/guilds/${guild?.id}/modules/starboard`} 215 215 + name="Profile display style" 216 216 + url={url} 245 217 dataName="style" 246 218 items={[ 247 219 { ··· 262 234 } 263 235 ]} 264 236 description="The style members profile gets displayed." 265 265 - defaultState={starboard?.style} 237 237 + defaultState={data.style} 266 238 onSave={(options) => handleUserStyle(options.value as number)} 267 267 - disabled={!starboard.enabled} 239 239 + disabled={!data.enabled} 268 240 /> 269 241 </div> 270 242 </div> ··· 272 244 <div className="lg:flex gap-3"> 273 245 <div className="lg:w-1/2"> 274 246 <MultiSelectMenu 275 275 - name="Blacklisted Roles" 276 276 - url={`/guilds/${guild?.id}/modules/starboard`} 247 247 + name="Blacklisted roles" 248 248 + url={url} 277 249 dataName="blacklistRoleIds" 278 250 items={guild?.roles?.sort((a, b) => b.position - a.position).map((r) => ({ name: `@${r.name}`, value: r.id, color: r.color }))} 279 279 - description="Select roles which should not be able to starboard." 280 280 - defaultState={starboard?.blacklistRoleIds || []} 251 251 + description="Select roles which should not be able to data." 252 252 + defaultState={data.blacklistRoleIds || []} 281 253 max={500} 282 282 - disabled={!starboard.enabled} 254 254 + disabled={!data.enabled} 283 255 /> 284 256 </div> 285 257 286 258 <div className="lg:w-1/2"> 287 259 <MultiSelectMenu 288 288 - name="Blacklisted Channels" 289 289 - url={`/guilds/${guild?.id}/modules/starboard`} 260 260 + name="Blacklisted channels" 261 261 + url={url} 290 262 dataName="blacklistChannelIds" 291 263 items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => { return { name: `#${c.name}`, value: c.id }; })} 292 292 - description="Select channels which should not be able to be in the starboard." 293 293 - defaultState={starboard?.blacklistChannelIds || []} 264 264 + description="Select channels which should not be able to be in the data." 265 265 + defaultState={data.blacklistChannelIds || []} 294 266 max={500} 295 295 - disabled={!starboard.enabled} 267 267 + disabled={!data.enabled} 296 268 /> 297 269 </div> 298 270 </div> ··· 317 289 text: example.username 318 290 }} 319 291 mode={"DARK"} 320 320 - color={starboard.embedColor} 292 292 + color={data.embedColor} 321 293 > 322 294 <div> I can imagine it now, a lunch break at Discord headquarters and a bunch of T&S staff talking to each other</div> 323 295 <div><strong>Staff 1:</strong> Hey did you get another ticket from that 2Lost4Discоrd guy?</div> ··· 333 305 </DiscordMessage> 334 306 </div> 335 307 336 336 - </div > 308 308 + </ > 337 309 ); 338 310 }

+2 -2

components/inputs/ImageUrlInput.tsx

reviewed

··· 102 102 disabled={disabled} 103 103 placeholder="Paste a direct image url..." 104 104 max={256} 105 105 - description={description} 105 105 + description={description + " At this time, only .PNG files are supported."} 106 106 /> 107 107 108 108 <div className="max-w-1/2 w-full"> ··· 117 117 <div className="font-medium">Enter a <span className="underline underline-red-400">valid</span> image url!</div> 118 118 <div className="text-xs"> 119 119 <div>Recommended resolution: 1024x256</div> 120 120 - <div>Recommended type: .jpg</div> 120 120 + <div>Recommended type: .png</div> 121 121 </div> 122 122 {/* eslint-disable-next-line @next/next/no-img-element */} 123 123 <img src={value} alt="" className="w-0 h-0" onLoad={() => setImagestate("SUCCESS")} />