From 8d704ac6bdf5fda463dde8c7f522e9ac515ef5e6 Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Thu, 18 Apr 2024 12:08:01 -0400
Subject: [PATCH] seperated playlist component into different files

---
 src/app.rs                        |   2 +-
 src/components.rs                 |   5 +-
 src/components/create_playlist.rs |  44 +++++
 src/components/playlist.rs        |  25 +++
 src/components/playlists.rs       |  51 +++++
 src/components/sidebar.rs         | 114 ++----------
 style/sidebar.scss                | 300 +++++++++++++++---------------
 7 files changed, 289 insertions(+), 252 deletions(-)
 create mode 100644 src/components/create_playlist.rs
 create mode 100644 src/components/playlist.rs
 create mode 100644 src/components/playlists.rs

diff --git a/src/app.rs b/src/app.rs
index 5cbe864..f8d0d61 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -77,7 +77,7 @@ fn HomePage() -> impl IntoView {
 
     view! {
         <div class="home-container">
-            <Sidebar setter=set_dashboard_open active=dashboard_open />
+            <Sidebar setter=set_dashboard_open active=dashboard_open logged_in=logged_in/>
             <Show
                 when=move || {dashboard_open() == true}
                 fallback=move || view! { <Search /> }
diff --git a/src/components.rs b/src/components.rs
index 4d0c8a5..8894722 100644
--- a/src/components.rs
+++ b/src/components.rs
@@ -1,4 +1,7 @@
 pub mod sidebar;
 pub mod dashboard;
 pub mod search;
-pub mod personal;
\ No newline at end of file
+pub mod personal;
+pub mod playlist;
+pub mod create_playlist;
+pub mod playlists;
\ No newline at end of file
diff --git a/src/components/create_playlist.rs b/src/components/create_playlist.rs
new file mode 100644
index 0000000..4c46e02
--- /dev/null
+++ b/src/components/create_playlist.rs
@@ -0,0 +1,44 @@
+use leptos::*;
+use leptos_icons::*;
+use leptos::leptos_dom::*;
+use crate::api::playlists::create_playlist;
+
+#[component]
+pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
+
+    let (playlist_name, set_playlist_name) = create_signal("".to_string());
+
+    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;
+            if let Err(err) = create_result {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error creating playlist: {:?}", err);
+            } else {
+                log!("Playlist created successfully!");
+                closer.update(|value| *value = false);
+            }
+        })
+    }; 
+
+    view! {
+        <div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
+            <div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
+                <Icon icon=icondata::IoCloseSharp />
+            </div>
+            <h1 class="header">Create Playlist</h1>    
+            <form class="create-playlist-form" action="POST" on:submit=on_submit>
+                <input class="name-input"  type="text" placeholder="Playlist Name" 
+                    on:input=move |ev| {
+                        set_playlist_name(event_target_value(&ev));
+                        log!("playlist name changed to: {}", playlist_name.get());
+                    }
+                    prop:value=playlist_name
+                />
+                <button class="create-button" type="submit">Create</button>
+            </form>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/components/playlist.rs b/src/components/playlist.rs
new file mode 100644
index 0000000..9ae9c61
--- /dev/null
+++ b/src/components/playlist.rs
@@ -0,0 +1,25 @@
+use leptos::*;
+use leptos_icons::*;
+use crate::models::Playlist;
+
+#[component]
+pub fn Playlist(playlist: Playlist) -> impl IntoView {
+    let (show_playlist, set_show_playlist) = create_signal(false);
+
+    view! {
+        <div class="playlist" on:click=move|_| set_show_playlist.update(|value| *value=true) >
+            <h1 class="name">{playlist.name.clone()}</h1>
+            <Show
+                when=move || show_playlist()
+                fallback=move || view! {<div></div>}
+            >
+                <div class="playlist-container">
+                    <div class="close-button" on:click=move |_| set_show_playlist.update(|value| *value = false)>
+                        <Icon icon=icondata::IoCloseSharp />
+                    </div>
+                    <h1>{playlist.name.clone()}</h1>
+                </div>
+            </Show>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/components/playlists.rs b/src/components/playlists.rs
new file mode 100644
index 0000000..6082b73
--- /dev/null
+++ b/src/components/playlists.rs
@@ -0,0 +1,51 @@
+use leptos::*;
+use leptos::leptos_dom::*;
+use leptos_icons::*;
+use crate::components::create_playlist::CreatePlayList;
+use crate::components::playlist::Playlist;
+use crate::api::playlists::get_playlists;
+
+#[component]
+pub fn Playlists() -> 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-playlists-container">
+            <div class="heading">
+                <h1 class="header">Playlists</h1>
+                <button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
+                    <div class="add-sign">
+                        <Icon icon=icondata::IoAddSharp />
+                    </div>
+                    New Playlist
+                </button>
+            </div>
+            <CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
+            <ul class="playlists">
+                {
+                    move || playlists.get().iter().enumerate().map(|(index,playlist)| view! {
+                       <Playlist playlist=playlist.clone() />
+                    }).collect::<Vec<_>>()
+                }
+            </ul>
+            
+        </div>
+    }
+}
+
+
+
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index 50c90db..d79d3a5 100644
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@@ -1,12 +1,11 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::api::playlists::create_playlist;
-use crate::api::playlists::get_playlists;
-use crate::models::Playlist;
+use crate::components::playlists::Playlists;
+
 
 #[component]
-pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
+pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>, logged_in:ReadSignal<bool>) -> impl IntoView {
     let open_dashboard = move |_| {
         setter.update(|value| *value = true);
         log!("open dashboard");
@@ -29,106 +28,15 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl Into
                     <h1>Search</h1>
                 </div>
             </div>
-            <Bottom />
-
+            <div class="sidebar-bottom-container">
+                <Show 
+                    when=move || {logged_in() == true}
+                    fallback=move|| view!{<h1>LOG IN PLEASE</h1>}
+                >
+                    <Playlists />
+                </Show>
+            </div>
         </div>
     }
 }
 
