Home page

src/client/components/home-page/create-habit-button.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { COLOR_THEME, FONT_THEME } from "../../themes";
+import styled from "styled-components";
+import { NavigateFunction, useNavigate } from "react-router-dom";
+import { Method, fetchServer, verifyAuth } from "../../scripts/fetch-server";
+import HabitWidget from "./habit-widget";
+// import "./home-page.css"
+
+
+
+
+  const StyledButton = styled.button`
+  background-color: ${COLOR_THEME.BUTTON};
+  font-family: ${FONT_THEME.BUTTON_FONT};
+  display: flex;
+  justify-content: center;
+  width: 1335px;
+  margin: 10px 0px 10px 0px;
+
+  `
+  interface CreateHabitButtonProps {
+    setUpdate: React.Dispatch<React.SetStateAction<number>>;
+
+}
+
+const createHabit = async (navigate: NavigateFunction, setUpdate:  React.Dispatch<React.SetStateAction<number>>) => {
+      console.log("create habit");
+
+      const habitName = prompt("Enter habit name:");
+      if (habitName === null) return;
+
+      const response = verifyAuth(navigate, await fetchServer(Method.POST, "/createhabit", {name: habitName}));
+      console.log(response);
+
+      // refresh
+      setUpdate((update) => update + 1);
+  };
+
+
+function CreateHabitButton({setUpdate}: CreateHabitButtonProps){
+
+    const navigate = useNavigate();
+
+    const handleCreateHabit = async () => {
+        //  Call the callback function to create a habit
+        await createHabit(navigate, setUpdate);
+      };
+
+
+    return( <>
+
+        <StyledButton className=" btn btn-primary border-0" onClick={handleCreateHabit}> 
+        + Create New Habit
+        </StyledButton>     
+
+        </>  
+
+    );
+
+
+}
+
+export default CreateHabitButton;

src/client/components/home-page/habit-list-widget.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { COLOR_THEME, FONT_THEME } from "../../themes";
+import { NavigateFunction } from "react-router-dom";
+import styled from "styled-components";
+import CreateHabitButton from "./create-habit-button";
+import HabitWidget from "./habit-widget";
+import "./home-page.css"
+import { UserHabit } from "../../../../models";
+
+const BigWidgetStyle = styled.div`
+background-color: ${COLOR_THEME.SECTION};
+display: flex;
+flex-direction: column;
+align-items: flex-start;
+justify-content: center;
+padding: 20px 10px 20px 10px;
+margin-right: 40px;
+margin-left: 40px;
+
+
+
+`
+interface HabitListWidgetProps {
+    setUpdate: React.Dispatch<React.SetStateAction<number>>;
+    habits: UserHabit[];
+}
+
+
+function HabitListWidget({setUpdate,habits}: HabitListWidgetProps ){
+
+    return( <>
+        <BigWidgetStyle className = "rounded">
+
+            {habits.map((habit) => (<>
+             <div><HabitWidget habit = {habit}/></div>  
+             </>))}
+            <div><CreateHabitButton setUpdate={setUpdate} /></div>
+
+        </BigWidgetStyle> 
+
+
+
+\
+
+
+</>
+    );
+
+
+}
+
+export default HabitListWidget;

