Friend List Styling

.dockerignore

@@ -9,6 +9,3 @@
 !/Cargo.lock
 !/Cargo.toml
 !/ascii_art.txt
-!/flake.nix
-!/flake.lock
-!/rust-toolchain.toml

.gitea/workflows/push.yaml

@@ -7,20 +7,18 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Build project
+        env:
+          RUSTFLAGS: "-D warnings"
         run: cargo-leptos build
 
   docker-build:
-    runs-on: ubuntu-latest-docker
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-        with:
-          endpoint: ${{ env.docker_endpoint }}
       - name: Login to Gitea container registry
         uses: docker/login-action@v3
         with:
@@ -36,22 +34,22 @@ jobs:
         with:
           push: true
           tags: "${{ steps.get-image-name.outputs.IMAGE_NAME }}:${{ gitea.sha }}"
-          cache-to: mode=max
+          cache-from: type=registry,ref=${{ steps.get-image-name.outputs.IMAGE_NAME }}:${{ gitea.sha }}
+          cache-to: type=inline
       - name: Build and push Docker image with "latest" tag
         uses: docker/build-push-action@v5
         if: gitea.ref == 'refs/heads/main'
         with:
           push: true
           tags: "${{ steps.get-image-name.outputs.IMAGE_NAME }}:latest"
-          cache-to: mode=max
+          cache-from: type=registry,ref=${{ steps.get-image-name.outputs.IMAGE_NAME }}:latest
+          cache-to: type=inline
 
   test:
     runs-on: libretunes-cicd
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Test project
         run: cargo test --all-targets --all-features
 
@@ -60,8 +58,6 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Run Leptos tests
         run: cargo-leptos test
 
@@ -70,8 +66,6 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Generate docs
         run: cargo doc --no-deps
       - name: Upload docs
@@ -79,23 +73,3 @@ jobs:
         with:
           name: docs
           path: target/doc
-
-  nix-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Update Package Lists
-        run: apt update
-      - name: Install Nix
-        run: apt install -y nix-bin
-      - name: Restore and cache Nix store
-        uses: nix-community/cache-nix-action@v5
-        with:
-          primary-key: nix-build
-      - name: Build project with Nix
-        run: nix build --experimental-features 'nix-command flakes' git+$GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git?ref=$GITHUB_REF_NAME#default --no-write-lock-file
-
-  env:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Print Environment
-        run: env

.gitignore

@@ -31,7 +31,3 @@ playwright/.cache/
 
 # Sass cache
 .sass-cache
-
-# Nix-related files
-.direnv/
-result/

Cargo.lock

