From 6a1a270c943b6c5feb6be1c6621772f0bffeeb84 Mon Sep 17 00:00:00 2001
From: Elizabeth Hunt <elizabeth.hunt@simponic.xyz>
Date: Tue, 4 Apr 2023 09:33:14 -0600
Subject: [PATCH] Downgrade node, replace friend references in timer names

---
 client/Dockerfile.dev                 |  2 +-
 client/src/components/timerCard.tsx   | 15 ++++++++++++++-
 client/src/components/timerHeader.tsx | 12 ++++++------
 package-lock.json                     |  6 ++++++
 server/Dockerfile.dev                 |  2 +-
 5 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 package-lock.json

diff --git a/client/Dockerfile.dev b/client/Dockerfile.dev
index 11dad1d..30ae0e7 100644
--- a/client/Dockerfile.dev
+++ b/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
 
diff --git a/client/src/components/timerCard.tsx b/client/src/components/timerCard.tsx
index 1afc1eb..89777b8 100644
--- a/client/src/components/timerCard.tsx
+++ b/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>
   );
 }
diff --git a/client/src/components/timerHeader.tsx b/client/src/components/timerHeader.tsx
index 16a1d6e..fdf4aa8 100644
--- a/client/src/components/timerHeader.tsx
+++ b/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>
-          <div className="card">
-            <a onClick={logout} className="text-error">
-              Logout
-            </a>
-          </div>
+          <summary style={{ marginTop: "1rem" }} className="button outline">
+            {friendName}
+          </summary>
+          <a className="button outline text-error" onClick={logout}>
+            Logout
+          </a>
         </details>
       </div>
     </nav>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..65b1d9f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "friends",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}
diff --git a/server/Dockerfile.dev b/server/Dockerfile.dev
index 1b14f58..57bdcb2 100644
--- a/server/Dockerfile.dev
+++ b/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