From 9ab99697461e06782efd1bf04ef13a512608c064 Mon Sep 17 00:00:00 2001
From: kaiyohugo <41114603+KAIYOHUGO@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:23:46 +0800
Subject: [PATCH] refactor(Frontend): :construction: Refactor frontend style &
 code

---
 frontend/src/components/badge.rs     |   4 +
 frontend/src/components/button.rs    |  35 ++--
 frontend/src/components/catch.rs     |  42 -----
 frontend/src/components/editor.rs    | 156 ++++++++--------
 frontend/src/components/input.rs     |  65 +++++--
 frontend/src/components/mod.rs       |  10 +-
 frontend/src/components/modal.rs     |  10 +-
 frontend/src/components/toast.rs     |   2 +-
 frontend/src/pages/create/mod.rs     |   3 +
 frontend/src/pages/create/problem.rs |  78 ++++++++
 frontend/src/pages/home.rs           |   8 +-
 frontend/src/pages/login.rs          |  46 +++--
 frontend/src/pages/mod.rs            |  41 ++---
 frontend/src/pages/pages.rs          |  42 ++---
 frontend/src/pages/problem.rs        | 255 ++++++++++-----------------
 frontend/src/pages/problems.rs       |  15 +-
 frontend/src/pages/rank.rs           |   4 +-
 17 files changed, 423 insertions(+), 393 deletions(-)
 create mode 100644 frontend/src/components/badge.rs
 delete mode 100644 frontend/src/components/catch.rs
 create mode 100644 frontend/src/pages/create/mod.rs
 create mode 100644 frontend/src/pages/create/problem.rs

diff --git a/frontend/src/components/badge.rs b/frontend/src/components/badge.rs
new file mode 100644
index 00000000..e162c73e
--- /dev/null
+++ b/frontend/src/components/badge.rs
@@ -0,0 +1,4 @@
+use leptos::*;
+
+#[component]
+pub fn Badge() -> impl IntoView {}
diff --git a/frontend/src/components/button.rs b/frontend/src/components/button.rs
index 0a675ad3..3e36aa63 100644
--- a/frontend/src/components/button.rs
+++ b/frontend/src/components/button.rs
@@ -1,34 +1,37 @@
-use leptos::{ev::MouseEvent, *};
+use leptos::*;
+use tailwind_fuse::*;
 
-use super::Merge;
+#[derive(TwVariant)]
+pub enum ButtonVariant {
+    #[tw(default, class = "text-background bg-primary")]
+    Primary,
+    #[tw(class = "text-background bg-secondary")]
+    Secondary,
+    #[tw(class = "text-slate-950 bg-accent")]
+    Accent,
+}
 
 #[component]
 pub fn Button(
-    #[prop(into, default = "button".to_owned().into())] kind: MaybeSignal<
+    #[prop(into, default = "button".to_owned().into())] type_: MaybeSignal<
         String,
     >,
-    #[prop(into, default = false.into())] disabled: MaybeSignal<bool>,
-    #[prop(into, optional)] on_click: Option<Callback<MouseEvent>>,
+    #[prop(into, optional)] variant: ButtonVariant,
+    #[prop(into, optional)] disabled: MaybeSignal<bool>,
     #[prop(into, optional)] id: Option<AttributeValue>,
-    #[prop(into, optional)] class: Option<AttributeValue>,
+    #[prop(into, default = "".into())] class: String,
     children: Children,
 ) -> impl IntoView {
     view! {
         <button
-            class=Merge(
-                class,
-                "text-background bg-primary p-2 rounded-md disabled:cursor-not-allowed disabled:brightness-50",
+            class=tw_join!(
+                class, variant,
+                "p-2 hover:brightness-110 disabled:cursor-not-allowed disabled:brightness-50 transition-all",
             )
 
-            type=kind
+            type=type_
             disabled=disabled
             id=id
-            on:click=move |e| {
-                if let Some(f) = on_click {
-                    e.stop_propagation();
-                    f(e);
-                }
-            }
         >
 
             {children()}
diff --git a/frontend/src/components/catch.rs b/frontend/src/components/catch.rs
deleted file mode 100644
index 0cf3a9fc..00000000
--- a/frontend/src/components/catch.rs
+++ /dev/null
@@ -1,42 +0,0 @@
-use std::fmt::Debug;
-
-use leptos::*;
-use serde::{Deserialize, Serialize};
-
-#[derive(Debug, Clone, Copy, PartialEq, Deserialize, Serialize)]
-struct Ball<T>(Option<T>);
-
-#[component]
-pub fn CatchBoundary<T: 'static>(
-    children: Children,
-    #[prop(optional)] ball: Option<T>,
-) -> impl IntoView {
-    provide_catch(ball);
-
-    children()
-}
-
-/// provide catch context
-pub fn provide_catch<T: 'static>(ball: Option<T>) {
-    let ball = create_rw_signal(Ball(ball));
-    provide_context(ball);
-}
-
-/// `throw(...), catch signal, destroy_ball(...)`
-pub fn use_ball<T: 'static + Clone + Debug>(
-) -> (impl Fn(T), Signal<Option<T>>, impl Fn()) {
-    let ctx_ball: RwSignal<Ball<T>> = expect_context();
-
-    (
-        move |ball| ctx_ball.set(Ball(Some(ball))),
-        Signal::derive(move || ctx_ball.get().0),
-        move || ctx_ball.set(Ball(None)),
-    )
-}
-
-/// check has ball in `CatchBoundary`
-pub fn use_has_ball<T: 'static + Clone>() -> Signal<bool> {
-    let ctx_ball: RwSignal<Ball<T>> = expect_context();
-
-    Signal::derive(move || ctx_ball.get().0.is_some())
-}
diff --git a/frontend/src/components/editor.rs b/frontend/src/components/editor.rs
index 47e63f23..6bd72194 100644
--- a/frontend/src/components/editor.rs
+++ b/frontend/src/components/editor.rs
@@ -1,91 +1,97 @@
+use std::{collections::HashMap, path};
+
 use gloo::console::console;