src/client/components/home-page/habit-widget.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { COLOR_THEME, FONT_THEME } from "../../themes";
+import { NavigateFunction, useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import { UserHabit } from "../../../../models";
+import CreateHabitButton from "./create-habit-button";
+import { Link } from "react-router-dom";
+import { Method, fetchServer } from "../../scripts/fetch-server";
+// import "./home-page.css"
+
+
+const StyledButton = styled.button`
+background-color: ${COLOR_THEME.BUTTON};
+font-family: ${FONT_THEME.BUTTON_FONT};
+display: flex;
+justify-content: center;
+width: 1335px;
+margin: 10px 0px 10px 0px;
+
+
+`
+
+
+interface HabitWidgetProps {
+    habit: UserHabit;
+}
+
+// function handleClick({habit}: HabitWidgetProps ) {
+//   <p><Link to={"/habit/"+habit.habitID}>{habit.name}</Link></p>
+
+//   console.log('Link clicked!');
+// }
+
+
+function HabitWidget({habit}: HabitWidgetProps){
+
+  const navigate = useNavigate(); // Get the navigate function from React Router
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.preventDefault(); // Prevent the default button click behavior
+    navigate("/habit/" + habit.habitID); // Programmatically navigate to the desired URL
+  };
+
+
+    return(
+        <StyledButton className=" btn btn-primary border-0" onClick={handleClick}> 
+
+        <p>
+          {habit.name}
+            {/* Streak: {habit.currentStreak}
+            Number of Logged Days: {habit.numLoggedDays}
+            Percent Success Week: {habit.percentSuccessWeek}
+            Percent Success Lifetime: {habit.percentSuccessLifetime} */}
+            </p>
+
+        </StyledButton> 
+
+    );
+
+
+}
+
+export default HabitWidget;

src/client/components/home-page/home-page.css

@@ -0,0 +1,16 @@
+
+
+.flex-container {
+  display: flex;
+  background-color: DodgerBlue;
+  flex-direction: column;
+}
+
+.flex-container > div {
+  background-color: #f1f1f1;
+  margin: 10px;
+  padding: 20px;
+  font-size: 30px;
+}
+
+

src/client/components/home-page/home-page.tsx

@@ -5,19 +5,10 @@ import { getDateToday } from "../../scripts/date";
 import { UserHabit, UserInfo } from "../../../../models";
 import { Loading } from "../css-components/loading";
 import PercentIcon from "../shared-components/percent-icon";
+import HabitListWidget from "./habit-list-widget"
+import HabitWidget from "./habit-widget";
 
-const createHabit = async (navigate: NavigateFunction, setUpdate:  React.Dispatch<React.SetStateAction<number>>) => {
-    console.log("create habit");
 
-    const habitName = prompt("Enter habit name:");
-    if (habitName === null) return;
-
-    const response = verifyAuth(navigate, await fetchServer(Method.POST, "/createhabit", {name: habitName}));
-    console.log(response);
-
-    // refresh
-    setUpdate((update) => update + 1);
-};
 
 interface HomePageProps {
     setUsername: (username: string) => void;
@@ -31,6 +22,7 @@ const HomePage: FC<HomePageProps> = ({ setUsername }) => {
 
     console.log("Home Page");
 
+
     const {year, month, day} = getDateToday();
     const params = {
         userID: undefined,
@@ -69,7 +61,7 @@ const HomePage: FC<HomePageProps> = ({ setUsername }) => {
         <p>Percent Success Lifetime: {userInfo.percentSuccessLifetime}</p>
         <p>Number of Logged Days: {userInfo.numLoggedDays}</p>
         <p>Habits: {userInfo.habits.toString()}</p>
-
+{/*         
         {
             userInfo.habits.map((habit) => (<>
             <p><Link to={"/habit/"+habit.habitID}>{habit.name} {habit.habitID}</Link></p>
@@ -80,8 +72,25 @@ const HomePage: FC<HomePageProps> = ({ setUsername }) => {
             <li>Percent Success Lifetime: {habit.percentSuccessLifetime}</li>
             </ul>
             </>))
-        }
-        <button onClick ={() => createHabit(navigate, setUpdate)}>Create Habit</button>
+        } */}
+
+        <HabitListWidget setUpdate={setUpdate} habits={userInfo.habits}/>
+
+
+        {/* {
+
+            userInfo.habits.map((habit) => (<>
+                <HabitWidget userHabit={habit} />
+                <HabitListWidget setUpdate={setUpdate} userHabit={habit}/>
+
+             </>))
+        } */}
+
+
+
+
+
+
 
     </>
 };