commit to work on laptop.

src/api/playlists.rs

@@ -1,4 +1,5 @@
 use leptos::*;
+use crate::models::Playlist;
 
 use cfg_if::cfg_if;
 
@@ -26,7 +27,6 @@ cfg_if! {
 pub async fn create_playlist(playlist_name: String)->Result<(), ServerFnError> {
     use crate::schema::playlists::dsl::*;
     use leptos::server_fn::error::NoCustomError;
-    use crate::models::Playlist;
 
     let auth_session = extract::<AuthSession<AuthBackend>>().await
 		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
@@ -47,3 +47,27 @@ pub async fn create_playlist(playlist_name: String)->Result<(), ServerFnError> {
     Ok(())
 }
 
+/// Get all playlists for the current user
+/// 
+/// # Returns
+/// 
+/// * `Result<Vec<Playlist>, ServerFnError>` - A vector of playlists if successful, or an error
+/// 
+#[server(endpoint = "playlists/get-playlists")]
+pub async fn get_playlists() -> Result<Vec<Playlist>, ServerFnError> {
+    use crate::schema::playlists::dsl::*;
+    use leptos::server_fn::error::NoCustomError;
+
+    let auth_session = extract::<AuthSession<AuthBackend>>().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
+
+    let other_user_id = auth_session.user.unwrap().id.expect("User has no id");
+
+    let db_con = &mut get_db_conn();
+    let results = playlists
+        .filter(user_id.eq(other_user_id))
+        .load::<Playlist>(db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting playlists: {}", e)))?;
+
+    Ok(results)
+}

src/app.rs

@@ -71,6 +71,7 @@ fn HomePage() -> impl IntoView {
                 log!("User is not logged in");
                 set_logged_in.update(|value| *value = false);
             }
+            
         });
     });
 

src/components/sidebar.rs

@@ -2,6 +2,7 @@ use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
 use crate::api::playlists::create_playlist;
+use crate::api::playlists::get_playlists;
 
 #[component]
 pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
@@ -36,7 +37,21 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl Into
 #[component]
 pub fn Bottom() -> impl IntoView {
     let (create_playlist_open, set_create_playlist_open) = create_signal(false);
+    let (playlists, set_playlists) = create_signal(vec![]);
 
+    create_effect(move |_| {
+        spawn_local(async move {
+            let playlists = get_playlists().await;
+            if let Err(err) = playlists {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error getting playlists: {:?}", err);
+            } else {
+                log!("Playlists: {:?}", playlists);
+                set_playlists.update(|value| *value = playlists.unwrap());
+            }
+        })
+    });
+    
     view! {
         <div class="sidebar-bottom-container">
             <div class="heading">
@@ -49,6 +64,16 @@ pub fn Bottom() -> impl IntoView {
                 </button>
             </div>
             <CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
+            <ul class="playlists">
+                {
+                    move || playlists.get().iter().map(|playlist| view! {
+                        <div class="playlist">
+                            <h1 class="name">{playlist.name.clone()}</h1>
+                        </div>
+                    }).collect::<Vec<_>>()
+                }
+            </ul>
+            
         </div>
     }
 }
@@ -60,7 +85,6 @@ pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> imp
 
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
         ev.prevent_default();
-
         let new_playlist_name = playlist_name.get();
         spawn_local(async move {
             let create_result = create_playlist(new_playlist_name).await;
@@ -69,9 +93,9 @@ pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> imp
                 log!("Error creating playlist: {:?}", err);
             } else {
                 log!("Playlist created successfully!");
+                closer.update(|value| *value = false);
             }
         })
-
     }; 
 
     view! {

style/sidebar.scss

@@ -154,4 +154,33 @@
       }
     }
   }
+  .playlists {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    margin-top: 5px;
+    height: 100%;
+    
+    .playlist {
+      padding: 0;
+      margin: 0;
+      margin-top: 5px;
+      display: flex;
+      flex-direction: row;
+      border: 1px solid grey;
+      height: 3rem;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      .name {
+        font-size: 1rem;
+        margin-left: 1rem;
+        margin-top: 0.5rem;
+        color: white;
+      }
+    }
+    .playlist:hover {
+      background-color: #adadad36;
+    }
+  }
 }