OVDR/docs/JSdocs/History.js.html at main · SpectateurLinlan/OVDR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: History.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: History.js</h1>


    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * History.js - Display user's clothing browsing and try-on history.
 *
 * @fileoverview Fetches and displays historical clothing interactions for the logged-in user.
 * Uses the query string, props, or localStorage to determine user identity.
 *
 * @author
 * Peini SHE
 */

import React, { useState, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import "./History.css";

/**
 * History component displays the logged-in user's history of clothing interactions.
 *
 * @component
 * @param {Object} props
 * @param {string} props.username - Current username.
 * @param {string} props.userId - User ID from props (optional, fallback to URL or localStorage).
 * @returns {JSX.Element}
 */
function History({ username, userId }) {
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    const urlUserId = searchParams.get("user_id");
    const storedUserId = localStorage.getItem("user_id");
    const effectiveUserId = userId || urlUserId || storedUserId;
    const [historyData, setHistoryData] = useState([]);

  /**
   * Fetch the user's browsing history from backend API.
   */
    useEffect(() => {
        if (!effectiveUserId || effectiveUserId === "null") {
            console.warn("Invalid userId detected:", effectiveUserId);
            setHistoryData([]);
            return;
        }

        const fetchHistory = async () => {
            try {
                const response = await fetch(`http://localhost:5000/get-history?user_id=${effectiveUserId}`);
                const data = await response.json();

                if (response.ok &amp;&amp; data.history) {
                    console.log("Debug | History Data:", data.history);
                    setHistoryData(data.history);
                } else {
                    console.error("Failed to fetch history:", data.error || "No history available");
                    setHistoryData([]);
                }
            } catch (error) {
                console.error("Error fetching history:", error);
                setHistoryData([]);
            }
        };

        fetchHistory();
    }, [effectiveUserId]);

    return (
        &lt;div className="tryon-container">
            &lt;header className="tryon-header">
                &lt;h1 className="logo">OVDR &lt;span className="title">{username || "Guest"}'s Browsing History&lt;/span>&lt;/h1>
                &lt;button className="back-btn" onClick={() => navigate(-1)}>Return&lt;/button>
            &lt;/header>

            &lt;div className="history-grid">
                {Array.isArray(historyData) &amp;&amp; historyData.length > 0 ? (
                    historyData.map((item, index) => (
                        &lt;div
                            className="closet-item"
                            key={item.clothing_id || `history-${index}`}
                            onClick={() => navigate(`/detail/${item.clothing_id}`, { state: { item } })}
                        >
                            &lt;img
                                src={item.image}
                                alt={item.title}
                                className="closet-img"
                                onError={(e) => {
                                    console.error(`Failed to load image: ${item.image}`);
                                    e.target.src = "/images/placeholder.jpg";
                                }}
                            />
                            &lt;div className="closet-text">
                                &lt;h3>{item.title.length > 25 ? item.title.slice(0, 22) + "..." : item.title}&lt;/h3>
                                &lt;p>{item.closet_users} people added this to their Closet&lt;/p>
                            &lt;/div>
                        &lt;/div>
                    ))
                ) : (
                    &lt;h2>No history found.&lt;/h2>
                )}
            &lt;/div>
        &lt;/div>
    );
};

export default History;
</code></pre>
        </article>
    </section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#App">App</a></li><li><a href="global.html#ClothesDetail">ClothesDetail</a></li><li><a href="global.html#FullCloset">FullCloset</a></li><li><a href="global.html#History">History</a></li><li><a href="global.html#Home">Home</a></li><li><a href="global.html#Login">Login</a></li><li><a href="global.html#Register">Register</a></li><li><a href="global.html#SaveImage">SaveImage</a></li><li><a href="global.html#TryOn">TryOn</a></li><li><a href="global.html#fetchImageAsBase64">fetchImageAsBase64</a></li><li><a href="global.html#root">root</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Tue Apr 01 2025 12:14:54 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>