-#[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">
-                <h1 class="header">Playlists</h1>
-                <button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
-                    <div class="add-sign">
-                        <Icon icon=icondata::IoAddSharp />
-                    </div>
-                    New Playlist
-                </button>
-            </div>
-            <CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
-            <ul class="playlists">
-                {
-                    move || playlists.get().iter().enumerate().map(|(index,playlist)| view! {
-                       <Playlist playlist=playlist.clone() />
-                    }).collect::<Vec<_>>()
-                }
-            </ul>
-            
-        </div>
-    }
-}
-
-#[component]
-pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
-
-    let (playlist_name, set_playlist_name) = create_signal("".to_string());
-
-    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;
-            if let Err(err) = create_result {
-                // Handle the error here, e.g., log it or display to the user
-                log!("Error creating playlist: {:?}", err);
-            } else {
-                log!("Playlist created successfully!");
-                closer.update(|value| *value = false);
-            }
-        })
-    }; 
-
-    view! {
-        <div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
-            <div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
-                <Icon icon=icondata::IoCloseSharp />
-            </div>
-            <h1 class="header">Create Playlist</h1>    
-            <form class="create-playlist-form" action="POST" on:submit=on_submit>
-                <input class="name-input"  type="text" placeholder="Playlist Name" 
-                    on:input=move |ev| {
-                        set_playlist_name(event_target_value(&ev));
-                        log!("playlist name changed to: {}", playlist_name.get());
-                    }
-                    prop:value=playlist_name
-                />
-                <button class="create-button" type="submit">Create</button>
-            </form>
-        </div>
-    }
-}
-#[component]
-pub fn Playlist(playlist: Playlist) -> impl IntoView {
-    let (show_playlist, set_show_playlist) = create_signal(false);
-
-    view! {
-        <div class="playlist" on:click=move|_| set_show_playlist.update(|value| *value=true) >
-            <h1 class="name">{playlist.name.clone()}</h1>
-            <div class="playlist-container" style={move || if show_playlist() {"display: flex"} else {"display: none"}}>
-                <div class="close-button" on:click=move |_| set_show_playlist.update(|value| *value = false)>
-                    <Icon icon=icondata::IoCloseSharp />
-                </div>
-                <h1>{playlist.name.clone()}</h1>
-            </div>
-        </div>
-    }
-}
\ No newline at end of file
diff --git a/style/sidebar.scss b/style/sidebar.scss
index 3528db6..00367f4 100644
--- a/style/sidebar.scss
+++ b/style/sidebar.scss
@@ -51,167 +51,173 @@
   padding: 0.2rem 1rem 1rem 1rem;
   height: calc(100% - 9rem);
 
