Merge pull request #31 from michaelcardoza/main

refactor: fetch api contributors

Author: Phosphorus-M

Cargo.toml

@@ -9,6 +9,8 @@ leptos_meta = { version = "0.5.0-beta", features = ["csr", "nightly"] }
 leptos_router = { version = "0.5.0-beta", features = ["csr", "nightly"] }
 log = "0.4"
 gloo-net = { version = "0.2", features = ["http"] }
+reqwasm = "0.5"
+serde = { version = "1", features = ["derive"] }
 
 # dependecies for client (enable when csr or hydrate set)
 wasm-bindgen = { version = "0.2" }

src/components/cards/contributor_card.rs

@@ -4,10 +4,10 @@ use crate::components::icons::github_icon::GithubIcon;
 
 #[component]
 pub fn ContributorCard(
-    #[prop(into)] name: &'static str,
-    #[prop(into)] description: &'static str,
-    #[prop(into)] link: &'static str,
-    #[prop(into)] brand_src: &'static str,
+    #[prop(into)] name: String,
+    #[prop(into)] description: String,
+    #[prop(into)] link: String,
+    #[prop(into)] brand_src: String,
 ) -> impl IntoView {
     view! {
         <article>
@@ -17,8 +17,8 @@ pub fn ContributorCard(
                 class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between h-full"
             >
                 <div class="flex flex-col gap-y-2">
-                    <img src=brand_src width="60" class="rounded-full mb-4" alt=name/>
-                    <h2 class="font-work-sans text-black text-xl">{name}</h2>
+                    <img src=brand_src width="60" class="rounded-full mb-4" alt=name.clone()/>
+                    <h2 class="font-work-sans text-black text-xl">{name.clone()}</h2>
                     <p class="font-work-sans text-black">{description}</p>
                 </div>
                 <span class="ml-auto">

src/components/header.rs

@@ -1,4 +1,5 @@
 use leptos::*;
+use leptos_router::*;
 
 use crate::components::button_link::ButtonLink;
 
@@ -10,13 +11,13 @@ pub fn Header() -> impl IntoView {
         <header class="border-b border-b-black/20">
             <div class="container mx-auto px-4 flex items-center justify-between flex-col lg:flex-row">
                 <div class="flex justify-between w-full lg:w-auto">
-                    <a href="/" class="flex items-center gap-x-4">
+                    <A href="" exact=true class="flex items-center gap-x-4">
                         <img
                             src="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
                             class="max-h-20 rounded-full"
                             alt="Rust Lang en Español"
                         />
-                    </a>
+                    </A>
                     <button
                         class="lg:hidden"
                         on:click=move |_| { set_is_open.update(|n| *n = !*n) }
@@ -37,7 +38,7 @@ pub fn Header() -> impl IntoView {
                             </a>
                         </li>
                         <li>
-                            <a href="/colaboradores">"Colaboradores"</a>
+                            <A href="/colaboradores">"Colaboradores"</A>
                         </li>
                         <li>
                             <a href="#">"Blog"</a>

src/pages/contributors.rs

@@ -1,54 +1,50 @@
-use leptos::*;
+use leptos::{error::Result, *};
+use serde::{Deserialize, Serialize};
 
 use crate::components::{cards::contributor_card::ContributorCard, footer::Footer, header::Header};
 
-struct ContributorItem {
-    name: &'static str,
-    description: &'static str,
-    link: &'static str,
-    brand_src: &'static str,
+#[derive(Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Contributor {
+    login: String,
+    avatar_url: String,
+    html_url: String,
+}
+
+async fn fetch_contributors() -> Result<Vec<Contributor>> {
+    let response = reqwasm::http::Request::get(
+        "https://api.github.com/repos/RustLangES/rustlanges.github.io/contributors",
+    )
+    .send()
+    .await?
+    .json::<Vec<Contributor>>()
+    .await?
+    .into_iter()
+    .collect();
+    Ok(response)
 }
 
 #[component]
 pub fn Contributors() -> impl IntoView {
-    let contributors: Vec<ContributorItem> = vec![
-        ContributorItem {
-            name: "Phosphorus Moscu",
-            description: "Student in Computer Science degree at Universidad Nacional del Oeste | Developer Consultant at Globant",
-            link: "https://github.com/Phosphorus-M",
-            brand_src: "https://avatars.githubusercontent.com/u/19656993?v=4",
-        },
-        ContributorItem {
-            name: "Sergio Alejandro Ribera Costa",
-            description: "Enthusiastic developer Linux and Open Source lover",
-            link: "https://github.com/SergioRibera",
-            brand_src: "https://avatars.githubusercontent.com/u/56278796?v=4",
-        },
-        ContributorItem {
-            name: "Michael Cardoza",
-            description: "Software Developer",
-            link: "https://github.com/michaelcardoza",
-            brand_src: "https://avatars.githubusercontent.com/u/8800455?v=4",
-        },
-        ContributorItem {
-            name: "Emilio Ruscitti",
-            description: "Rust Dev",
-            link: "https://github.com/Lemin-n",
-            brand_src: "https://avatars.githubusercontent.com/u/88170949?v=4",
-        },
-        ContributorItem {
-            name: "carbon based lifeform",
-            description: "Rust Dev",
-            link: "https://github.com/ph4un00b",
-            brand_src: "https://avatars.githubusercontent.com/u/1057021?v=4",
-        },
-        ContributorItem {
-            name: "CrawKatt",
-            description: "Aprendiz de Rust, estudiante de AIEP, Chileno",
-            link: "https://github.com/CrawKatt",
-            brand_src: "https://avatars.githubusercontent.com/u/108593932?v=4",
-        },
-    ];
+    let contributors_results = create_local_resource(move || (), |_| fetch_contributors());
+
+    let contributors_view = move || {
+        let data = contributors_results.read();
+        let Some(Ok(items)) = data else { return None };
+        let result = items
+            .iter()
+            .map(|item| {
+                view! {
+                    <ContributorCard
+                        name=item.login.clone()
+                        description=""
+                        link=item.html_url.clone()
+                        brand_src=item.avatar_url.clone()
+                    />
+                }
+            })
+            .collect::<Fragment>();
+        Some(result.into_view())
+    };
 
     view! {
         <div>
@@ -61,19 +57,7 @@ pub fn Contributors() -> impl IntoView {
                             <span class="font-alfa-slab text-orange-500">"Colaboradores"</span>
                         </h2>
                         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-5 gap-6">
-                            {contributors
-                                .into_iter()
-                                .map(|contributor| {
-                                    view! {
-                                        <ContributorCard
-                                            name=contributor.name
-                                            description=contributor.description
-                                            link=contributor.link
-                                            brand_src=contributor.brand_src
-                                        />
-                                    }
-                                })
-                                .collect::<Vec<_>>()}
+                            {contributors_view}
                         </div>
                     </div>
                 </section>