+use js_sys::{Object, Reflect};
 use leptos::{leptos_dom::logging::console_log, *};
-// #[derive(Debug, Clone, Copy)]
-// pub enum Language {
-//     Unselected,
-//     Rust,
-//     Python,
-//     JavaScript,
-//     C,
-// }
+use wasm_bindgen::prelude::*;
+use web_sys::Event;
 
-// impl Language {
-//     fn to_ident(self) -> Option<&'static str> {
-//         match self {
-//             Self::Unselected => None,
-//             Self::Rust => Some("rust"),
-//             Self::Python => Some("python"),
-//             Self::JavaScript => Some("javascript"),
-//             Self::C => Some("c"),
-//         }
-//     }
-// }
+#[wasm_bindgen]
+extern "C" {
+    fn require(modules: Vec<String>, on_load: &Closure<dyn FnMut()>);
 
-pub fn get_editor_code() -> Option<String> {
-    js_sys::eval("editor_inject_1083hdkjla.getValue()")
-        .ok()?
-        .as_string()
+    #[wasm_bindgen(js_namespace = require, js_name="config")]
+    fn loader_config(config: Object);
 }
 
-fn uuid_to_lang(uuid: &str) -> &'static str {
-    match uuid {
-        "7daff707-26b5-4153-90ae-9858b9fd9619" => "c",
-        "8a9e1daf-ff89-42c3-b011-bf6fb4bd8b26" => "cpp",
-        "1c41598f-e253-4f81-9ef5-d50bf1e4e74f" => "lua",
-        _ => "javascript",
-    }
+#[wasm_bindgen]
+extern "C" {
+    type Monaco;
+
+    #[wasm_bindgen(js_name = "monaco")]
+    static MONACO: Monaco;
+
+    type MonacoEditor;
+
+    #[wasm_bindgen(method, getter)]
+    fn editor(this: &Monaco) -> MonacoEditor;
+
+    /// Create a new editor under `domElement`.
+    /// `domElement` should be empty (not contain other dom nodes).
+    /// The editor will read the size of `domElement`.
+    #[wasm_bindgen(method, js_name = "create")]
+    fn create_editor(
+        this: &MonacoEditor,
+        el: web_sys::HtmlElement,
+        config: Option<Object>,
+    );
 }
 
 #[component]
 pub fn Editor(
     #[prop(into, default = "".to_owned().into())] language: MaybeSignal<String>,
-    #[prop(into, optional)] on_submit: Option<Callback<String>>,
+    #[prop(into, default = "".to_owned())] class: String,
 ) -> impl IntoView {
-    /// compacted version of the script
-    /// ```javascript
-    /// (async() => {
-    ///     let parent = null;
-    ///     while(parent==null || typeof monaco=='undefined'){
-    ///         await new Promise(r=>setTimeout(r, 5));
-    ///         parent = document.getElementById('editor-inject-1083hdkjla');
-    ///     }
-    ///
-    ///     while(parent.firstChild) parent.removeChild(parent.firstChild);
-    ///
-    ///     let child = document.createElement('div');
-    ///     parent.appendChild(child);
-    ///     child.style = 'width:100%;height:65vh';
-    ///   
-    ///     monaco.editor.setTheme('vs-dark');
-    ///     editor_inject_1083hdkjla = monaco.editor.create(child, {
-    ///         value: '',
-    ///         language: 'pro-lang'
-    ///     });
-    /// })()
-    /// ```
-    static EDITOR_SCRIPT_SOURCE: &str =
-        "(async() => {let parent=null;while(parent==null || typeof \
-         monaco=='undefined'){await new Promise(r=>setTimeout(r, \
-         5));parent=document.getElementById('editor-inject-1083hdkjla');\
-         }while(parent.firstChild) parent.removeChild(parent.firstChild);let \
-         child=document.createElement('div');parent.appendChild(child);child.\
-         style='width:100%;height:65vh';  \
-         monaco.editor.setTheme('vs-dark');editor_inject_1083hdkjla=monaco.\
-         editor.create(child, {value:'',language:'pro-lang'});})()";
+    let node_ref = create_node_ref::<html::Div>();
+    let on_load = move |_| {
+        let c = Object::new();
+        let paths = Object::new();
+        Reflect::set(
+            &*paths,
+            &"vs".into(),
+            &"https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs".into(),
+        ).unwrap();
+        Reflect::set(&*c, &"paths".into(), &*paths).unwrap();
+        loader_config(c);
 
-    create_effect(move |_| {
-        js_sys::eval(
-            &EDITOR_SCRIPT_SOURCE
-                .replace("pro-lang", uuid_to_lang(&language())),
-        )
-        .unwrap();
-    });
+        let config = Object::new();
+        Reflect::set(&*config, &"theme".into(), &"vs-dark".into()).unwrap();
+        Reflect::set(&*config, &"language".into(), &"rust".into()).unwrap();
+
+        let init_monaco = Closure::once(move || {
+            MONACO.editor().create_editor(
+                (**(node_ref.get_untracked().unwrap())).clone(),
+                Some(config),
+            );
+        });
+
+        require(vec!["vs/editor/editor.main".into()], &init_monaco);
+        init_monaco.forget();
+    };
     view! {
-        <div>
-            <div
-                id="editor-inject-1083hdkjla"
-                style="width: 100%; border: 1px solid grey"
-            ></div>
-        </div>
+        <div node_ref=node_ref class=class></div>
+        <DynamicLoad
+            src="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/loader.js"
+            on_load
+        />
     }
 }
+
+#[component]
+fn DynamicLoad(
+    #[prop(into)] src: String,
+    on_load: impl FnMut(Event) + 'static,
+) -> impl IntoView {
+    let (load_src, set_load_src) = create_signal(None);
+    let node_ref = create_node_ref::<html::Script>();
+    node_ref.on_load(move |_| {
+        set_load_src(Some(src));
+    });
+    view! { <script on:load=on_load src=load_src node_ref=node_ref></script> }
+}
+
+pub fn get_editor_code() -> Option<String> {
+    js_sys::eval("editor_inject_1083hdkjla.getValue()")
+        .ok()?
+        .as_string()
+}
diff --git a/frontend/src/components/input.rs b/frontend/src/components/input.rs
index 4d537dbc..05db0439 100644
--- a/frontend/src/components/input.rs
+++ b/frontend/src/components/input.rs
@@ -1,27 +1,60 @@
 use leptos::*;
 use tailwind_fuse::tw_merge;
 
+#[derive(Debug, Default, Clone, Copy)]
+pub enum InputVariant {
+    #[default]
+    Text,
+    Password,
+    Textarea,
+}
+
 #[component]
-pub fn TextInput(
-    #[prop(into, default = "text".to_owned().into())] kind: MaybeProp<String>,
+pub fn Input(
     #[prop(into)] value: RwSignal<String>,
-    #[prop(into, optional)] placeholder: Option<AttributeValue>,
-    #[prop(into, optional)] id: Option<AttributeValue>,
+    #[prop(into, optional)] variant: InputVariant,
     #[prop(into, default = "".into())] class: String,
+    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     let (get, set) = value.split();
-    view! {
-        <input
-            class=tw_merge!(
-                class,
-                "text-text outline-none p-2 bg-slate-800 border-b-2 border-slate-800 focus:border-primary transition-colors duration-300",
-            )
+    match variant {
+        InputVariant::Text => view! {
+            <input
+                class=tw_merge!(
+                    class,
+                    "text-text outline-none p-2 bg-slate-800 border-b-2 border-slate-800 focus:border-primary transition-colors duration-300",
+                )
+
+                type="text"
+                prop:value=get
+                on:input=move |e| set(event_target_value(&e))
+                {..attrs}
+            />
+        }.into_view(),
+        InputVariant::Password => view! {
+            <input
+                class=tw_merge!(
+                    class,
+                    "text-text outline-none p-2 bg-slate-800 border-b-2 border-slate-800 focus:border-primary transition-colors duration-300",
+                )
+
+                type="password"
+                prop:value=get
+                on:input=move |e| set(event_target_value(&e))
+                {..attrs}
+            />
+        }.into_view(),
+        InputVariant::Textarea => view! {
+            <textarea
+                class=tw_merge!(
+                    class,
+                    "text-text outline-none p-2 bg-slate-800 border-b-2 border-slate-800 focus:border-primary transition-colors duration-300",
+                )
 
-            id=id
-            type=kind
-            prop:value=get
-            placeholder=placeholder
-            on:input=move |e| set(event_target_value(&e))
-        />
+                prop:value=get
+                on:input=move |e| set(event_target_value(&e))
+                {..attrs}
+            ></textarea>
+        }.into_view(),
     }
 }
diff --git a/frontend/src/components/mod.rs b/frontend/src/components/mod.rs
index 37b918bf..5f56ef82 100644
--- a/frontend/src/components/mod.rs
+++ b/frontend/src/components/mod.rs
@@ -1,26 +1,26 @@
 pub mod button;
-pub mod catch;
 pub mod editor;
 pub mod footer;
 pub mod highlight;
+pub mod input;
 pub mod markdown;
 pub mod modal;
 pub mod navbar;
 pub mod redirect_if;
 pub mod select;
-pub mod text_input;
 pub mod toast;
 pub mod toggle;
+pub mod badge;
 
-pub use button::Button;
-pub use catch::{provide_catch, use_ball, use_has_ball, CatchBoundary};
+pub use button::{Button, ButtonVariant};
 pub use editor::Editor;
 pub use footer::Footer;
 pub use highlight::Highlight;
+pub use input::{Input, InputVariant};
 pub use markdown::Markdown;
 pub use modal::{Modal, ModalLevel};
 pub use navbar::Navbar;
 pub use redirect_if::RedirectIf;
 pub use select::{Select, SelectOption};
-pub use text_input::TextInput;
 pub use toast::{toast, ProvideToast};
+pub use badge::Badge;
\ No newline at end of file
diff --git a/frontend/src/components/modal.rs b/frontend/src/components/modal.rs
index 959837d3..45995d32 100644
--- a/frontend/src/components/modal.rs
+++ b/frontend/src/components/modal.rs
@@ -1,10 +1,15 @@
 use leptos::{ev::MouseEvent, *};
+use tailwind_fuse::*;
 
 use super::Button;
 
+#[derive(Debug, TwVariant)]
 pub enum ModalLevel {
+    #[tw(default, class = "")]
     Info,
+    #[tw(class = "")]
     Warn,
+    #[tw(class = "")]
     Error,
 }
 
@@ -20,15 +25,16 @@ pub fn Modal(
         <dialog open>
             {children()}
             <form method="dialog">
+
                 {match on_close {
                     Some(f) => {
                         view! {
-                            <Button kind="submit" on_click=f>
+                            <Button type_="submit" on:click=f>
                                 OK
                             </Button>
                         }
                     }
-                    None => view! { <Button kind="submit">OK</Button> },
+                    None => view! { <Button type_="submit">OK</Button> },
                 }}
 
             </form>
diff --git a/frontend/src/components/toast.rs b/frontend/src/components/toast.rs
index 412e91da..d8461633 100644
--- a/frontend/src/components/toast.rs
+++ b/frontend/src/components/toast.rs
@@ -15,7 +15,7 @@ pub fn ProvideToast(children: Children) -> impl IntoView {
     let (toasts, _) = slice!(toaster.toasts);
     view! {
         {children()}
-        <div class="fixed bottom-0 right-0 h-screen w-60 flex flex-col justify-end">
+        <div class="fixed bottom-0 right-0 h-screen min-w-64 w-1/5 flex flex-col justify-end">
             <AnimatedFor
                 each=toasts
                 key=|toast| toast.0
diff --git a/frontend/src/pages/create/mod.rs b/frontend/src/pages/create/mod.rs
new file mode 100644
index 00000000..42d85a54
--- /dev/null
+++ b/frontend/src/pages/create/mod.rs
@@ -0,0 +1,3 @@
+pub mod problem;
+
+pub use problem::Problem;
\ No newline at end of file
diff --git a/frontend/src/pages/create/problem.rs b/frontend/src/pages/create/problem.rs
new file mode 100644
index 00000000..84c09a30
--- /dev/null
+++ b/frontend/src/pages/create/problem.rs
@@ -0,0 +1,78 @@
+use leptos::*;
+
+use crate::{
+    components::*,
+    grpc::{self, WithToken}, session::*,
+};
+
+#[component]
+pub fn Problem() -> impl IntoView {
+    let title = create_rw_signal("".to_owned());
+    let difficulty = create_rw_signal("".to_owned());
+    let time = create_rw_signal("".to_owned());
+    let memory = create_rw_signal("".to_owned());
+    let token=use_token();
+    // let mut client = grpc::problem_client::ProblemClient::new(grpc::new_client());
+    // client.create(
+    //     grpc::CreateProblemRequest {
+    //         info: grpc::create_problem_request::Info {
+    //             title: todo!(),
+    //             difficulty: todo!(),
+    //             time: todo!(),
+    //             memory: todo!(),
+    //             tags: todo!(),
+    //             content: todo!(),
+    //             match_rule: todo!(),
+    //             order: todo!(),
+    //         },
+    //         request_id: todo!(),
+    //     }
+    //     .with_token(token().unwrap()),
+    // );
+    view! {
+        <main class="grow flex items-center justify-center">
+            <form
+                class="flex flex-col flex-nowrap justify-center bg-slate-900 min-w-80 w-4/5 p-4"
+                on:submit=move |e| {
+                    e.prevent_default();
+                }
+            >
+
+                <div class="flex flex-col">
+                    <label class="text-text pb-2">Title</label>
+                    <Input value=title/>
+                </div>
+
+                <div class="pt-4 flex flex-row flex-nowrap justify-between">
+                    <div class="flex flex-col">
+                        <label class="text-text pb-2">Difficulty</label>
+                        <Input value=difficulty/>
+                    </div>
+                    <div class="flex flex-col pl-4">
+                        <label class="text-text pb-2">Time (nanosecond)</label>
+                        <Input value=time/>
+                    </div>
+                    <div class="flex flex-col pl-4">
+                        <label class="text-text pb-2">Memory (byte)</label>
+                        <Input value=title/>
+                    </div>
+                    <div class="flex flex-col pl-4">
+                        <label class="text-text pb-2">Match Rule</label>
+                        <Input value=title/>
+                    </div>
+                </div>
+
+                <div class="pt-4 w-full">
+                    <label class="text-text pb-2">Content</label>
+                    <Editor class="w-full h-[60vh]"/>
+                </div>
+                <div class="pt-4 w-full">
+                    <Button type_="submit" class="w-full">
+                        Create
+                    </Button>
+                </div>
+            </form>
+
+        </main>
+    }
+}
diff --git a/frontend/src/pages/home.rs b/frontend/src/pages/home.rs
index 4d1b24ec..7edd26dc 100644
--- a/frontend/src/pages/home.rs
+++ b/frontend/src/pages/home.rs
@@ -4,5 +4,11 @@ use crate::components::*;
 
 #[component]
 pub fn Home() -> impl IntoView {
-    view! { <Modal level=ModalLevel::Error>Test</Modal> }
+    // <Modal level=ModalLevel::Error>Test</Modal>
+
+    view! {
+        <Button on:click=|_| toast(
+            view! { "This is a error message............." },
+        )>Click Me</Button>
+    }
 }
diff --git a/frontend/src/pages/login.rs b/frontend/src/pages/login.rs
index 70d13a70..e129593e 100644
--- a/frontend/src/pages/login.rs
+++ b/frontend/src/pages/login.rs
@@ -1,10 +1,9 @@
-use ::grpc::backend::Role;
 use leptos::*;
 use leptos_router::use_navigate;
 
 use crate::{
     components::*,
-    error::*,
+    errors::*,
     grpc,
     session::{use_token_info, TokenInfo},
 };
@@ -29,13 +28,19 @@ pub fn Login() -> impl IntoView {
                         username,
                         password,
                         expiry: None,
+                        request_id: None,
                     })
                     .await?;
                 let resp = resp.into_inner();
                 set_token_info(Some(TokenInfo {
                     token: resp.token,
-                    role: Role::try_from(resp.role).map_err(|_| {
-                        ErrorKind::ServerError(ServerErrorKind::InvalidValue)
+                    role: grpc::Role::try_from(resp.role).map_err(|err| {
+                        Error {
+                            kind: ErrorKind::Internal,
+                            context: "API error, please check API version."
+                                .to_owned(),
+                        }
+                        .context(err.to_string().as_str())
                     })?,
                 }));
                 navigate("/", Default::default());
@@ -48,18 +53,27 @@ pub fn Login() -> impl IntoView {
     });
 
     let error_msg = move || {
-        submit.value()().and_then(|r| r.err()).map(|e| match e {
+        let Some(Err(err)) = submit.value()() else {
+            return "".to_owned();
+        };
+        match err.kind {
             ErrorKind::NotFound => {
-                "Username or password is incorrect".to_owned()
+                "Username or password is incorrect.".to_owned()
             }
-            e => e.to_string(),
-        })
+            ErrorKind::RateLimit => {
+                "You try too many times, please wait and try again".to_owned()
+            }
+            _ => {
+                toast(view! { <p>{err.to_string()}</p> });
+                "".to_owned()
+            }
+        }
     };
 
     view! {
         <main class="grow flex items-center justify-center">
             <form
-                class="flex flex-col flex-nowrap justify-center items-center bg-slate-900"
+                class="flex flex-col flex-nowrap justify-center min-w-80 w-1/4 p-4 bg-slate-900"
                 on:submit=move |e| {
                     e.prevent_default();
                     submit.dispatch((username(), password()));
@@ -67,22 +81,24 @@ pub fn Login() -> impl IntoView {
                 }
             >
 
-                <img src="https://placehold.co/200" alt="Logo" class="mt-8 mb-4"/>
+                <div class="flex justify-center">
+                    <img src="https://placehold.co/200" alt="Logo" class="max-w-64"/>
+                </div>
 
-                <div class="p-4 flex flex-col">
+                <div class="pt-4 flex flex-col">
                     <label for="username" class="text-text pb-2">
                         Username
                     </label>
-                    <TextInput id="username" value=username/>
+                    <Input attr:id="username" value=username/>
                 </div>
-                <div class="p-4 flex flex-col">
+                <div class="pt-4 flex flex-col">
                     <label for="password" class="text-text pb-2">
                         Password
                     </label>
-                    <TextInput kind="password" id="password" value=password/>
+                    <Input variant=InputVariant::Password attr:id="password" value=password/>
                 </div>
                 <p class="w-full text-red text-center">{error_msg}</p>
-                <div class="p-4 w-full">
+                <div class="pt-4 w-full">
                     <Button type_="submit" class="w-full" disabled>
                         Login
                     </Button>
diff --git a/frontend/src/pages/mod.rs b/frontend/src/pages/mod.rs
index a57aa4ff..57003d61 100644
--- a/frontend/src/pages/mod.rs
+++ b/frontend/src/pages/mod.rs
@@ -1,22 +1,19 @@
-pub mod about;
-pub mod contests;
-pub mod error_fallback;
-pub mod home;
-pub mod internal_server_error;
-pub mod login;
-pub mod main;
-pub mod not_found;
-pub mod problem;
-pub mod problems;
-pub mod submission;
-pub use about::About;
-pub use contests::Contests;
-pub use error_fallback::ErrorFallback;
-pub use home::Home;
-pub use internal_server_error::InternalServerError;
-pub use login::Login;
-pub use main::Main;
-pub use not_found::NotFound;
-pub use problem::Problem;
-pub use problems::Problems;
-pub use submission::Submission;
+mod about;
+mod contests;
+mod create;
+mod home;
+mod login;
+mod pages;
+mod problem;
+mod problems;
+mod rank;
+mod submission;
+use about::About;
+use contests::Contests;
+use home::Home;
+use login::Login;
+pub use pages::Pages;
+use problem::Problem;
+use problems::Problems;
+use rank::Rank;
+use submission::Submission;
diff --git a/frontend/src/pages/pages.rs b/frontend/src/pages/pages.rs
index 1d880998..df625da4 100644
--- a/frontend/src/pages/pages.rs
+++ b/frontend/src/pages/pages.rs
@@ -2,32 +2,32 @@ use leptos::*;
 use leptos_router::*;
 use leptos_use::*;
 
-use crate::{components::*, pages::*, session::use_token};
+use crate::{components::*, errors::NotFound, pages::*, session::use_token};
 
 #[component]
-pub fn Main() -> impl IntoView {
+pub fn Pages() -> impl IntoView {
     let token = use_token();
+
     view! {
-        <div class="bg-slate-950 w-full min-h-screen flex flex-col text-text">
-            <Navbar/>
-            <Routes>
-                <Route path="" view=Home/>
-                <Route path="/problems" view=Problems/>
-                <Route path="/submissions" view=Submission/>
-                <Route path="/problem/:id" view=Problem/>
-                <Route path="/contests" view=Contests/>
-                <Route path="/about" view=About/>
+        <Routes>
+            <Route path="" view=Home/>
+            <Route path="/problems" view=Problems/>
+            <Route path="/submissions" view=Submission/>
+            <Route path="/problem/:id" view=Problem/>
+            <Route path="/contests" view=Contests/>
+            <Route path="/about" view=About/>
+            <Route path="/rank" view=Rank/>
 
-                <ProtectedRoute
-                    path="/login"
-                    redirect_path="/"
-                    condition=is_none(token)
-                    view=Login
-                />
+            <ProtectedRoute path="/login" redirect_path="/" condition=is_none(token) view=Login/>
+            <ProtectedRoute
+                path="/create/problem"
+                redirect_path="/login"
+                condition=is_some(token)
+                view=create::Problem
+            />
 
-                <Route path="/*any" view=NotFound/>
-            </Routes>
-            <Footer/>
-        </div>
+            // Fallback
+            <Route path="/*any" view=NotFound/>
+        </Routes>
     }
 }
diff --git a/frontend/src/pages/problem.rs b/frontend/src/pages/problem.rs
index 9683d447..453ee4d4 100644
--- a/frontend/src/pages/problem.rs
+++ b/frontend/src/pages/problem.rs
@@ -1,3 +1,4 @@
+use ::grpc::backend::Id;
 use leptos::*;
 use leptos_router::*;
 use leptos_use::*;
@@ -6,8 +7,8 @@ use uuid::Uuid;
 use crate::{
     components::{editor::get_editor_code, *},
     config::*,
-    error::*,
-    grpc::{self, problem_set_client, submit_set_client, WithToken},
+    errors::*,
+    grpc,
     pages::*,
     session::use_token,
 };
@@ -20,169 +21,95 @@ struct ProblemParams {
 #[component]
 pub fn Problem() -> impl IntoView {
     let params = use_params::<ProblemParams>();
-    let id = move || {
-        params.with(|params| {
-            params
-                .as_ref()
-                .map(|v| v.id)
-                .map_err(|_| ErrorKind::NotFound)
-        })
-    };
-    let token = use_token();
-    let id_and_token = move || (id(), token());
-
-    let problem_info =
-        create_resource(id_and_token, |(id, token)| async move {
-            let id = id?;
-            let mut client = problem_set_client::ProblemSetClient::new(
-                grpc::new_client().await?,
-            );
-            let resp = client
-                .full_info(grpc::ProblemId { id }.with_optional_token(token))
-                .await?
-                .into_inner();
-            Result::<_>::Ok(resp)
-        });
-
-    let submit_langs =
-        create_resource(id_and_token, |(_id, token)| async move {
-            let mut client = submit_set_client::SubmitSetClient::new(
-                grpc::new_client().await?,
-            );
-            let resp = client
-                .list_langs(().with_optional_token(token))
-                .await?
-                .into_inner();
-            Result::<_>::Ok(resp)
-        });
-
-    let submit = create_action(|(lang_uuid, id): &(String, Result<i32>)| {
-        let lang_uuid = lang_uuid.clone();
-        let code = get_editor_code().unwrap_or_default();
-        let id = id.clone();
-
-        let token = use_token();
-        let navigate = use_navigate();
-        async move {
-            let mut client = submit_set_client::SubmitSetClient::new(
-                grpc::new_client().await?,
-            );
-            let submit_id = client
-                .create(
-                    grpc::CreateSubmitRequest {
-                        lang: lang_uuid,
-                        problem_id: grpc::ProblemId { id: id? },
-                        code: code.into_bytes(),
-                        request_id: Uuid::new_v4().simple().to_string(),
-                    }
-                    .with_optional_token(token()),
-                )
-                .await?
-                .into_inner();
-            navigate(&format!("/submit/{}", submit_id.id), Default::default());
-            Result::<_>::Ok(())
-        }
-    });
-
-    let select_lang = create_rw_signal("".to_owned());
-    let code = create_rw_signal("".to_owned());
-
-    let token = use_token();
-    let disabled =
-        Signal::derive(move || select_lang().is_empty() || submit.pending()());
 
     view! {
-        <Suspense fallback=|| {
-            view! { <p>loading</p> }
-        }>
-            <ErrorBoundary fallback=error_fallback>
-                <main class="grow grid grid-cols-5 grid-flow-row gap-4 m-4">
-                    <div
-                        class="h-full bg-lighten p-3 rounded"
-                        class=("col-span-3", is_some(token))
-                        class=("col-span-5", is_none(token))
-                    >
-                        <ul class="flex flex-row space-x-4 p-2 pt-0 mb-2 border-b-2 border-accent">
-                            <li>Description</li>
-                            <li>Solution</li>
-                            <li>Discussion</li>
-                            <li>Submission</li>
-                        </ul>
-                        {move || {
-                            problem_info
-                                .get()
-                                .map(|info| {
-                                    info.map(|info| {
-                                        view! {
-                                            <h1 class="text-2xl my-2">{info.info.title}</h1>
-
-                                            <Markdown content=info.content/>
-
-                                            <hr class="border-t-2 border-accent mx-1"/>
-
-                                            <ul class="flex flex-row justify-center space-x-4 p-1">
-                                                <li>Memory : {info.memory}</li>
-                                                <div class="h-auto border-l-2 border-accent"></div>
-                                                <li>Time : {info.time}</li>
-                                                <div class="h-auto border-l-2 border-accent"></div>
-                                                <li>Difficulty : {info.difficulty}</li>
-                                            </ul>
-                                        }
-                                    })
-                                })
-                        }}
-
-                    </div>
-                    <form
-                        class="flex flex-col h-full col-span-2 bg-lighten p-3 rounded"
-                        class=("hidden", is_none(token))
-                        on:submit=move |e| {
-                            e.prevent_default();
-                            submit.dispatch((select_lang(), id()));
-                        }
-                    >
-
-                        <ul class="flex flex-row justify-between p-2 pt-0 mb-2 border-b-2 border-accent">
-                            <li>Code</li>
-                            <li>
-                                <Select value=select_lang placeholder="Language">
-                                    {move || {
-                                        submit_langs
-                                            .get()
-                                            .map(|langs| {
-                                                langs
-                                                    .map(|langs| {
-                                                        langs
-                                                            .list
-                                                            .into_iter()
-                                                            .map(|lang| {
-                                                                view! {
-                                                                    <SelectOption value=lang
-                                                                        .lang_uid>{lang.lang_name}</SelectOption>
-                                                                }
-                                                            })
-                                                            .collect_view()
-                                                    })
-                                            })
-                                    }}
-
-                                </Select>
-                            </li>
-                        </ul>
-                        // <textarea
-                        // class="w-full grow overflow-auto mb-4 bg-background outline-none"
-                        // on:input=move |e| code.set(event_target_value(&e))
-                        // ></textarea>
-                        <Editor language=select_lang/>
-                        <Button class="mt-auto" kind="submit" disabled>
-                            Submit
-                        </Button>
-
-                        // error report
-                        {submit.value()}
-                    </form>
-                </main>
-            </ErrorBoundary>
-        </Suspense>
+        // <Suspense fallback=|| {
+        //     view! { <p>loading</p> }
+        // }>
+        //     <ErrorFallback>
+        //         <main class="grow grid grid-cols-5 grid-flow-row gap-4 m-4">
+        //             <div
+        //                 class="h-full bg-lighten p-3 rounded"
+        //                 class=("col-span-3", is_some(token))
+        //                 class=("col-span-5", is_none(token))
+        //             >
+        //                 <ul class="flex flex-row space-x-4 p-2 pt-0 mb-2 border-b-2 border-accent">
+        //                     <li>Description</li>
+        //                     <li>Solution</li>
+        //                     <li>Discussion</li>
+        //                     <li>Submission</li>
+        //                 </ul>
+        //                 {move || {
+        //                     problem_info
+        //                         .get()
+        //                         .map(|info| {
+        //                             info.map(|info| {
+        //                                 view! {
+        //                                     <h1 class="text-2xl my-2">{info.info.title}</h1>
+
+        //                                     <Markdown content=info.content/>
+
+        //                                     <hr class="border-t-2 border-accent mx-1"/>
+
+        //                                     <ul class="flex flex-row justify-center space-x-4 p-1">
+        //                                         <li>Memory : {info.memory}</li>
+        //                                         <div class="h-auto border-l-2 border-accent"></div>
+        //                                         <li>Time : {info.time}</li>
+        //                                         <div class="h-auto border-l-2 border-accent"></div>
+        //                                         <li>Difficulty : {info.difficulty}</li>
+        //                                     </ul>
+        //                                 }
+        //                             })
+        //                         })
+        //                 }}
+
+        //             </div>
+        //             <form
+        //                 class="flex flex-col h-full col-span-2 bg-lighten p-3 rounded"
+        //                 class=("hidden", is_none(token))
+        //                 on:submit=move |e| {
+        //                     e.prevent_default();
+        //                     submit.dispatch((select_lang(), id()));
+        //                 }
+        //             >
+
+        //                 <ul class="flex flex-row justify-between p-2 pt-0 mb-2 border-b-2 border-accent">
+        //                     <li>Code</li>
+        //                     <li>
+        //                         <Select value=select_lang placeholder="Language">
+        //                             {move || {
+        //                                 submit_langs
+        //                                     .get()
+        //                                     .map(|langs| {
+        //                                         langs
+        //                                             .map(|langs| {
+        //                                                 langs
+        //                                                     .list
+        //                                                     .into_iter()
+        //                                                     .map(|lang| {
+        //                                                         view! {
+        //                                                             <SelectOption value=lang
+        //                                                                 .lang_uid>{lang.lang_name}</SelectOption>
+        //                                                         }
+        //                                                     })
+        //                                                     .collect_view()
+        //                                             })
+        //                                     })
+        //                             }}
+
+        //                         </Select>
+        //                     </li>
+        //                 </ul>
+        //                 <Editor language=select_lang/>
+        //                 <Button class="mt-auto" kind="submit" disabled>
+        //                     Submit
+        //                 </Button>
+
+        //                 // error report
+        //                 {submit.value()}
+        //             </form>
+        //         </main>
+        //     </ErrorFallback>
+        // </Suspense>
     }
 }
diff --git a/frontend/src/pages/problems.rs b/frontend/src/pages/problems.rs
index 9160f515..1d57600d 100644
--- a/frontend/src/pages/problems.rs
+++ b/frontend/src/pages/problems.rs
@@ -2,21 +2,14 @@ use leptos::*;
 use leptos_router::*;
 use serde::{Deserialize, Serialize};
 
-use crate::{
-    components::*,
-    error::*,
-    grpc::{problem_set_client::*, *},
-    pages::{error_fallback, problems::toggle::Toggle},
-    session::use_token,
-};
+use crate::{components::*, errors::*, session::use_token};
 const PAGESIZE: u64 = 10;
 #[component]
 pub fn Problems() -> impl IntoView {
     view! {
-        <div class="h-full container container-lg items-center justify-between text-lg">
-            // <ErrorBoundary fallback=error_fallback>
-            //
-            // </ErrorBoundary>
+        <div class="h-full container container-lg items-center justify-between text-lg">// <ErrorBoundary fallback=error_fallback>
+        //
+        // </ErrorBoundary>
         </div>
     }
 }
diff --git a/frontend/src/pages/rank.rs b/frontend/src/pages/rank.rs
index a0f87cea..9d031a3e 100644
--- a/frontend/src/pages/rank.rs
+++ b/frontend/src/pages/rank.rs
@@ -1,6 +1,6 @@
 use leptos::*;
 
 #[component]
-pub fn About() -> impl IntoView {
-    view! { <h1>About</h1> }
+pub fn Rank() -> impl IntoView {
+    view! { <h1>Rank</h1> }
 }