diff --git a/images/mj-logo.png b/images/mj-logo.png new file mode 100644 index 0000000..7a9bc6e Binary files /dev/null and b/images/mj-logo.png differ diff --git a/layouts/main.tsx b/layouts/main.tsx index dc3250f..d8d4998 100644 --- a/layouts/main.tsx +++ b/layouts/main.tsx @@ -1,16 +1,20 @@ import dynamic from 'next/dynamic' import Link from 'next/link' -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useContext } from 'react'; import { - SmileOutlined, GithubFilled, - PictureFilled, - -} from '@ant-design/icons' +} from '@ant-design/icons'; +import { Image, Button } from 'antd'; +import MJLogo from '../images/mj-logo.png'; import { Route, MenuDataItem } from '@ant-design/pro-layout/lib/typing' -import { PageContainer, ProConfigProvider } from '@ant-design/pro-components'; +import { ProConfigProvider } from '@ant-design/pro-components'; + +import AuthContext from "../stores/authContext"; +import { useRouter } from 'next/router'; + + const ProLayout = dynamic(() => import('@ant-design/pro-layout'), { ssr: false, }) @@ -19,9 +23,9 @@ const ROUTES: Route = { path: '/', routes: [ { - path: '/', + path: '/midjourney', name: 'MidJourney', - icon: , + icon: midjourney, }, ], } @@ -44,6 +48,16 @@ const menuItemRender = (options: MenuDataItem, element: React.ReactNode) => ( export default function Main(children: JSX.Element) { const [dark, setDark] = useState(false); + const { user, authReady, logout } = useContext(AuthContext); + const router = useRouter(); + + useEffect(() => { + console.log(user, authReady); + if (authReady && !user) { + router.push('/'); + } + }, [authReady, user, router]) + useEffect(() => { // Check the theme when the user first visits the page if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { @@ -66,17 +80,18 @@ export default function Main(children: JSX.Element) { dark={dark} hashed={false}> { - if (props.isMobile) return []; + if (props.isMobile) return []; return [ + , - - - - ) + + {useMainLayout ? + MainLayout( + <> + + + + ) : ( + <> + + + + ) + } + ); } diff --git a/pages/index.tsx b/pages/index.tsx index a34fc19..f9df0e6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,183 +1,29 @@ -import React, { useState } from "react"; -import { Input, Button, List, Image, Typography, Skeleton } from "antd"; -import { SendOutlined } from "@ant-design/icons"; -import { Imagine, Custom } from "../request"; -import { MJMessage } from "midjourney"; -import { Message } from "../interfaces/message"; - -const { TextArea } = Input; -const { Text } = Typography; +import React, { useContext, useEffect } from "react"; +import { Divider, Typography } from "antd"; +import AuthContext from "../stores/authContext"; +import { useRouter } from 'next/router'; const Index: React.FC = () => { - const [inputValue, setInputValue] = useState(""); - const [inputDisable, setInputDisable] = useState(false); - const [messages, setMessages] = useState([]); - - const handleMessageSend = async () => { - let newMessage: Message = { - text: inputValue.trim(), - prompt: inputValue.trim(), - progress: "waiting start", - img: "", - }; - - if (newMessage.text) { - const oldMessages = messages; - setInputDisable(true); - setMessages([...oldMessages, newMessage]); - await Imagine( - JSON.stringify({ prompt: newMessage.text }), - (data: MJMessage) => { - console.log(data); - newMessage.img = data.uri; - newMessage.msgHash = data.hash; - newMessage.msgID = data.id; - newMessage.progress = data.progress; - newMessage.content = data.content; - newMessage.flags = data.flags; - newMessage.options = data.options; - setMessages([...oldMessages, newMessage]); - } - ); - setInputValue(""); - setInputDisable(false); - } - }; + const router = useRouter(); + const { user, login, authReady } = useContext(AuthContext); - const clickLabel = async (content: string, msgId: string, flags: string, customId: string, label: string, prompt?: string) => { - let newMessage: Message = { - text: `${content} ${label}`, - prompt, - progress: "waiting start", - img: "", - }; - - const oldMessages = messages; - setInputDisable(true); - setMessages([...oldMessages, newMessage]); - await Custom( - JSON.stringify({ content, msgId, flags, customId, label }), - (data: MJMessage) => { - newMessage.img = data.uri; - newMessage.msgHash = data.hash; - newMessage.msgID = data.id; - newMessage.content = data.content; - newMessage.progress = data.progress; - newMessage.flags = data.flags; - newMessage.options = data.options; - setMessages([...oldMessages, newMessage]); - } - ); - setInputDisable(false); - } - const renderMessage = ({ - text, - img, - flags, - msgID, - progress, - content, - options, - prompt, - }: Message) => { - if (process.env.NEXT_PUBLIC_IMAGE_PREFIX) { - img = img.replace( - "https://cdn.discordapp.com/", - process.env.NEXT_PUBLIC_IMAGE_PREFIX - ); + useEffect(() => { + if (authReady && user) { + router.push('/midjourney'); } - return ( - - - {text} {`(${progress})`} - - - { - img ? ( - - ) : ( - - ) - } - -
- { - options && options.map((option: { label: string, custom: string }) => ( - - )) - } -
- - ); - }; + }, [authReady, login, router, user]); return ( -
- -
-