-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
214 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,214 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import { useParams } from 'react-router-dom'; | ||
import './assets/vendor/css/core.css'; | ||
import './assets/vendor/css/theme-default.css'; | ||
import './assets/vendor/css/demo.css'; | ||
import './css/styles.css'; // Core theme CSS | ||
import './assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css'; // Vendor CSS | ||
|
||
const OrderSuccessPage = () => { | ||
const { id } = useParams(); // Get the ID from the URL | ||
const [nftData, setNftData] = useState(null); // Store the NFT data | ||
const [userName, setUserName] = useState(null); // State to hold the logged-in user name | ||
const [isLoading, setIsLoading] = useState(true); // To manage loading state | ||
const [error, setError] = useState(null); // Error state | ||
const [loading, setLoading] = useState(true); // Loading state | ||
|
||
// Helper function to get a cookie by name | ||
const getCookie = (name) => { | ||
const value = `; ${document.cookie}`; | ||
const parts = value.split(`; ${name}=`); | ||
if (parts.length === 2) return parts.pop().split(';').shift(); | ||
return null; | ||
}; | ||
|
||
// Helper function to delete a cookie by name | ||
const deleteCookie = (name) => { | ||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; | ||
}; | ||
|
||
// Handle logout | ||
const handleLogout = () => { | ||
deleteCookie('id'); // Delete the 'id' cookie | ||
window.location.reload(); // Refresh the page | ||
}; | ||
|
||
// Fetch the user data if the cookie exists | ||
useEffect(() => { | ||
const userIdCookie = getCookie('id'); // Look for 'id' cookie | ||
|
||
if (userIdCookie) { | ||
// If cookie exists, call the API | ||
fetch(`https://api.nftlix.store/api/member/login?id=${userIdCookie}`) | ||
.then((response) => response.json()) | ||
.then((data) => { | ||
if (data.name) { | ||
setUserName(data.name); // Set the user's name if successful | ||
} | ||
}) | ||
.catch((error) => { | ||
console.error('Error fetching user data:', error); | ||
// If error occurs, keep the login button | ||
}) | ||
.finally(() => setIsLoading(false)); // Finished loading | ||
} else { | ||
setIsLoading(false); // No cookie, just show login button | ||
} | ||
}, []); | ||
|
||
useEffect(() => { | ||
// Fetch NFT data using the id from URL | ||
const fetchNftData = async () => { | ||
try { | ||
const response = await fetch(`https://api.nftlix.store/api/nfts/${id}`); | ||
if (!response.ok) { | ||
throw new Error('Failed to fetch NFT data'); | ||
} | ||
const data = await response.json(); | ||
setNftData(data); | ||
} catch (err) { | ||
setError(err.message); | ||
} finally { | ||
setLoading(false); | ||
} | ||
}; | ||
fetchNftData(); | ||
}, [id]); | ||
|
||
const handleMintNFT = async () => { | ||
try { | ||
if (nftData && nftData.id) { | ||
const mintInfo = {"id": nftData.id}; | ||
const response = await fetch('https://api.nftlix.store/api/nfts/mint', { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json', | ||
}, | ||
body: JSON.stringify(mintInfo), | ||
}); | ||
if (response.ok) { | ||
alert('NFT 민팅 성공에 성공했습니다! (테스트 계정에 민팅됩니다.)'); | ||
} | ||
else { | ||
console.error('NFT 민팅 실패', error); | ||
alert('NFT 민팅에 실패했습니다.'); | ||
} | ||
} | ||
} catch (error) { | ||
console.error('NFT 민팅 실패', error); | ||
alert('NFT 민팅에 실패했습니다.'); | ||
} | ||
}; | ||
|
||
if (!nftData) { | ||
return <p>Loading...</p>; // Show loading message until data is fetched | ||
} | ||
|
||
return ( | ||
<div> | ||
{/* Navigation */} | ||
<nav className="navbar navbar-expand-lg navbar-light bg-light"> | ||
<div className="container px-4 px-lg-5"> | ||
<a className="navbar-brand" href="/">NFTLIX</a> | ||
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
<span className="navbar-toggler-icon"></span> | ||
</button> | ||
<div className="collapse navbar-collapse" id="navbarSupportedContent"> | ||
<ul className="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4"> | ||
<li className="nav-item"> | ||
<a className="nav-link active" aria-current="page" href="/">Home</a> | ||
</li> | ||
{!isLoading ? ( | ||
userName ? ( | ||
<li className="nav-item"><a className="nav-link" href="/item/new">NFT(이미지) 등록</a></li> | ||
) : ( | ||
<div></div> | ||
) | ||
) : ( | ||
<div></div> | ||
)} | ||
</ul> | ||
<form className="d-flex"> | ||
{!isLoading ? ( | ||
userName ? ( | ||
<li class="nav-item dropdown" style={{ "list-style-type": "none" }}> | ||
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">{userName}님</a> | ||
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> | ||
<li><a class="dropdown-item" onClick={handleLogout}>로그아웃</a></li> | ||
</ul> | ||
</li> | ||
) : ( | ||
<button className="btn btn-outline-dark" type="submit">로그인</button> | ||
) | ||
) : ( | ||
<span className="navbar-text">Loading...</span> | ||
)} | ||
</form> | ||
</div> | ||
</div> | ||
</nav> | ||
|
||
{/* Main Content */} | ||
<div className="content-wrapper"> | ||
<div className="container-xxl flex-grow-1 container-p-y"> | ||
<div className="col-md"> | ||
<h5 className="my-4">😊 구매해주셔서 감사합니다!</h5> | ||
|
||
{/* Carousel */} | ||
<div id="carouselExample" className="carousel slide" data-bs-ride="carousel"> | ||
<ol className="carousel-indicators"> | ||
<li data-bs-target="#carouselExample" data-bs-slide-to="0" className="active" aria-current="true"></li> | ||
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li> | ||
</ol> | ||
<div className="carousel-inner"> | ||
<div className="carousel-item active"> | ||
<img className="d-block w-100" src={nftData.mainImageUrl} alt="NFT 이미지 1" /> | ||
</div> | ||
<div className="carousel-item"> | ||
<img className="d-block w-100" src={nftData.previewImageUrl} alt="NFT 이미지 2" /> | ||
</div> | ||
</div> | ||
<a className="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev"> | ||
<span className="carousel-control-prev-icon" aria-hidden="true"></span> | ||
<span className="visually-hidden">Previous</span> | ||
</a> | ||
<a className="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next"> | ||
<span className="carousel-control-next-icon" aria-hidden="true"></span> | ||
<span className="visually-hidden">Next</span> | ||
</a> | ||
</div> | ||
|
||
{/* NFT Benefits */} | ||
<div className="col-12" style={{ marginTop: '50px' }}> | ||
<div className="card mb-4"> | ||
<h5 className="card-header">🎁 NFT 구매 혜택</h5> | ||
<div className="card-body"> | ||
<p className="card-text">NFT를 구매하신 분에게는 NFT의 소유자임을 인증하는 메타데이터를 발급해드립니다!</p> | ||
<a href={nftData.metadataUrl} className="btn btn-primary" target="_blank" rel="noreferrer">메타데이터 다운로드</a> | ||
</div> | ||
</div> | ||
|
||
{/* NFT Minting */} | ||
<div className="card mb-4"> | ||
<h5 className="card-header">🪙 NFT 민팅하기</h5> | ||
<div className="card-body"> | ||
<p className="card-text">NFT를 메타마스크 지갑에 민팅하세요!</p> | ||
<button onClick={handleMintNFT} className="btn btn-primary">NFT 민팅</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
{/* Footer */} | ||
<footer className="py-5 bg-dark"> | ||
<div className="container"> | ||
<p className="m-0 text-center text-white">Copyright © NFTLIX 2024</p> | ||
</div> | ||
</footer> | ||
</div> | ||
); | ||
}; | ||
|
||
export default OrderSuccessPage; |