✨ UserDetail and UserList views

frontend/src/features/users/UserDetail.module.css

@@ -0,0 +1,5 @@
+.userDetail {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, 1fr);
+}

frontend/src/features/users/UserDetail.tsx

@@ -0,0 +1,47 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { useParams } from "react-router-dom";
+
+import { User, UserDetailDocument, UserProfile } from "../../types";
+import { formatMonth, formatTime } from "../../utils/time";
+import styles from "./UserDetail.module.css";
+
+export const UserDetail = () => {
+  const { userId } = useParams();
+  const { data, loading } = useQuery(UserDetailDocument, { variables: { userId: userId || "" }, skip: !userId });
+
+  if (loading) return <div>Loading...</div>;
+
+  const user = data?.user as User;
+  const profile = user?.profile as UserProfile;
+  return (
+    <div className={styles.userDetail}>
+      <div>
+        <h1>
+          {profile.image && <img src={profile.image} alt={`${user.firstName}s profile picture`} />} {user.firstName}
+        </h1>
+        <div className="card">
+          <div className="card-header">Stats</div>
+          <ul className="list-group list-group-flush">
+            <li className="list-group-item">Saldo: {profile.balance}</li>
+            <li className="list-group-item">Siste kjøp: {formatTime(profile.lastPurchaseDate)}</li>
+            <li className="list-group-item">Kjøp totalt: {profile.orderSumTotal.toLocaleString()}</li>
+          </ul>
+        </div>
+        <br />
+        <div className="card">
+          <div className="card-header">Top 5 måneder</div>
+          <ul className="list-group list-group-flush">
+            {profile.topMonths.map((topMonth) => (
+              <li key={topMonth.period} className="list-group-item">
+                {formatMonth(topMonth.period)}: <strong>{topMonth.count}</strong> kjøp på totalt{" "}
+                <strong>{topMonth.sum} kr</strong>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div>TODO: produktgraf</div>
+    </div>
+  );
+};

frontend/src/features/users/UserList.tsx

@@ -0,0 +1,32 @@
+import { useQuery } from "@apollo/client";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+import { AllUsersDocument } from "../../types";
+import { activeUserFilter } from "../../utils/users";
+
+export const UserList = () => {
+  const { data, loading } = useQuery(AllUsersDocument);
+  const [showAll, setShowAll] = useState(false);
+
+  if (loading) return <div>Loading...</div>;
+
+  const allUsers = data?.allUsers || [];
+  const users = showAll ? allUsers : allUsers.filter(activeUserFilter);
+  return (
+    <div>
+      <button type="button" className="btn btn-link" onClick={() => setShowAll(!showAll)}>
+        {showAll ? "Skjul gamliser" : "Vis alle"}
+      </button>
+      <ul>
+        {(users || []).map((user) => (
+          <li key={user.id}>
+            <Link to={`/user/${user.id}`}>
+              {user.firstName} {user.lastName}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

frontend/src/features/users/userDetail.graphql

@@ -0,0 +1,19 @@
+query userDetail($userId: ID!) {
+  user(userId: $userId) {
+      id
+      firstName
+      lastName
+      profile {
+        id
+        balance
+        image
+        lastPurchaseDate
+          topMonths {
+              period
+              sum
+              count
+          }
+          orderSumTotal
+      }
+    }
+}