Downgrade node, replace friend references in timer names

client/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:18.15.0-alpine AS development
+FROM node:16.20.0-alpine AS development
 
 WORKDIR /app
 

client/src/components/timerCard.tsx

@@ -1,6 +1,18 @@
 import { ago } from "../utils/ago";
 import { useEffect, useState } from "react";
 
+const replaceReferencedFriendsInName = (name, referencedFriends) => {
+  const friendIdToFriend = referencedFriends.reduce((friendMap, friend) => {
+    friendMap[friend.id] = friend;
+    return friendMap;
+  }, {});
+  return name.replaceAll(
+    /@\<(\d+)\>/g,
+    (_match, id) => friendIdToFriend[id].name
+  );
+};
+//  name.replaceAll(
+
 export default function TimerCard({ timer }) {
   const [since, setSince] = useState(ago(timer.start));
 
@@ -20,7 +32,8 @@ export default function TimerCard({ timer }) {
 
   return (
     <h1>
-      <code>{since}</code> since {timer.name}
+      <code>{since}</code>{" "}
+      {replaceReferencedFriendsInName(timer.name, timer.referenced_friends)}
     </h1>
   );
 }

client/src/components/timerHeader.tsx

@@ -45,12 +45,12 @@ export default function TimerHeader({ onSelect }) {
       </div>
       <div className="nav-right">
         <details className="dropdown">
-          <summary className="button outline">{friendName}</summary>
+          <summary style={{ marginTop: "1rem" }} className="button outline">
-          <div className="card">
+            {friendName}
-            <a onClick={logout} className="text-error">
+          </summary>
+          <a className="button outline text-error" onClick={logout}>
             Logout
           </a>
-          </div>
         </details>
       </div>
     </nav>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "friends",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

server/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:18.15.0-alpine AS development
+FROM node:16.20.0-alpine AS development
 
 WORKDIR /usr/src/app