@@ -3444,9 +3444,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21d3b25c3ea1126a2ad5f4f9068483c2af1e64168f847abe863a526b8dbfe00b"
+checksum = "128d1e363af62632b8eb57219c8fd7877144af57558fb2ef0368d0087bddeb2e"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -3455,9 +3455,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52857d4c32e496dc6537646b5b117081e71fd2ff06de792e3577a150627db283"
+checksum = "cb6dd4d3ca0ddffd1dd1c9c04f94b868c37ff5fac97c30b97cff2d74fce3a358"
 dependencies = [
  "bumpalo",
  "log",
@@ -3482,9 +3482,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "920b0ffe069571ebbfc9ddc0b36ba305ef65577c94b06262ed793716a1afd981"
+checksum = "e79384be7f8f5a9dd5d7167216f022090cf1f9ec128e6e6a482a2cb5c5422c56"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -3492,9 +3492,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bf59002391099644be3524e23b781fa43d2be0c5aa0719a18c0731b9d195cab6"
+checksum = "26c6ab57572f7a24a4985830b120de1594465e5d500f24afe89e16b4e833ef68"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3505,9 +3505,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e5047c5392700766601942795a436d7d2599af60dcc3cc1248c9120bfb0827b0"
+checksum = "65fc09f10666a9f147042251e0dda9c18f166ff7de300607007e96bdebc1068d"
 
 [[package]]
 name = "wasm-streams"

Cargo.toml

@@ -15,7 +15,7 @@ leptos = { version = "0.6", default-features = false, features = ["nightly"] }
 leptos_meta = { version = "0.6", features = ["nightly"] }
 leptos_axum = { version = "0.6", optional = true }
 leptos_router = { version = "0.6", features = ["nightly"] }
-wasm-bindgen = { version = "=0.2.96", default-features = false, optional = true }
+wasm-bindgen = { version = "=0.2.95", default-features = false, optional = true }
 leptos_icons = { version = "0.3.0" }
 icondata = { version = "0.3.0" }
 diesel = { version = "2.1.4", features = ["postgres", "r2d2", "chrono"], default-features = false, optional = true }

flake.lock

@@ -1,114 +0,0 @@
-{
-  "nodes": {
-    "cargo-leptos": {
-      "flake": false,
-      "locked": {
-        "lastModified": 1730677835,
-        "narHash": "sha256-Oe65m9io7ihymUjylaWHQM/x7r0y/xXqD313H3oyjN8=",
-        "owner": "leptos-rs",
-        "repo": "cargo-leptos",
-        "rev": "ff6b19a5f9fd4e433774b6a9c57922ea5a1634cc",
-        "type": "github"
-      },
-      "original": {
-        "owner": "leptos-rs",
-        "ref": "v0.2.21",
-        "repo": "cargo-leptos",
-        "type": "github"
-      }
-    },
-    "flake-utils": {
-      "inputs": {
-        "systems": "systems"
-      },
-      "locked": {
-        "lastModified": 1731533236,
-        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1733940404,
-        "narHash": "sha256-Pj39hSoUA86ZePPF/UXiYHHM7hMIkios8TYG29kQT4g=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "5d67ea6b4b63378b9c13be21e2ec9d1afc921713",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "nixpkgs_2": {
-      "locked": {
-        "lastModified": 1728538411,
-        "narHash": "sha256-f0SBJz1eZ2yOuKUr5CA9BHULGXVSn6miBuUWdTyhUhU=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "b69de56fac8c2b6f8fd27f2eca01dcda8e0a4221",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixpkgs-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "root": {
-      "inputs": {
-        "cargo-leptos": "cargo-leptos",
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs",
-        "rust-overlay": "rust-overlay"
-      }
-    },
-    "rust-overlay": {
-      "inputs": {
-        "nixpkgs": "nixpkgs_2"
-      },
-      "locked": {
-        "lastModified": 1734230139,
-        "narHash": "sha256-zsp0Mz8VgyIAnU8UhP/YT1g+zlsl+NIJTBMAbY+RifQ=",
-        "owner": "oxalica",
-        "repo": "rust-overlay",
-        "rev": "150fbc8aa2bc501041810bbc1dbfe73694a861be",
-        "type": "github"
-      },
-      "original": {
-        "owner": "oxalica",
-        "repo": "rust-overlay",
-        "type": "github"
-      }
-    },
-    "systems": {
-      "locked": {
-        "lastModified": 1681028828,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
-        "owner": "nix-systems",
-        "repo": "default",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default",
-        "type": "github"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}

flake.nix

@@ -1,102 +0,0 @@
-{
-  description = "LibreTunes build and development environment";
-
-  inputs = {
-    nixpkgs.url      = "github:NixOS/nixpkgs/nixos-unstable";
-    rust-overlay.url = "github:oxalica/rust-overlay";
-    flake-utils.url  = "github:numtide/flake-utils";
-    cargo-leptos = {
-      url = "github:leptos-rs/cargo-leptos?ref=v0.2.22";
-      flake = false;
-    };
-  };
-
-  outputs = { self, nixpkgs, rust-overlay, flake-utils, cargo-leptos, ... }:
-    flake-utils.lib.eachDefaultSystem (system:
-      let
-        overlays = [ (import rust-overlay) ];
-        pkgs = import nixpkgs {
-          inherit system overlays;
-        };
-
-        # Build a specific version of cargo-leptos
-        cargo-leptos-build = pkgs.rustPlatform.buildRustPackage {
-          name = "cargo-leptos";
-          buildFeatures = ["no_downloads"];
-          src = cargo-leptos; 
-          cargoHash = "sha256-4v6sCTPRxe7bO7uV3HwUC8P1UsG8ydIvZ4rG2kU22zA=";
-
-          nativeBuildInputs = with pkgs; [
-            pkg-config
-            openssl
-          ];
-
-          doCheck = false;
-        };
-
-        buildPkgs = with pkgs; [
-          (rust-bin.fromRustupToolchainFile ./rust-toolchain.toml)
-          cargo-leptos-build
-          clang
-          sass
-          openssl
-          postgresql
-          imagemagick
-          pkg-config
-        ];
-      in
-      {
-        devShells.default = pkgs.mkShell {
-          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
-
-          buildInputs = with pkgs; buildPkgs ++ [
-            diesel-cli
-          ];
-
-          shellHook = ''
-            set -a
-            [[ -f .env ]] && source .env
-            set +a
-          '';
-        };
-
-        packages.default = pkgs.rustPlatform.buildRustPackage {
-          name = "libretunes";
-          src = ./.;
-          
-          cargoLock = {
-            lockFile = ./Cargo.lock;
-          };
-
-          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
-
-          nativeBuildInputs = with pkgs; buildPkgs ++ [
-            makeWrapper
-          ];
-
-          buildInputs = with pkgs; [
-            openssl
-            imagemagick
-          ];
-
-          # TODO enable --release builds
-          # Creates an issue with cargo-leptos trying to create cache directories
-          # See https://github.com/leptos-rs/cargo-leptos/issues/79
-          buildPhase = ''
-            cargo-leptos build --precompress #--release
-          '';
-
-          installPhase = ''
-            mkdir -p $out/bin
-            install -t $out target/debug/libretunes
-            cp -r target/site $out/site
-
-            makeWrapper $out/libretunes $out/bin/libretunes \
-              --set LEPTOS_SITE_ROOT $out/site
-          '';
-
-          doCheck = false;
-        };
-      }
-    );
-}

rust-toolchain.toml

@@ -1,4 +1,3 @@
+
 [toolchain]
 channel = "nightly"
-targets = ["wasm32-unknown-unknown"]
-

src/api/friends.rs

@@ -0,0 +1,227 @@
+use leptos::*;
+use cfg_if::cfg_if;
+use crate::frienddata::FriendData;
+
+cfg_if! {
+	if #[cfg(feature = "ssr")] {
+		use crate::auth::get_user;
+		use server_fn::error::NoCustomError;
+
+		use crate::database::get_db_conn;
+		use diesel::prelude::*;
+		use diesel::dsl::exists;
+		use crate::models::*;
+		use crate::schema::*;
+
+		use chrono::prelude::*;
+	}
+}
+
+/// Get a user's list of friends from the database
+#[server(endpoint = "/profile/friends")]
+pub async fn friends(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friendships::table
+		.filter(friendships::friend_1_id.eq(for_user_id))
+		.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
+		.inner_join(users::table.on(users::id.eq(friendships::friend_2_id)))
+		.select((users::all_columns, friendships::created_at))
+		.order(friendships::created_at.desc())
+		.order(users::username.asc())
+		.union(
+			friendships::table
+			.filter(friendships::friend_2_id.eq(for_user_id))
+			.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
+			.inner_join(users::table.on(users::id.eq(friendships::friend_1_id)))
+			.select((users::all_columns, friendships::created_at))
+			.order(friendships::created_at.desc())
+			.order(users::username.asc())
+		)
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Get a user's list of friend requests (outgoing) from the database
+#[server(endpoint = "/profile/friend-requests-outgoing")]
+pub async fn friend_requests_outgoing(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friend_requests::table
+		.filter(friend_requests::from_id.eq(for_user_id))
+		.filter(friend_requests::from_id.ne(friend_requests::to_id))
+		.inner_join(users::table.on(users::id.eq(friend_requests::to_id)))
+		.select((users::all_columns, friend_requests::created_at))
+		.order(friend_requests::created_at.desc())
+		.order(users::username.asc())
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Get a user's list of friend requests (incoming) from the database
+#[server(endpoint = "/profile/friend-requests-incoming")]
+pub async fn friend_requests_incoming(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friend_requests::table
+		.filter(friend_requests::to_id.eq(for_user_id))
+		.filter(friend_requests::from_id.ne(friend_requests::to_id))
+		.inner_join(users::table.on(users::id.eq(friend_requests::from_id)))
+		.select((users::all_columns, friend_requests::created_at))
+		.order(friend_requests::created_at.desc())
+		.order(users::username.asc())
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Send a friend request
+#[server(endpoint = "/profile/send-friend-request")]
+pub async fn send_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Get current time for request
+	let timestamp: NaiveDateTime = Utc::now().naive_utc();
+
+	// Insert into database (if already exists, won't succeed due to primary key)
+	diesel::insert_into(crate::schema::friend_requests::table)
+		.values((friend_requests::created_at.eq(timestamp),friend_requests::from_id.eq(user.id.unwrap()),friend_requests::to_id.eq(to_user_id)))
+		.execute(&mut db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving friend request to database: {}", e);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+		})?;
+	
+	Ok(())
+}
+
+/// Remove an outgoing friend request
+#[server(endpoint = "/profile/friend-requests-incoming")]
+pub async fn delete_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Delete the friend request
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::from_id.eq(user.id.unwrap()))
+		.filter(friend_requests::to_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	Ok(())
+}
+
+/// Remove an existing friendship
+#[server(endpoint = "/profile/delete-friend")]
+pub async fn delete_friend(for_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Delete the friend request
+	diesel::delete(friendships::table
+		.filter(friendships::friend_1_id.eq(user.id.unwrap()))
+		.filter(friendships::friend_2_id.eq(for_user_id))
+	).execute(&mut db_con)?;
+
+	diesel::delete(friendships::table
+		.filter(friendships::friend_2_id.eq(user.id.unwrap()))
+		.filter(friendships::friend_1_id.eq(for_user_id))
+	).execute(&mut db_con)?;
+
+	Ok(())
+}
+
+/// Accept a friend request
+#[server(endpoint = "/profile/accept-friend-request")]
+pub async fn accept_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Get current time for request
+	let timestamp: NaiveDateTime = Utc::now().naive_utc();
+
+	// Make sure the person has received a friend request from the other person
+	let req = diesel::select(exists(
+		friend_requests::table
+			.filter(friend_requests::from_id.eq(user.id.unwrap()))
+			.filter(friend_requests::to_id.eq(to_user_id))
+	)).get_result::<bool>(&mut db_con)?;
+
+	if req == false {
+		Err(ServerFnError::<NoCustomError>::ServerError(format!("Error, the friend request does not exist!")))?;
+	}
+
+	// Delete the friend requests
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::from_id.eq(user.id.unwrap()))
+		.filter(friend_requests::to_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::to_id.eq(user.id.unwrap()))
+		.filter(friend_requests::from_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	// Add the new friend request either direction
+	diesel::insert_into(crate::schema::friendships::table)
+		.values((friendships::created_at.eq(timestamp),friendships::friend_1_id.eq(user.id.unwrap()),friendships::friend_2_id.eq(to_user_id)))
+		.execute(&mut db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving friendship to database: {}", e);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+	})?;
+	
+	Ok(())
+}

src/api/mod.rs

@@ -2,3 +2,4 @@ pub mod history;
 pub mod profile;
 pub mod songs;
 pub mod album;
+pub mod friends;

src/app.rs

@@ -8,6 +8,7 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
+use crate::pages::friends::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -45,6 +46,8 @@ pub fn App() -> impl IntoView {
                         <Route path="search" view=Search />
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
+                        <Route path="user/:id/friends" view=Friends />
+                        <Route path="user/:id/friendrequests" view=FriendRequests />
                         <Route path="album/:id" view=AlbumPage />
                     </Route>
                     <Route path="/login" view=Login />

src/components.rs

@@ -9,3 +9,4 @@ pub mod song_list;
 pub mod loading;
 pub mod error;
 pub mod album_info;
+pub mod friend_list;

src/components/friend_list.rs

@@ -0,0 +1,37 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_icons::*;
+use crate::frienddata::FriendData;
+
+#[component]
+pub fn FriendRow(user: FriendData) -> impl IntoView {
+	  
+    view! {
+		<div class="friend-row">
+            <div class="friend-info">
+                <div class="friend-item">
+                    <Suspense fallback=|| view! { <Icon class="friend-image" icon=icondata::CgProfile/> }>
+                        <img class="friend-image" src={format!("/assets/images/profile/{}.webp", user.user_id)} alt="Profile Photo" />
+                    </Suspense>
+                </div>
+                <a class="friend-item" href={format!("../../user/{}",user.user_id)}>{user.username}</a>
+            </div>
+            <p class="friend-created-date">{user.created_at.format("%m/%d/%Y").to_string()}</p>
+		</div>
+	}.into_view()
+}
+
+#[component]
+pub fn FriendList(friends: Vec<FriendData>) -> impl IntoView {
+    view! {
+		<div class="friend-container">
+            {
+                friends.iter().map(|friend| {
+                    view! {
+                        <FriendRow user={friend.clone()} />
+                    }
+                }).collect::<Vec<_>>()
+            }
+		</div>
+	}.into_view()
+}

src/frienddata.rs

@@ -0,0 +1,17 @@
+use serde::{Serialize, Deserialize};
+
+use chrono::NaiveDate;
+
+/// Holds information about a user (friend)
+/// 
+/// Intended to be used in the front-end
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct FriendData {
+	/// Username
+	pub username: String,
+	/// Date which the user/friend was added
+	pub created_at: NaiveDate,
+	/// User's id to be used to locate their profile image
+	pub user_id: i32
+}

src/lib.rs

@@ -3,6 +3,7 @@ pub mod auth;
 pub mod songdata;
 pub mod albumdata;
 pub mod artistdata;
+pub mod frienddata;
 pub mod playstatus;
 pub mod playbar;
 pub mod database;

src/models.rs

@@ -542,14 +542,24 @@ impl Album {
 	pub fn get_album_data(album_id: i32, conn: &mut PgPooledConn) -> Result<AlbumData, Box<dyn Error>> {
 		use crate::schema::*;
 
-		let artist_list: Vec<Artist> = album_artists::table
+		let album: Vec<(Album, std::option::Option<Artist>)> = albums::table
-			.filter(album_artists::album_id.eq(album_id))
+			.find(album_id)
-			.inner_join(artists::table.on(album_artists::artist_id.eq(artists::id)))
+			.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
-			.select(
+			.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
-				artists::all_columns
+			.select((
-			)
+				albums::all_columns,
+				artists::all_columns.nullable()
+			))
+			.distinct()
 			.load(conn)?;
 
+		let mut artist_list: Vec<Artist> = Vec::new();
+
+		for (_, artist) in album {
+			if let Some(artist) = artist {
+				artist_list.push(artist);
+			}
+		}
 		// Get info of album
 		let albuminfo = albums::table
 			.filter(albums::id.eq(album_id))
@@ -661,7 +671,7 @@ impl Album {
 		
 		// Sort the songs by date
 		let mut songdata: Vec<SongData> = album_songs.into_values().collect();
-		songdata.sort_by(|a, b| a.track.cmp(&b.track));
+		songdata.sort_by(|a, b| b.track.cmp(&a.track));
 		Ok(songdata)
 	}
 }

src/pages.rs

@@ -2,3 +2,4 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
+pub mod friends;

src/pages/friends.rs

@@ -0,0 +1,133 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+use crate::api::friends::*;
+use crate::components::friend_list::*;
+use crate::components::loading::Loading;
+
+
+#[derive(Params, PartialEq)]
+struct FriendParams {
+    id: i32
+}
+
+#[component]
+pub fn Friends() -> impl IntoView {
+    let params = use_params::<FriendParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let friend_list = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friends(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="friend-page-container">
+            <h1 class="friend-header"> "Friends:" </h1>
+            <Transition
+                fallback=move || view! {
+                    <Loading />
+                }
+            >
+                <ErrorBoundary
+                    fallback=|errors| view! {
+                        {move || errors.get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                            .collect_view()
+                        }
+                    }
+                >
+                    {
+                        friend_list.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}
+
+#[component]
+pub fn FriendRequests() -> impl IntoView {
+    let params = use_params::<FriendParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let friend_list_incoming = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friend_requests_incoming(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    let friend_list_outgoing = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friend_requests_outgoing(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="friend-page-container">
+            <h1 class="friend-header"> "Friend Requests:" </h1>
+            <Transition
+                fallback=move || view! {
+                    <Loading />
+                }
+            >
+                <ErrorBoundary
+                    fallback=|errors| view! {
+                        {move || errors.get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                            .collect_view()
+                        }
+                    }
+                >
+                    <h2>Sent: </h2>
+                    {
+                        friend_list_outgoing.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                    <h2>Received: </h2>
+                    {
+                        friend_list_incoming.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}

style/friend.scss

@@ -0,0 +1,60 @@
+@import 'theme.scss';
+
+.friend-page-container {
+    width: 100%;
+}
+
+.friend-container {
+	width: 100%;
+	border-collapse: collapse;
+
+    .friend-row {
+        border: solid;
+		border-width: 1px 0;
+		border-color: #303030;
+		position: relative;
+
+        min-width: 100%;
+        height: 50px;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+
+        .friend-info {
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        .friend-item {
+            max-width: max-content;
+            margin: 0 20px;
+
+            .friend-image {
+                width: 35px;
+                height: 35px;
+                border-radius: 50%;
+            }
+
+        }
+
+        .friend-created-date {
+            margin-right: 50px;
+        }
+        a {
+            color: $text-controls-color;
+        }
+        a:visited {
+            color: $text-controls-color;
+        }
+        a:hover {
+            color: $controls-hover-color;
+        }
+        
+        a:active {
+            color: $controls-click-color;
+        }
+    }
+
+}

style/main.scss

@@ -16,6 +16,7 @@
 @import 'profile.scss';
 @import 'loading.scss';
 @import 'album_page.scss';
+@import 'friend.scss';
 
 body {
   font-family: sans-serif;