-
Notifications
You must be signed in to change notification settings - Fork 2
/
App.jsx
101 lines (91 loc) · 3.88 KB
/
App.jsx
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
import axios from 'axios';
import './global.css';
import React from 'react';
import startFakeTimer from './components/bannerComps/startFakeCountdown';
import Overview from './components/overview/Overview';
import GalleryModal from './components/overview/GalleryModal';
import GetAllQuestionsAndAnswers from './components/questionsAndAnswers/GetAllQuestionsAndAnswers';
import ReviewList from './components/review/ReviewList';
import RelatedProductsContainer from './components/relatedProductsModule/Container';
const { useState, useEffect } = React;
function App() {
const [currentProduct, setCurrentProduct] = useState({});
const [productId, setProductId] = useState('40344');
const [currentStyle, setCurrentStyle] = useState({});
const [mainImageIndex, setMainImageIndex] = useState(0);
const [minThumbIndex, setMinThumbIndex] = useState(0);
const [maxThumbIndex, setMaxThumbIndex] = useState();
const [galleryModal, setGalleryModal] = useState(false);
const [countdown, setCountdown] = useState('Loading countdown...');
const [reviews, setReviews] = useState([]);
useEffect(() => {
axios.get(`products/${productId}`)
.then((response) => {
setCurrentProduct(response.data);
})
.catch((err) => {
console.error(err);
});
}, [productId]);
useEffect(() => {
// Duration for the countdown in seconds (e.g., 4 hours = 14400 seconds)
const duration = 4 * 60 * 60; // Modify this value as needed
// Start the fake timer
startFakeTimer(duration, setCountdown);
}, []);
useEffect(() => {
// Example: Dynamically calculate and set padding
const logoBannerHeight = document.querySelector('.logo-banner')?.offsetHeight || 0;
const fixedBannerHeight = document.querySelector('.fixed-banner')?.offsetHeight || 0;
const totalBannerHeight = logoBannerHeight + fixedBannerHeight;
const bodyContentElement = document.querySelector('.body-content');
if (bodyContentElement) {
bodyContentElement.style.paddingTop = `${totalBannerHeight}px`;
}
}, []);
return (
<div>
{galleryModal && (
<GalleryModal
styleImages={currentStyle.photos}
mainImageIndex={mainImageIndex}
changeMainImageIndex={(newIndex) => setMainImageIndex(newIndex)}
minThumbIndex={minThumbIndex}
changeMinThumbIndex={(newIndex) => setMinThumbIndex(newIndex)}
maxThumbIndex={maxThumbIndex}
changeMaxThumbIndex={(newIndex) => setMaxThumbIndex(newIndex)}
toggleGalleryModal={(bool) => setGalleryModal(bool)}
galleryModal={galleryModal}
/>
)}
<div>
<div className="logo-banner" style={{ zIndex: 2147483640 }}>The Realest Queens</div>
<div className="fixed-banner" style={{ zIndex: 2147483640 }}>{countdown}</div>
<div className="body-content">
<Overview
currentProduct={currentProduct}
currentStyle={currentStyle}
changeCurrentStyle={(newStyle) => setCurrentStyle(newStyle)}
reviewCount={reviews.length}
mainImageIndex={mainImageIndex}
changeMainImageIndex={(newIndex) => setMainImageIndex(newIndex)}
minThumbIndex={minThumbIndex}
changeMinThumbIndex={(newIndex) => setMinThumbIndex(newIndex)}
maxThumbIndex={maxThumbIndex}
changeMaxThumbIndex={(newIndex) => setMaxThumbIndex(newIndex)}
galleryModal={galleryModal}
toggleGalleryModal={(bool) => setGalleryModal(bool)}
/>
<RelatedProductsContainer currentProduct={currentProduct} setProductId={setProductId} />
<GetAllQuestionsAndAnswers currentProduct={currentProduct} />
<ReviewList
currentProduct={currentProduct}
reviews={reviews}
updateReviews={(newReviews) => setReviews(newReviews)}
/>
</div>
</div>
</div>
);
}
export default App;