🏡 index : ~doyle/chartered.git

import React = require("react");
import { useState, useEffect } from "react";
import { Link, useHistory, useLocation } from "react-router-dom";

import Nav from "../sections/Nav";
import { useAuth } from "../useAuth";
import { authenticatedEndpoint, ProfilePicture, useAuthenticatedRequest } from "../util";

import { Plus } from "react-bootstrap-icons";
import { LoadingSpinner } from "./Loading";

interface UsersSearchResponse {
    users: UserSearchResponseUser[];
}

interface UserSearchResponseUser {
    user_uuid: string;
    display_name: string;
    picture_url: string;
}

export default function Search() {
  const auth = useAuth();
  const location = useLocation();

  const query = location.pathname === '/search'
    ? new URLSearchParams(location.search).get("q") || ""
    : "";

  return (
    <div className="text-white">
      <Nav />

      <div className="container mt-4 pb-4">
        <h1>Search Results {query ? <>for '{query}'</> : <></>}</h1>

        <UsersResults query={query} />
      </div>
    </div>
  );
}

function UsersResults({ query }: { query: string }) {
    const auth = useAuth();

    const { response: results, error } =
        useAuthenticatedRequest<UsersSearchResponse>({
            auth,
            endpoint: "users/search?q=" + encodeURIComponent(query),
        }, [query]);

    if (!results) {
        return <div className="card border-0 shadow-sm text-black p-2">
            <div className="card-body">
                {[0, 1, 2].map((i) => (
                    <ProfilePicture key={i} height="5rem" width="5rem" className="me-2" src={undefined} />
                ))}
            </div>
        </div>
    }

    if (results?.users.length === 0) {
        return <></>;
    }

    return <div className="card border-0 shadow-sm text-black p-2">
        <div className="card-body">            
            {results.users.map((user, i) => (
                <Link to={`users/${user.user_uuid}`}>
                    <ProfilePicture key={i} height="5rem" width="5rem" className="me-2" src={user.picture_url} />
                </Link>
            ))}
        </div>
    </div>;
}