task 1 and 2

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>
   );
 };

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;
+};
+

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>
   );
 };

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>
   );
 };

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>;
 };
 

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">

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;