add links

src/routes/link.rs

@@ -1,23 +1,108 @@
 use leptos::*;
 //use leptos_meta::*;
-//use leptos_router::*;
+use leptos_router::*;
+
+#[server(GetLinksAction, "/api", "GetJson")]
+#[tracing::instrument]
+pub async fn get_links() -> Result<Vec<crate::models::Link>, ServerFnError> {
+    crate::models::Link::get_all().await.map_err(|x| {
+        let err = format!("Error while posting a link: {x:?}");
+        tracing::error!("{err}");
+        ServerFnError::ServerError("Could not post a link, try again later".into())
+    })
+}
+
+#[server(LinkAction, "/api")]
+pub async fn add_value(name: String, link: String) -> Result<(), ServerFnError> {
+    crate::models::Link::insert(name, link)
+        .await
+        .map(|_| ())
+        .map_err(|x| {
+            let err = format!("Error while posting a comment: {x:?}");
+            tracing::error!("{err}");
+            ServerFnError::ServerError("Could not post a comment, try again later".into())
+        })
+}
 
 #[component]
 pub fn Links() -> impl IntoView {
+    let (show, set_show) = create_signal(false);
+    let link_action = create_server_action::<LinkAction>();
+    let result = link_action.version();
+    let reset_form = create_rw_signal("");
+    let links = create_resource(
+        move || (result.get()),
+        move |_| async move {
+            reset_form.set("");
+            set_show.set(false);
+            get_links().await
+        },
+    );
+
+    let form = move || {
+        show.get().then(|| {
+            view! { <div class="my-0 mx-auto w-72 text-center">
+                <h2 class="p-6 text-4xl">"Ajout d'un lien"</h2>
+                <ActionForm action=link_action attr:class="border border-lime-500">
+                <div>
+                    <label class="block mt-3 mb-1">"Nom"</label>
+                    <input type="text"
+                           name="name"
+                           prop:value=move || reset_form.get()
+                           class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
+                </div>
+
+                <div>
+                    <label class="block mt-3 mb-1">"Lien"</label>
+                    <input type="url"
+                           name="link"
+                           prop:value=move || reset_form.get()
+                           class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
+                </div>
+                <div>
+                    <button type="submit" class="bg-lime-500 hover:bg-lime-400 text-black px-2 py-1 w-60 my-5">"Valider"</button>
+                </div>
+            </ActionForm>
+            </div> }
+        })
+    };
+
     view! {
         <ul class="flex gap-5 mt-5 justify-center">
-            <Link link="aa".to_string() name="Mon Lien".to_string() />
-            <Link link="aa".to_string() name="mon lien 2".to_string() />
-            <Link link="aa".to_string() name="mon lien 3".to_string() />
+            <Suspense fallback=move || view! {<p>"Loading Comments from the article"</p> }>
+                <ErrorBoundary fallback=|_| {
+                    view! { <p class="error-messages text-xs-center">"Something went wrong."</p>}
+                }>
+                    {move || links.get().map(move |x| x.map(move |c| {
+                        view! {
+                            <For each=move || c.clone().into_iter().enumerate()
+                                key=|(i, _)| *i
+                                children=move |(_, link)| {
+                                    let link = create_rw_signal(link);
+                                    view!{<Link link />}
+                                }/>
+                        }
+                    }))}
+                </ErrorBoundary>
+            </Suspense>
         </ul>
+
+        <div>
+            <button on:click=move |_| {set_show.set(true)}>"Add"</button>
+            {form}
+        </div>
     }
 }
 
 #[component]
-fn Link(link: String, name: String) -> impl IntoView {
+fn Link(link: RwSignal<crate::models::Link>) -> impl IntoView {
     view! {
         <li>
-            <a class="border border-lime-500 bg-lime-500 hover:bg-lime-400 text-black px-3 py-2 inline-block" href=link>{name}</a>
+            <a class="border border-lime-500 bg-lime-500 hover:bg-lime-400 text-black px-3 py-2 inline-block"
+                target="_blank"
+                href={move || link.with(|x| x.link.to_string())}>
+                {move || link.with(|x| x.name.to_string())}
+            </a>
         </li>
     }
 }