fix: camo should be proceed at server-side

Author: wonderlandpark

components/BotCard.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
 
-import { camoUrl, checkBotFlag, formatNumber, makeBotURL } from '@utils/Tools'
+import {  checkBotFlag, formatNumber, makeBotURL } from '@utils/Tools'
 import { Status } from '@utils/Constants'
 import { Bot } from '@types'
 
@@ -20,7 +20,7 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 							style={
 								(checkBotFlag(bot.flags, 'trusted') || checkBotFlag(bot.flags, 'partnered')) && bot.banner
 									? {
-											background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${camoUrl(bot.banner)}") center top / cover no-repeat`,
+											background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${bot.banner}") center top / cover no-repeat`,
 											color: 'white',
 									  }
 									: {}

components/ServerCard.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
 
-import { camoUrl, checkServerFlag, formatNumber, makeServerURL } from '@utils/Tools'
+import { checkServerFlag, formatNumber, makeServerURL } from '@utils/Tools'
 import { ServerData, ServerState } from '@types'
 import { DiscordEnpoints, DSKR_BOT_ID } from '@utils/Constants'
 
@@ -29,7 +29,7 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 							style={
 								(checkServerFlag(server.flags, 'trusted') || checkServerFlag(server.flags, 'partnered')) && server.banner
 									? {
-											background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${camoUrl(server.banner)}") center top / cover no-repeat`,
+											background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${server.banner}") center top / cover no-repeat`,
 											color: 'white',
 									  }
 									: {}

pages/bots/[id]/edit.tsx

@@ -617,9 +617,11 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const user = await get.Authorization(parsed?.token)
+	const bot = await get.bot.load(ctx.query.id)
+	const spec = await get.botSpec(ctx.query.id, user)
 	return {
 		props: {
-			bot: await get.bot.load(ctx.query.id),
+			bot: { ...bot, banner: spec.banner, bg: spec.bg },
 			user: await get.user.load(user || ''),
 			csrfToken: getToken(ctx.req, ctx.res),
 		},

pages/bots/[id]/index.tsx

@@ -16,7 +16,7 @@ import { get } from '@utils/Query'
 import Day from '@utils/Day'
 import { ReportSchema } from '@utils/Yup'
 import Fetch from '@utils/Fetch'
-import { camoUrl, checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
+import { checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
 import { getToken } from '@utils/Csrf'
 
 import NotFound from '../../404'
@@ -51,7 +51,7 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 			style={
 				bg
 					? {
-							background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${camoUrl(data.bg)}") center top / cover no-repeat fixed`,
+							background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed`,
 					  }
 					: {}
 			}

pages/servers/[id]/index.tsx

@@ -15,7 +15,6 @@ import { get, safeImageHost } from '@utils/Query'
 import Day from '@utils/Day'
 import Fetch from '@utils/Fetch'
 import {
-	camoUrl,
 	checkBotFlag,
 	checkServerFlag,
 	checkUserFlag,
@@ -57,7 +56,7 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
 			style={
 				bg
 					? {
-							background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${camoUrl(data.bg)}") center top / cover no-repeat fixed`,
+							background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed`,
 					  }
 					: {}
 			}

types/index.ts

@@ -89,6 +89,8 @@ export interface BotSpec {
 	webhookURL: string | null
 	webhookStatus: WebhookStatus
 	token: string
+	banner: string | null
+	bg: string | null
 }
 
 export interface ServerSpec {

utils/Query.ts

@@ -100,6 +100,9 @@ async function getBot(id: string, topLevel = true): Promise<Bot> {
 		res.name = name
 		res.category = JSON.parse(res.category)
 		res.owners = JSON.parse(res.owners)
+		res.banner = res.banner ? camoUrl(res.banner) : null
+		res.bg = res.bg ? camoUrl(res.bg): null
+
 
 		if (discordBot.flags.bitfield & UserFlags.BotHTTPInteractions) {
 			res.status = 'online'
@@ -676,7 +679,7 @@ async function submitServer(
 
 async function getBotSpec(id: string, userID: string): Promise<BotSpec | null> {
 	const res = await knex('bots')
-		.select(['bots.id', 'bots.token', 'bots.webhook_url', 'bots.webhook_status'])
+		.select(['bots.id', 'bots.token', 'bots.webhook_url', 'bots.webhook_status', 'bots.banner', 'bots.bg'])
 		.leftJoin('owners_mapping', 'bots.id', 'owners_mapping.target_id')
 		.where('owners_mapping.user_id', userID)
 		.andWhere('owners_mapping.type', ObjectType.Bot)
@@ -688,6 +691,8 @@ async function getBotSpec(id: string, userID: string): Promise<BotSpec | null> {
 		token: res[0].token,
 		webhookURL: res[0].webhook_url,
 		webhookStatus: res[0].webhook_status,
+		banner: res[0].banner,
+		bg: res[0].bg,
 	}
 }