fuma-nama / discord-bot-dashboard-next Goto Github PK
View Code? Open in Web Editor NEWThe Most Powerful Discord bot Dashboard Template
Home Page: https://demo-bot.vercel.app
License: MIT License
The Most Powerful Discord bot Dashboard Template
Home Page: https://demo-bot.vercel.app
License: MIT License
Issue Summary:
I'm encountering an issue with my custom feature. The problem arises when I try to configure the feature, as it gets stuck on "Loading."
Code Files:
Description:
I've created a custom feature called "Fruit Stocks" for my bot. The feature itself works well, including the enable feature button. However, when attempting to configure the feature, it gets stuck on "Loading."
config > features.tsx
import { Icon } from '@chakra-ui/react';
import { FaAppleAlt } from 'react-icons/fa';
import { FeaturesConfig } from './types';
import { provider } from '@/config/translations/provider';
import { createI18n } from '@/utils/i18n';
import { useFruitStocksFeature } from "./use-features/FruitStocksFeature";
/**
* Support i18n (Localization)
*/
const { T } = createI18n(provider, {
en: {
fruitStocks: "Fruit Stocks",
'fruitStocks description': 'Blox Fruit\'s stock notifier',
},
});
/**
* Define information for each features
*
* There is an example:
*/
export const features: FeaturesConfig = {
fruitStocks: {
name: <T text="fruitStocks" />,
description: <T text="fruitStocks description" />,
icon: <Icon as={FaAppleAlt} />,
useRender: useFruitStocksFeature,
}
};
config > types
/***
* Custom types that should be configured by developer
***/
import { z } from 'zod';
import { GuildInfo } from './types';
export type CustomGuildInfo = GuildInfo & {};
/**
* Define feature ids and it's option types
*/
export type CustomFeatures = {
fruitStocks: FruitStocksFeature;
};
/**
* Define feature ids and it's option types
*/
export type FruitStocksFeature = {
channel?: string;
};
config > use-features
Note: use-feature
is a folder that I made to store all of my custom features.
import { SimpleGrid } from '@chakra-ui/layout';
import { TextAreaForm } from '@/components/forms/TextAreaForm';
import { UseFormRender, FruitStocksFeature } from '@/config/types';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { ColorPickerForm, SmallColorPickerForm } from '@/components/forms/ColorPicker';
import { DatePickerForm } from '@/components/forms/DatePicker';
import { FilePickerForm } from '@/components/forms/FilePicker';
import { SwitchFieldForm } from '@/components/forms/SwitchField';
import { ChannelSelectForm } from '@/components/forms/ChannelSelect';
const schema = z.object({
channel: z.string(),
danger: z.boolean(),
});
type Input = z.infer<typeof schema>;
export const useFruitStocksFeature: UseFormRender<FruitStocksFeature> = (data, onSubmit) => {
const { register, reset, handleSubmit, formState, control } = useForm<Input>({
resolver: zodResolver(schema),
shouldUnregister: false,
defaultValues: {
channel: data.channel,
danger: false,
},
});
console.log("HELLO FRUIT STOCKS")
return {
component: (
<SimpleGrid columns={{ base: 1, lg: 2 }} gap={3}>
<ChannelSelectForm
control={{
label: 'Channel',
description: 'Where to send the welcome message',
}}
controller={{ control, name: 'channel' }}
/>
<SwitchFieldForm
control={{ label: 'Turn on', description: 'Enable something' }}
controller={{
control,
name: 'danger',
}}
/>
</SimpleGrid>
),
onSubmit: handleSubmit(async (e) => {
const data = await onSubmit(
JSON.stringify({
channel: e.channel,
})
);
reset(data);
}),
canSave: formState.isDirty,
reset: () => reset(control._defaultValues),
};
};
Note: This code is only the "listening" to a certain route and I have the backend server working. It is using express.js
and is running alongside with my actual bot.
module.exports = (client, server, utils) => {
server.get("/guilds/:id/features/fruitStocks", async (req, res) => {
try {
console.log("trying to get")
const guild = client.guilds.cache.get(req.params.id);
const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })
if (!schema) {
return res.status(404).json({ error: "Guild schema not found" });
}
const fruitStocks = schema.modules.fruitStocks;
console.log("Im here")
return { channel: "1180089709196738561" }
} catch (error) {
console.error(error);
return res.status(500).json({ error: `Internal server error. ${error}` })
}
})
server.post("/guilds/:id/features/fruitStocks", async (req, res) => {
try {
console.log("trying to post")
await utils.checkPermission(req.session, req.params.id);
const guild = client.guilds.cache.get(req.params.id);
const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })
if (!schema) {
return res.status(404).json({ error: "Guild schema not found" });
}
schema.modules.fruitStocks.enabled = true
await schema.save()
return "Success"
} catch (error) {
console.error(error);
return res.status(500).json({ error: `Internal server error. ${error}` })
}
})
server.delete("/guilds/:id/features/fruitStocks", async (req, res) => {
try {
console.log("trying to delete")
await utils.checkPermission(req.session, req.params.id);
const guild = client.guilds.cache.get(req.params.id);
const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })
if (!schema) {
return res.status(404).json({ error: "Guild schema not found" });
}
schema.modules.fruitStocks.enabled = false
await schema.save()
return "Success"
} catch (error) {
console.error(error);
return res.status(500).json({ error: `Internal server error. ${error}` })
}
})
server.patch("/guilds/:id/features/fruitStocks", async (req, res) => {
try {
console.log("trying to patch")
await utils.checkPermission(req.session, req.params.id);
const guild = client.guilds.cache.get(req.params.id);
const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })
if (!schema) {
return res.status(404).json({ error: "Guild schema not found" });
}
} catch (error) {
console.error(error);
return res.status(500).json({ error: `Internal server error. ${error}` })
}
})
}
I would appreciate any guidance or assistance in resolving this issue. If more code files or information are needed, please let me know.
Thank you for your help!
Hi, trying to run this on a cpanel server, and trying to proxy the connections to node. The webpage loads fine, however i get alot of errors saying
websocket.js:60 WebSocket connection to 'wss://*****/_next/webpack-hmr' failed:
any suggestions?
thanks
Is your feature request related to a problem? Please describe.
A basic example how to make a "feature" using prisma
Describe the solution you'd like
Where to edit files, what to add
Describe alternatives you've considered
I have attempted, and basic knowledge of node/next. I get the page to display but i am struggling to add any functions. I want to read from another DB(which I've managed to add) but I am struggling to understand how to make the pages read etc...
Hey, I wanted to ask if I can use your design on my own dashboard, because I use js and react instead of ts and next and I don't understand some things like your queries, so I'm reprogramming it for myself and just wanted to know if I need a new design xD
Describe the bug
I know this sounds odd.
I haven't had this issue until now.
I created on welcomer-message an embed, all working so far.
Saw backend was no longer getting the "save" call, meaning the "save" button was not sending the request, checked with both:
Network tab
@Patch('/features/welcome-message')
async updateFeature(
@Req() req: AuthRequest,
@Param('guild') guild: string,
@Body() body: Partial<WelcomeMessage>,
) {
console.log('got a patch')
await this.bot.checkPermissions(req.session, guild);
const updated = await this.prisma.welcomeMessage.update({
where: {
id: guild,
},
data: {
...body,
id: undefined,
},
});
return updated;
}
To Reproduce
Steps to reproduce the behavior:
Last things I remember I did:
Tried converting to use mysql instead of prisma
Saw the error
CTRL+Zed everything to revert.
Save button still not sending requests.
Expected behavior
Saving the data
Screenshots
Video recording:
https://streamable.com/ix5rl1
Device:
Additional context
The video says it all.
When i try to invite the bot in the server it return me that error
33 | return (await response.json()) as AccessToken;
34 | } else {
35 | throw new Error('Failed to exchange token');
| ^
36 | }
37 | }
38 |
hell i am using linux vps i have configured the backend server but how to run the server
Hello, can I use this dashboard with my custom additions and with MySQL? However, is it possible to use it without giving credit?
I've been working on this for 2-3 hours at least and i can not get it working for the life of me, If there is any tutorial or anything i can follow that will be very nice
Describe the bug
it keeps giving me this error when i sign in : {"client_id": ["Value "" is not snowflake."]}
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Device:
Additional context
Add any other context about the problem here.
Hello. I don't quite understand where or how I can add states in the component forms that I will be using, for example isRequired
, etc.
<SwitchFieldForm
control={{
label: 'Pinging',
description: 'Toggle the role pinging when a new fruit stock has arrived'
}}
controller={{
control,
name: 'ping_toggle',
}}
/>
Again, using the provided code above, how or where should I add the states that I want to use in the form? Thank you!
I don't know how to use Backend Development. Is there any support or documentation to help me?
Hi there!
I followed the tutorial and have gotten stuck on the backend server part of it. The official example link doesn't go anywhere, so I figured I would ask here if there is some example server I could learn from.
Thanks!
Whenever I try and connect to the website, it just says it couldn't connect and such, even though it successfully starts — there are no errors in console and everything seems to be setup correctly. One minor detail tho, this is running inside a Pterodactyl node.js egg. Though, other websites have worked perfectly on it and such, so I know it's possible, as well as the ports work fine with other applications so it likely isn't a firewall issue. I've been going at it for a couple hours and can't figure it out, so please help lol
The demo crashes because ¨The bot has reached max servers and needs to be verified¨
It would be nice to have a MultiSelectChannel Form like the SelectChannel Form but make it possible to select multiple Channels
Describe the bug
When I launch the dashboard in dev mode, I receive a warning.
To Reproduce
Simply run the command "pnpm run dev" and visit a page of the dashboard while logged in.
Expected behavior
Here's what we get in the console:
root@debian:~/discord-bot-dashboard-next# pnpm run dev
> [email protected] dev /root/discord-bot-dashboard-next
> next dev
▲ Next.js 13.5.6
- Local: http://localhost:3000
- Environments: .env
✓ Ready in 7.6s
✓ Compiled /src/middleware in 639ms (59 modules)
○ Compiling /user/home ...
✓ Compiled /user/home in 11.2s (1505 modules)
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
✓ Compiled /api/auth in 1520ms (231 modules)
○ Compiling /guilds/[guild] ...
✓ Compiled /guilds/[guild] in 7.3s (1699 modules)
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
The problem is [DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
Additional context
My Node.js version is 18.18.2.
I should note that I don't have a backend in place yet.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.