Skip to content

Commit

Permalink
chore(kibbeh): complete
Browse files Browse the repository at this point in the history
  • Loading branch information
amitojsingh366 committed May 18, 2021
1 parent 226f6a3 commit 4ad01bf
Show file tree
Hide file tree
Showing 13 changed files with 299 additions and 307 deletions.
20 changes: 18 additions & 2 deletions kibbeh/public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@
"joinRoom": "Join Room",
"copyLink": "Copy Link",
"copied": "Copied!",
"copy": "Copy",
"formattedIntlDate": "{{date, intlDate}}",
"formattedIntlTime": "{{time, intlTime}}",
"requestPermissions": "Please note running DogeHouse without accessibility permissions may cause unwanted errors"
"requestPermissions": "Please note running DogeHouse without accessibility permissions may cause unwanted errors",
"error": "Error"
},
"header": {
"_comment": "Main Header UI Internationalization Strings",
Expand All @@ -34,6 +36,14 @@
},
"pages": {
"_comment": "Respective Page UI Internationalization Strings",
"botEdit": {
"yourBots": "Your Bots",
"bots": "Bots",
"title": "Bot Information",
"apiKey": "ApiKey",
"regenerate": "Regenerate",
"reveal": "Click to reveal ApiKey"
},
"admin": {
"ban": "Ban",
"userStaffandContrib": "User Staff & Contributions",
Expand Down Expand Up @@ -260,13 +270,19 @@
"debugAudio": "Debug Audio",
"stopDebugger": "Stop Debugger"
},
"downloadApp": "Download App"
"downloadApp": "Download App",
"developer": "Developer Settings"
},
"userBadges": {
"dhStaff": "DogeHouse Staff",
"dhContributor": "DogeHouse Contributor"
},
"modals": {
"createBotModal": {
"usernameTaken": "Username is taken",
"subtitle": "Please fill the details below to create your bot",
"title": "Create Bot"
},
"createRoomModal": {
"subtitle": "Fill the following fields to start a new room",
"public": "Public",
Expand Down
1 change: 1 addition & 0 deletions kibbeh/src/icons/BotIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ function BotIcon(props: React.SVGProps<SVGSVGElement>) {
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 512 512"
{...props}
>
<path
fill="currentColor"
Expand Down
21 changes: 21 additions & 0 deletions kibbeh/src/icons/DeveloperIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import * as React from "react";

function DeveloperIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
viewBox="0 0 21 21"
width={16}
height={16}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M18.5 10H17V6C17 4.9 16.1 4 15 4H11V2.5C11 1.1 9.9 0 8.5 0C7.1 0 6 1.1 6 2.5V4H2C0.9 4 0 4.9 0 6V9.8H1.5C3 9.8 4.2 11 4.2 12.5C4.2 14 3 15.2 1.5 15.2H0V19C0 20.1 0.9 21 2 21H5.8V19.5C5.8 18 7 16.8 8.5 16.8C10 16.8 11.2 18 11.2 19.5V21H15C16.1 21 17 20.1 17 19V15H18.5C19.9 15 21 13.9 21 12.5C21 11.1 19.9 10 18.5 10Z"
fill="currentColor"
/>
</svg>
);
}

export default DeveloperIcon;
1 change: 1 addition & 0 deletions kibbeh/src/icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,4 @@ export { default as SolidDeafened } from "./SolidDeafened";
export { default as SolidFriendsAdd } from "./SolidFriendsAdd";
export { default as BotIcon } from "./BotIcon";
export { default as SolidDownload } from "./SolidDownload";
export { default as DeveloperIcon } from "./DeveloperIcon";
42 changes: 17 additions & 25 deletions kibbeh/src/modules/developer/BotIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,24 @@
import React from "react";
import { Bot } from "./Bot";

interface BotIconProps {
alt?: string;
src: string;
onClick: () => any;
alt?: string;
src: string;
onClick: () => any;
}

export const BotIcon: React.FC<BotIconProps> = ({ alt, src, onClick }) => {
return (
<div
className="inline-block mb-2 grid"
style={{ width: 120, height: 120 }}
data-testid="single-user-avatar"
>
<img
alt={alt}
className={'rounded-full w-full h-full object-cover relative'}
style={{ gridColumn: 1, gridRow: 1 }}
src={src}
/>
<button
className="flex justify-center items-center bg-primary-900 hover:opacity-40 transition duration-200 opacity-0 w-full h-full rounded-full"
style={{ gridColumn: 1, gridRow: 1 }}
onClick={onClick}
>
<div className="pointer-events-none">Edit Avatar</div>
</button>
</div>
);
return (
<div
className="mb-2 grid"
style={{ width: 120, height: 120 }}
data-testid="single-user-avatar"
>
<img
alt={alt}
className={"rounded-full w-full h-full object-cover relative"}
style={{ gridColumn: 1, gridRow: 1 }}
src={src}
/>
</div>
);
};
34 changes: 18 additions & 16 deletions kibbeh/src/modules/developer/BotInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,25 @@ import { Bot } from "./Bot";
import { BotIcon } from "./BotIcon";

interface BotInfoProps {
bot: Bot
onClick: () => any;
bot: Bot;
onClick: () => any;
}

export const BotInfo: React.FC<BotInfoProps> = ({ bot, onClick }) => {
return (
<div
className="flex flex-col bg-primary-800 rounded-lg items-center justify-center"
style={{ width: 190, height: 200 }}
>
<BotIcon
alt={`${bot.username}-s-avatar`}
src={bot.avatarUrl}
onClick={onClick}
/>
<div className="flex inline-block text-base font-medium">{bot.displayName}</div>
<div className="flex inline-block text-primary-300 text-base font-medium">@{bot.username}</div>
</div>
);
return (
<div
className="flex flex-col bg-primary-800 rounded-lg items-center justify-center"
style={{ width: 190, height: 200 }}
>
<BotIcon
alt={`${bot.username}-s-avatar`}
src={bot.avatarUrl}
onClick={onClick}
/>
<div className="flex text-base font-medium">{bot.displayName}</div>
<div className="flex text-primary-300 text-base font-medium">
@{bot.username}
</div>
</div>
);
};
87 changes: 5 additions & 82 deletions kibbeh/src/modules/developer/BotsEditPage.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,17 @@
import React, { useState } from "react";
import React from "react";
import { PageComponent } from "../../types/PageComponent";
import { WaitForWsAndAuth } from "../auth/WaitForWsAndAuth";
import { HeaderController } from "../display/HeaderController";
import { useTypeSafeTranslation } from "../../shared-hooks/useTypeSafeTranslation";
import { MainLayout } from "../layouts/MainLayout";
import { FloatingRoomInfo } from "../layouts/FloatingRoomInfo";
import { TabletSidebar } from "../layouts/TabletSidebar";
import { DeveloperPanel } from "./DeveloperPanel";
import { Bot } from "./Bot";
import { EditBotAvatarModal } from "./EditBotAvatarModal";
import { BotInfo } from "./BotInfo";
import { ProfileBlockController } from "../dashboard/ProfileBlockController";
import { EditBot } from "./EditBot";

const bot: Bot = {
id: "",
username: "crispybot1",
avatarUrl:
"https://cdn.discordapp.com/avatars/484638053554454531/0c8259da231d71c515735b1a0b745fb6.webp",
displayName: "Crispy Bot 1.0",
apiKey: "",
};

export const BotsEditPage: PageComponent<unknown> = ({}) => {
const { t } = useTypeSafeTranslation();
const [editAvatar, setEditAvatar] = useState(false);
const [showToken, setShowToken] = useState(false);

const token = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
interface BotsEditPageProps {}

export const BotsEditPage: PageComponent<BotsEditPageProps> = ({}) => {
return (
<WaitForWsAndAuth>
<HeaderController embed={{}} title={"Edit Bot"} />
Expand All @@ -38,68 +22,7 @@ export const BotsEditPage: PageComponent<unknown> = ({}) => {
rightPanel={<ProfileBlockController />}
mobileHeader={undefined}
>
<EditBotAvatarModal
isOpen={editAvatar}
onRequestClose={() => setEditAvatar(false)}
bot={bot}
/>
<div
className="flex flex-col text-primary-100"
style={{ marginTop: 130, paddingLeft: 20, paddingRight: 20 }}
>
<div className="flex flex-row w-full justify-between mb-4">
<div className="flex text-2xl font-bold">Bot Information</div>
</div>
<div className="flex flex-row w-full justify-between">
<BotInfo bot={bot} onClick={() => setEditAvatar(true)} />

<div
className="flex flex-col justify-between"
style={{ height: 200 }}
>
<div
className="flex flex-col justify-between bg-primary-800 rounded-lg p-4"
style={{ width: 390, height: 150 }}
>
<div className="flex flex-col">
<div className="text-base font-bold">Token</div>
<div
className={`flex items-center justify-start bg-primary-900 w-full rounded pl-2 ${
!showToken ? "text-accent cursor-pointer" : ""
}`}
style={{ height: 25 }}
onClick={() => setShowToken(true)}
>
{showToken ? token : "Click to reveal token"}
</div>
</div>
<div className="flex flex-row justify-between">
<button
className="bg-primary-700 md:hover:bg-primary-600 rounded-lg"
style={{ width: 150, height: 40 }}
onClick={() => navigator.clipboard?.writeText(token)}
>
Copy
</button>
<button
className="bg-primary-700 md:hover:bg-primary-600 rounded-lg"
style={{ width: 150, height: 40 }}
onClick={() => null}
>
Regenerate
</button>
</div>
</div>
<button
className="bg-accent md:hover:bg-accent-hover rounded-lg"
style={{ width: 250, height: 40 }}
onClick={() => null}
>
Delete
</button>
</div>
</div>
</div>
<EditBot />
</MainLayout>
</WaitForWsAndAuth>
);
Expand Down
84 changes: 84 additions & 0 deletions kibbeh/src/modules/developer/CreateBotModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { Form, Formik } from "formik";
import React from "react";
import { InputField } from "../../form-fields/InputField";
import { useWrappedConn } from "../../shared-hooks/useConn";
import { useTypeSafeTranslation } from "../../shared-hooks/useTypeSafeTranslation";
import { Button } from "../../ui/Button";
import { ButtonLink } from "../../ui/ButtonLink";
import { Modal } from "../../ui/Modal";
import { showErrorToast } from "../../lib/showErrorToast";
interface CreateBotModalProps {
onRequestClose: () => void;
data?: {
username: string;
};
}

export const CreateBotModal: React.FC<CreateBotModalProps> = ({
onRequestClose,
data,
}) => {
const { t } = useTypeSafeTranslation();
const wrapper = useWrappedConn();

return (
<Modal isOpen onRequestClose={onRequestClose}>
<Formik<{
username: string;
}>
initialValues={
data
? data
: {
username: "",
}
}
validateOnChange={false}
validateOnBlur={false}
onSubmit={async ({ username }) => {
wrapper.mutation.userCreateBot(username).then((r) => {
if (r.isUsernameTaken) {
showErrorToast(
t("components.modals.createBotModal.usernameTaken")
);
}
if (r.error) {
showErrorToast(r.error);
}
});
onRequestClose();
}}
>
{({ isSubmitting }) => (
<Form className={`grid grid-cols-3 gap-4 focus:outline-none w-full`}>
<div className={`col-span-3 block`}>
<h4 className={`mb-2 text-primary-100`}>
{t("components.modals.createBotModal.title")}
</h4>
<div className={`text-primary-300`}>
{t("components.modals.createBotModal.subtitle")}
</div>
</div>
<div className={`flex h-full w-full col-span-2`}>
<InputField
className={`mb-4`}
errorMsg={t("components.modals.editProfileModal.usernameError")}
label={t("components.modals.editProfileModal.usernameLabel")}
name="username"
/>
</div>

<div className={`flex pt-2 space-x-3 col-span-full items-center`}>
<Button loading={isSubmitting} type="submit" className={`mr-3`}>
{t("components.modals.createBotModal.title")}
</Button>
<ButtonLink type="button" onClick={onRequestClose}>
{t("common.cancel")}
</ButtonLink>
</div>
</Form>
)}
</Formik>
</Modal>
);
};
Loading

0 comments on commit 4ad01bf

Please sign in to comment.