-  .heading {
-    display: flex;
-    flex-direction: row;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    .header {
-      font-size: 1.2rem;
-      font-weight: 200;
-    }
-
-    .add-playlist {
+  .sidebar-playlists-container {
+    width: 100%;
+    height: 100%;
+  
+    .heading {
       display: flex;
       flex-direction: row;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
       align-items: center;
-      justify-content: center;
-      font-size: 0.9rem;
-      border-radius: 50px;
-      border: none;
-      height: 2.2rem;
-      padding-right: 2rem;
-      padding-left: 2rem;
-      cursor: pointer;
-      transition: background-color 0.3s ease;
-      .add-sign {
-        font-size: 1.5rem;
-        margin-top: auto;
-        margin-right: 5px;
-        color: white;
+  
+      .header {
+        font-size: 1.2rem;
+        font-weight: 200;
       }
-    }
-    .add-playlist:hover {
-      background-color: #9e9e9e;
-    }
-  }
-  .create-playlist-popup-container {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    // background-color: #1c1c1c;
-    height: 12rem;
-    width: 20rem;
-    border-radius: 2px;
-    padding: 1rem;
-    padding-top: 0.1rem;
-    border: 1px solid grey;
-    position: fixed;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    .close-button {
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      border-radius: 50%;
-      font-size: 1.6rem;
-      transition: all 0.3s;
-    }
-    .close-button:hover {
-      transform: scale(1.1);
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .close-button:active {
-      transform: scale(0.8);
-    }
-    .header {
-      font-size: 1.2rem;
-      font-weight: 200;
-      margin-bottom: 0.5rem;
-    }
-    .create-playlist-form {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      height: 100%;
-      .name-input {
-        background: transparent;
+  
+      .add-playlist {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.9rem;
+        border-radius: 50px;
         border: none;
-        border-bottom: 1px solid grey;
-        font-size: 1.1rem;
-        color: white;
-        margin-top: 2rem;
-      }
-      .name-input:focus {
-        outline: none;
-      }
-      .create-button {
-        position: absolute;
-        bottom: 0px;
-        width: 5rem;
-        padding: 0.4rem;
-        border-radius: 0.5rem;
+        height: 2.2rem;
+        padding-right: 2rem;
+        padding-left: 2rem;
         cursor: pointer;
+        transition: background-color 0.3s ease;
+        .add-sign {
+          font-size: 1.5rem;
+          margin-top: auto;
+          margin-right: 5px;
+          color: white;
+        }
+      }
+      .add-playlist:hover {
+        background-color: #9e9e9e;
       }
     }
-  }
-  .playlists {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 5px;
-    height: 100%;
-    
-    .playlist {
+    .create-playlist-popup-container {
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      // background-color: #1c1c1c;
+      height: 12rem;
+      width: 20rem;
+      border-radius: 2px;
+      padding: 1rem;
+      padding-top: 0.1rem;
+      border: 1px solid grey;
+      position: fixed;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .close-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 50%;
+        font-size: 1.6rem;
+        transition: all 0.3s;
+      }
+      .close-button:hover {
+        transform: scale(1.1);
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+  
+      .close-button:active {
+        transform: scale(0.8);
+      }
+      .header {
+        font-size: 1.2rem;
+        font-weight: 200;
+        margin-bottom: 0.5rem;
+      }
+      .create-playlist-form {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        height: 100%;
+        .name-input {
+          background: transparent;
+          border: none;
+          border-bottom: 1px solid grey;
+          font-size: 1.1rem;
+          color: white;
+          margin-top: 2rem;
+        }
+        .name-input:focus {
+          outline: none;
+        }
+        .create-button {
+          position: absolute;
+          bottom: 0px;
+          width: 5rem;
+          padding: 0.4rem;
+          border-radius: 0.5rem;
+          cursor: pointer;
+        }
+      }
+    }
+    .playlists {
+      list-style: none;
       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-container {
-        background-color: red;
-        width: 10rem;
-        height: 10rem;
-        position: fixed;
-        top: 40%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        .close-button {
-          position: absolute;
-          top: 5px;
-          right: 5px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-          border-radius: 50%;
-          font-size: 1.6rem;
-          transition: all 0.3s;
+      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;
         }
-
-        .close-button:hover {
-          transform: scale(1.1);
-          background-color: rgba(255, 255, 255, 0.1);
-        }
-    
-        .close-button:active {
-          transform: scale(0.8);
+        .playlist-container {
+          background-color: red;
+          width: 10rem;
+          height: 10rem;
+          position: fixed;
+          top: 40%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+  
+          .close-button {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border-radius: 50%;
+            font-size: 1.6rem;
+            transition: all 0.3s;
+          }
+  
+          .close-button:hover {
+            transform: scale(1.1);
+            background-color: rgba(255, 255, 255, 0.1);
+          }
+      
+          .close-button:active {
+            transform: scale(0.8);
+          }
         }
       }
-    }
-    .playlist:hover {
-      background-color: #adadad36;
+      .playlist:hover {
+        background-color: #adadad36;
+      }
     }
   }
 }
+