From 4197acf30c78a37e625a59c30f5b9821e29dc8a0 Mon Sep 17 00:00:00 2001
From: mshvartsberg <meggan567@gmail.com>
Date: Fri, 17 Jan 2025 20:58:32 -0500
Subject: [PATCH] task 1 and 2

---
 src/App.tsx                           | 25 +++++++++++++++----------
 src/ProfileContext.tsx                | 13 +++++++++++++
 src/components/Profile.tsx            |  6 ++++--
 src/components/ProfileCard.tsx        |  8 +++++---
 src/components/ProfileCardContent.tsx |  4 +++-
 src/components/ProfileCardHeader.tsx  |  4 +++-
 src/hooks/useSecondsElapsed.tsx       |  9 +++++++--
 7 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 src/ProfileContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 6b1c916..ea34d84 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import Profile from "./components/Profile";
 import { ProfileData } from "./common-types";
 import "./styles.css";
+import { ProfileContext } from "./ProfileContext"
 
 const Users: ProfileData[] = [
   {
@@ -66,26 +67,30 @@ const App = () => {
   );
   const [fullName, setFullName] = useState<string>();
 
-  useEffect(() => {
-    setFullName(`${profileData.firstName} ${profileData.lastName}`);
-  }, [profileData.firstName, profileData.lastName]);
+  const handleClick = () => {
+    setProfileData(
+    (prevProfileData) =>
+      Users.filter(
+        (user) => user.firstName !== prevProfileData.firstName
+      )[Math.floor(Math.random() * (Users.length - 1))]
+  );
+  setFullName(`${profileData.firstName} ${profileData.lastName}`);
+};
 
   return (
     <main>
       <h1>Welcome to {fullName}'s Page</h1>
       <button
         onClick={() =>
-          setProfileData(
-            (prevProfileData) =>
-              Users.filter(
-                (user) => user.firstName !== prevProfileData.firstName
-              )[Math.floor(Math.random() * (Users.length - 1))]
-          )
+          handleClick()
         }
       >
         Randomize User
       </button>
-      <Profile profile={profileData} />
+      <ProfileContext.Provider value = {profileData}>
+        <Profile />
+      </ProfileContext.Provider>
+      
     </main>
   );
 };
diff --git a/src/ProfileContext.tsx b/src/ProfileContext.tsx
new file mode 100644
index 0000000..d37d5a8
--- /dev/null
+++ b/src/ProfileContext.tsx
@@ -0,0 +1,13 @@
+import React, { createContext, useContext } from "react";
+import { ProfileData } from "./common-types";
+
+export const ProfileContext = createContext<ProfileData | null>(null);
+
+export const useProfile = () => {
+  const context = useContext(ProfileContext);
+  if (!context) {
+    throw new Error("useProfile must be used within a ProfileProvider");
+  }
+  return context;
+};
+
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 058a9b2..4e098a8 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -1,14 +1,16 @@
 import { ProfileData } from "../common-types";
 import ProfileCard from "./ProfileCard";
 import { useSecondsElapsed } from "../hooks/useSecondsElapsed";
+import { useProfile } from "../ProfileContext";
 
-const Profile = ({ profile }: { profile: ProfileData }) => {
+const Profile = () => {
+  const profile = useProfile();
   const secondsElapsed = useSecondsElapsed(profile.firstName);
   return (
     <section className="profile">
       <div>Wow, check out this really cool person below</div>
       <div>Time spent viewing profile: {secondsElapsed} seconds.</div>
-      <ProfileCard profile={profile} />
+      <ProfileCard />
     </section>
   );
 };
diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index fd3466a..d04ac20 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -1,12 +1,14 @@
 import { ProfileData } from "../common-types";
 import ProfileCardContent from "./ProfileCardContent";
 import ProfileCardHeader from "./ProfileCardHeader";
+import { useProfile } from "../ProfileContext";
 
-const ProfileCard = ({ profile }: { profile: ProfileData }) => {
+const ProfileCard = () => {
+  const profile = useProfile();
   return (
     <div className="profile-card">
-      <ProfileCardHeader profile={profile} />
-      <ProfileCardContent profile={profile} />
+      <ProfileCardHeader />
+      <ProfileCardContent  />
     </div>
   );
 };
diff --git a/src/components/ProfileCardContent.tsx b/src/components/ProfileCardContent.tsx
index 60909fc..eebe735 100644
--- a/src/components/ProfileCardContent.tsx
+++ b/src/components/ProfileCardContent.tsx
@@ -1,6 +1,8 @@
 import { ProfileData } from "../common-types";
+import { useProfile } from "../ProfileContext";
 
-const ProfileCardContent = ({ profile }: { profile: ProfileData }) => {
+const ProfileCardContent = () => {
+  const profile = useProfile();
   return <p>{profile.bio}</p>;
 };
 
diff --git a/src/components/ProfileCardHeader.tsx b/src/components/ProfileCardHeader.tsx
index 9a7cd21..29f35e4 100644
--- a/src/components/ProfileCardHeader.tsx
+++ b/src/components/ProfileCardHeader.tsx
@@ -1,7 +1,9 @@
 import { ProfileData } from "../common-types";
 import { useProfileViews } from "../hooks/useProfileViews";
+import { useProfile } from "../ProfileContext";
 
-const ProfileCardHeader = ({ profile }: { profile: ProfileData }) => {
+const ProfileCardHeader = () => {
+  const profile = useProfile();
   const profileViews = useProfileViews(profile.firstName);
   return (
     <div className="profile-card-header">
diff --git a/src/hooks/useSecondsElapsed.tsx b/src/hooks/useSecondsElapsed.tsx
index 61abea8..1be4b99 100644
--- a/src/hooks/useSecondsElapsed.tsx
+++ b/src/hooks/useSecondsElapsed.tsx
@@ -6,16 +6,21 @@ import { useEffect, useState } from "react";
  * @param key The key to use for resetting the timer
  * @returns The number of seconds that have elapsed since the component was mounted
  */
+
 export const useSecondsElapsed = (key: string) => {
   const [secondsElapsed, setSecondsElapsed] = useState(0);
 
   useEffect(() => {
     // Reset the timer when the key changes
     setSecondsElapsed(0);
+    console.log("seconds " + secondsElapsed);
 
-    setInterval(() => {
-      setSecondsElapsed((prevTime) => prevTime + 1);
+    const intervalId = setInterval(() => {
+      setSecondsElapsed((prevTime) => prevTime + 1); // Ensure we use the latest state
     }, 1000);
+    return () => {
+      clearInterval(intervalId);
+    };
   }, [key]);
 
   return secondsElapsed;