switch to mongodb, add drag&drop

frontend/src/components/base_page.rs

@@ -0,0 +1,97 @@
+use crate::hooks::use_user_context;
+use crate::Route;
+use ybc::NavbarFixed::Top;
+use yew::prelude::*;
+use yew_hooks::prelude::*;
+use yew_router::prelude::*;
+
+#[derive(PartialEq, Properties)]
+pub struct Props {
+    pub children: Children,
+}
+
+#[function_component]
+pub fn BasePage(props: &Props) -> Html {
+    let navigator = use_navigator().unwrap();
+    let user_ctx = use_user_context();
+
+    let node = use_node_ref();
+    let size = use_size(node.clone());
+
+    let authenticated = user_ctx.is_authenticated();
+    let title = if authenticated {
+        html! {"Photos"}
+    } else {
+        html! {"No photos"}
+    };
+
+    let navbrand = html! {
+        <ybc::NavbarItem>
+            <ybc::Title
+                classes={classes!("has-text-white")}
+                size={ybc::HeaderSize::Is4}>
+                {title}
+            </ybc::Title>
+        </ybc::NavbarItem>
+    };
+
+    let account_button = if authenticated {
+        let onclick = {
+            Callback::from(move |_| {
+                user_ctx.logout();
+            })
+        };
+        html! {
+            <ybc::ButtonAnchor
+                classes={classes!("is-outlined")}
+                rel={String::from("noopener noreferrer")}
+                target={String::from("_blank")}
+                href=""
+                {onclick}>
+                {"logout"}
+            </ybc::ButtonAnchor>
+        }
+    } else {
+        let onclick = Callback::from(move |_| navigator.push(&Route::Login));
+        html! {
+            <ybc::Button
+                // classes={classes!("is-outlined")}
+                {onclick}>
+                {"login"}
+            </ybc::Button>
+        }
+    };
+
+    let navstart = html! {};
+    let navend = html! {
+        <>
+        // <ybc::NavbarItem>
+        //     <ybc::Button
+        //         // classes={classes!("is-outlined")}
+        //     >
+        //         {"Photos"}
+        //     </ybc::Button>
+        // </ybc::NavbarItem>
+        <ybc::NavbarItem>
+            {account_button}
+        </ybc::NavbarItem>
+        </>
+    };
+
+    html! {
+        <>
+            <ybc::Navbar
+                fixed={Top}
+                classes={classes!("is-info")}
+                padded={true}
+                {navbrand}
+                {navstart}
+                {navend}
+            />
+
+            <div>
+            { props.children.clone() }
+            </div>
+        </>
+    }
+}