Created
August 16, 2020 22:03
-
-
Save rherugu/510fabd4dd89da080a843f61ec1881e0 to your computer and use it in GitHub Desktop.
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
class Shop extends Component { | |
onClickHome = () => { | |
this.props.history.push("/"); | |
}; | |
onClickShop = () => { | |
this.props.history.push("/Shop"); | |
}; | |
onClickAbout = () => { | |
this.props.history.push("/About"); | |
}; | |
onClickContact = () => { | |
this.props.history.push("/Contact"); | |
}; | |
onClickLogin = () => { | |
this.props.history.push("/login"); | |
}; | |
onClickLogout = () => { | |
localStorage.setItem("token", undefined); | |
localStorage.setItem("Btoken", undefined); | |
this.props.history.push("/login"); | |
}; | |
constructor(props) { | |
super(props); | |
this.state = { | |
shops: [], | |
burger: "0", | |
pointerEvents: "none", | |
width: "30px", | |
logout: "none", | |
login: "flex", | |
loadingMAP: true, | |
search: "", | |
modal: true, | |
addresses: [], | |
currentPosition: {}, | |
userLocation: { lat: 39.0119, lng: -98.4842 }, | |
zoom: 4, | |
loadingMAP2: "block", | |
dashboardoftheB: "none", | |
FetchingData: "block", | |
showMap: "ddaadsdas", | |
gridlistDisplay: "flex", | |
showmaptext: "Show map", | |
mapMapBoxDisplayBlockNone: "block", | |
loadingShopBusinesses: "none", | |
shopbusinessesmapbox: [], | |
loadmorebtndisplayshopcount: "block", | |
loadmorebtntextshopcount: "Loading...", | |
count: 0, | |
searchtest: "", | |
}; | |
} | |
success = (position) => { | |
window.location = "#"; | |
this.setState({ | |
userLocation: { | |
lat: position.coords.latitude, | |
lng: position.coords.longitude, | |
}, | |
zoom: 12, | |
}); | |
}; | |
error = (err) => { | |
console.error(err); | |
window.location = "#"; | |
axios | |
.get("https://api.ipify.org/?format=json") | |
.then((res) => { | |
const ip = res.data.ip; | |
axios | |
.get(`http://ip-api.com/json/${ip}`) | |
.then((res) => { | |
this.setState({ | |
userLocation: { | |
lat: res.data.lat, | |
lng: res.data.lon, | |
}, | |
zoom: 12, | |
}); | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
}; | |
async componentDidMount() { | |
this.setState({ | |
loadingShopBusinesses: "flex", | |
}); | |
console.log(this.props.userLocation); | |
this.setState({ | |
FetchingData: "block", | |
}); | |
const tokenval = localStorage.getItem("token"); | |
const tokenvalB = localStorage.getItem("Btoken"); | |
var tokenC = `${tokenval}`; | |
var tokenB = `${tokenvalB}`; | |
if (!localStorage.getItem("visted")) { | |
this.setState({ | |
login: "flex", | |
logout: "none", | |
}); | |
localStorage.setItem("visted", true); | |
} | |
if (tokenB && tokenC === "undefined") { | |
if (this.state.login === "none") { | |
this.setState({ | |
login: "flex", | |
logout: "none", | |
}); | |
} | |
} else if (tokenB || tokenC !== "undefined") { | |
if (this.state.login === "flex") { | |
this.setState({ | |
login: "none", | |
logout: "flex", | |
}); | |
} | |
} | |
if (localStorage.getItem("type") === "business") { | |
this.setState({ dashboardoftheB: "flex" }); | |
} else { | |
this.setState({ dashboardoftheB: "none" }); | |
} | |
var limit = 12; | |
const headers = { | |
"auth-token": tokenval, | |
limit: limit, | |
}; | |
const headers2 = { | |
"auth-token": tokenval, | |
limit: limit + limit, | |
}; | |
// this.scrollListener = window.addEventListener("scroll", (e) => { | |
// this.handleScrollLoadMore(e); | |
// }); | |
var check = ""; | |
// trackPromise( | |
const parsed = qs.parse(this.props.location.search); | |
console.log(parsed.search); | |
if (parsed.search !== undefined || null || NaN) { | |
console.log("search ther 3847dh"); | |
const tokenval = localStorage.getItem("token"); | |
const headers = { | |
"auth-token": tokenval, | |
}; | |
axios | |
.post( | |
"http://localhost:3003/app/BusinessLoginAPI/shop/search", | |
{ | |
query: parsed.search, | |
}, | |
{ headers } | |
) | |
.then((res) => { | |
this.setState({ loadmorebtndisplayshopcount: "none" }); | |
this.setState({ | |
shops: res.data.results.map((shop) => shop), | |
}); | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
} else { | |
const headers222 = { | |
"auth-token": localStorage.getItem("token"), | |
page: 0, | |
}; | |
axios | |
.get("http://localhost:3003/app/BusinessLoginAPI/shop/count") | |
.then((res) => { | |
this.setState({ | |
count: res.data, | |
}); | |
console.log(res); | |
}) | |
.catch((e) => { | |
console.log(e); | |
}); | |
await axios | |
.get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", { | |
headers222, | |
}) | |
.then((response) => { | |
this.setState({ | |
shops: response.data, | |
}); | |
console.log(limitcounter); | |
// limitcounter++; | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
this.scrollListener = window.addEventListener("scroll", (e) => { | |
this.handleScrollLoadMore(e); | |
}); | |
} | |
// ); | |
this.setState({ | |
loadingMAP: false, | |
loadingMAP2: "none", | |
}); | |
await axios | |
.get("http://localhost:3003/app/payment/encryption") | |
.then((res) => { | |
if (res.data.status === "success") { | |
check = undefined; | |
axios | |
.post("http://localhost:3003/app/contact/sendqrcodetoBusiness", { | |
emailq: res.data.emailbusiness, | |
amount: res.data.amountPaid, | |
bname: res.data.businessName, | |
name: `${localStorage.getItem("fname")} ${localStorage.getItem( | |
"lname" | |
)}`, | |
}) | |
.then((res) => { | |
console.log(res); | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
var dl = { | |
name: res.data.businessName, | |
amountPaid: res.data.amountPaid, | |
amountLeft: 4, | |
QRcode: res.data.message, | |
}; | |
if (tokenB || tokenC === "undefined") { | |
this.props.history.push({ | |
pathname: "/QRCode", | |
state: { | |
value: res.data.message, | |
bname: res.data.businessName, | |
}, | |
}); | |
return 0; | |
} else if (tokenB && tokenC === "undefined") { | |
this.props.history.push({ | |
pathname: "/QRCode", | |
state: { | |
value: res.data.message, | |
bname: res.data.businessName, | |
}, | |
}); | |
return 0; | |
} else { | |
this.props.history.push({ | |
pathname: "/QRCode", | |
state: { | |
value: res.data.message, | |
bname: res.data.businessName, | |
}, | |
}); | |
} | |
this.props.history.push({ | |
pathname: "/QRCode", | |
state: { | |
value: res.data.message, | |
bname: res.data.businessName, | |
}, | |
}); | |
return 0; | |
} else if (res.data.status === "failure") { | |
check = "yes"; | |
console.log("User has not bought anything yet."); | |
} | |
}); | |
this.setState({ | |
FetchingData: "none", | |
}); | |
this.setState({ | |
loadingShopBusinesses: "none", | |
}); | |
axios | |
.get("http://localhost:3003/app/BusinessLoginAPI/shop") | |
.then((response) => { | |
this.setState({ | |
shopbusinessesmapbox: response.data, | |
}); | |
}) | |
.catch((err) => { | |
console.log(err); | |
this.onClickLogin(); | |
}); | |
} | |
optionChange = (e) => { | |
this.setState({ businessCatagory: e.target.value }); | |
}; | |
handleOpen = () => { | |
this.setState({ | |
open: "true", | |
}); | |
}; | |
handleClose = () => { | |
this.setState({ | |
open: "false", | |
}); | |
}; | |
handleSearch = () => { | |
if (!this.state.search.replace(/\s/g, "").length) { | |
if (this.state.search === "") { | |
const headers222 = { | |
"auth-token": localStorage.getItem("token"), | |
page: 0, | |
}; | |
axios | |
.get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", { | |
headers222, | |
}) | |
.then((response) => { | |
this.setState({ | |
shops: response.data, | |
}); | |
console.log(limitcounter); | |
// limitcounter++; | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
} else { | |
} | |
} else { | |
const tokenval = localStorage.getItem("token"); | |
const headers = { | |
"auth-token": tokenval, | |
}; | |
axios | |
.post( | |
"http://localhost:3003/app/BusinessLoginAPI/shop/search", | |
{ | |
query: this.state.search, | |
}, | |
{ headers } | |
) | |
.then((res) => { | |
this.setState({ loadmorebtndisplayshopcount: "none" }); | |
this.setState({ | |
shops: res.data.results.map((shop) => shop), | |
}); | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
} | |
}; | |
keySearch = async (e) => { | |
if (e.keyCode == 13) { | |
if (!this.state.search.replace(/\s/g, "").length) { | |
if (this.state.search === "") { | |
const headers222 = { | |
"auth-token": localStorage.getItem("token"), | |
page: 0, | |
}; | |
axios | |
.get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", { | |
headers222, | |
}) | |
.then((response) => { | |
this.setState({ | |
shops: response.data, | |
}); | |
console.log(limitcounter); | |
// limitcounter++; | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
} else { | |
} | |
} else { | |
const tokenval = localStorage.getItem("token"); | |
const headers = { | |
"auth-token": tokenval, | |
}; | |
axios | |
.post( | |
"http://localhost:3003/app/BusinessLoginAPI/shop/search", | |
{ | |
query: this.state.search, | |
}, | |
{ headers } | |
) | |
.then((res) => { | |
this.setState({ loadmorebtndisplayshopcount: "none" }); | |
this.setState({ | |
shops: res.data.results.map((shop) => shop), | |
}); | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
} | |
} else { | |
return 0; | |
} | |
}; | |
loadMore = async () => { | |
var top = window.pageYOffset || document.documentElement.scrollTop, | |
left = window.pageXOffset || document.documentElement.scrollLeft; | |
const headers = { | |
"auth-token": localStorage.getItem("token"), | |
page: limitcounter, | |
}; | |
// axios | |
// .get("http://localhost:3003/app/BusinessLoginAPI/shop/count") | |
// .then((res) => { | |
// console.log(res); | |
// }) | |
// .catch((e) => { | |
// console.log(e); | |
// }); | |
let shopsStatic = this.state.shops; | |
var checker = 17 * limitcounter; | |
if (this.state.count <= checker) { | |
this.setState({ loadmorebtndisplayshopcount: "none" }); | |
} else { | |
this.setState({ | |
loadmorebtntextshopcount: "Loading...", | |
}); | |
axios | |
.get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", { | |
headers, | |
}) | |
.then((response) => { | |
var total = shopsStatic.concat(response.data); | |
this.setState({ | |
shops: total, | |
}); | |
window.scrollTo(left, top); | |
this.setState({ | |
loadmorebtntextshopcount: "Loading...", | |
}); | |
}) | |
.catch((err) => { | |
console.error(err); | |
}); | |
limitcounter++; | |
} | |
}; | |
handleScrollLoadMore = () => { | |
var lastLi = document.getElementById("lastscrollshop"); | |
var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight; | |
var pageOffset = window.pageYOffset + window.innerHeight; | |
if (pageOffset > lastLiOffset) { | |
this.loadMore(); | |
} | |
}; | |
render() { | |
// const phoneNumber = this.state.shops.map((shop) => { | |
// return <p key={shop._id}>{shop.phoneNumber}</p>; | |
// }); | |
// const bname = this.state.shops.map((shop) => { | |
// return <p key={shop._id}>{shop.bname}</p>; | |
// }); | |
// const description = this.state.shops.map((shop) => { | |
// return <p key={shop._id}>{shop.description}</p>; | |
// }); | |
return ( | |
<div className="Shop"> | |
<div | |
className="loaderwrapper" | |
style={{ | |
zIndex: 9999999999, | |
display: this.state.loadingShopBusinesses, | |
}} | |
> | |
<div className="loader"></div> | |
</div> | |
<div | |
className="burger1 khdsaid12e" | |
style={{ | |
height: "100%", | |
opacity: this.state.burger, | |
pointerEvents: this.state.pointerEvents, | |
position: "fixed", | |
}} | |
> | |
<h3 | |
className="Hheading1b" | |
style={{ fontSize: "20px" }} | |
onClick={this.onClickHome} | |
> | |
<span>Home</span> | |
</h3> | |
<h3 | |
className="Hheading1b" | |
style={{ fontSize: "20px" }} | |
onClick={this.onClickShop} | |
> | |
<span>Shop</span> | |
</h3> | |
<h3 | |
className="Hheading1b" | |
style={{ fontSize: "20px" }} | |
onClick={this.onClickAbout} | |
> | |
<span>About</span> | |
</h3> | |
<h3 | |
className="Hheading1b" | |
style={{ fontSize: "20px" }} | |
onClick={this.onClickContact} | |
> | |
<span>Contact</span> | |
</h3> | |
{/* <a href="/BDashboard"> | |
<span | |
className="Hheading1b" | |
style={{ display: this.state.dashboardoftheB }} | |
> | |
<span>Dashboard</span> | |
</span> | |
</a> */} | |
<h3 | |
className="Hheading2b" | |
style={{ fontSize: "20px", display: this.state.login }} | |
onClick={this.onClickLogin} | |
> | |
<span>Login</span> | |
</h3> | |
<h3 | |
className="Hheading2b" | |
style={{ fontSize: "20px", display: this.state.logout }} | |
onClick={this.onClickLogout} | |
> | |
<span>Logout</span> | |
</h3> | |
</div> | |
<header | |
className="Home-Header" | |
style={{ | |
zIndex: "900909", | |
}} | |
> | |
<div className="HH"> | |
<div className="logoimg" onClick={this.onClickHome}> | |
<img | |
src={require("./Assets/golo2.png")} | |
className="logoimage" | |
alt="localmainstreet" | |
></img> | |
</div> | |
<div className="logoimg2" onClick={this.onClickHome}> | |
<img | |
src={require("./Assets/logor.png")} | |
className="logoimage2" | |
alt="localmainstreet" | |
></img> | |
</div> | |
<div | |
className="burgermenu" | |
style={{ | |
zIndex: "493324", | |
}} | |
onClick={() => { | |
this.setState({ | |
burger: "1", | |
width: "30px", | |
pointerEvents: "all", | |
}); | |
if (this.state.burger === "1") { | |
this.setState({ | |
burger: "0", | |
}); | |
} | |
if (this.state.pointerEvents === "all") { | |
this.setState({ | |
pointerEvents: "none", | |
}); | |
} | |
}} | |
> | |
<div | |
className="bar" | |
style={{ | |
width: this.state.width, | |
}} | |
></div> | |
<div | |
className="bar" | |
style={{ | |
width: this.state.width, | |
}} | |
></div> | |
<div | |
className="bar" | |
style={{ | |
width: this.state.width, | |
}} | |
></div> | |
</div> | |
<h3 className="Hheading1" onClick={this.onClickHome}> | |
<span>Home</span> | |
</h3> | |
<h3 className="Hheading1" onClick={this.onClickShop}> | |
<span>Shop</span> | |
</h3> | |
<h3 className="Hheading1" onClick={this.onClickAbout}> | |
<span>About</span> | |
</h3> | |
<h3 className="Hheading1" onClick={this.onClickContact}> | |
<span>Contact</span> | |
</h3> | |
<h3 | |
className="Hheading2" | |
style={{ display: this.state.login }} | |
onClick={this.onClickLogin} | |
> | |
<span>Login</span> | |
</h3> | |
<h3 className="Hheading2" style={{ display: this.state.logout }}> | |
<a href="/BDashboard"> | |
<span | |
className="Hheading1" | |
style={{ display: this.state.dashboardoftheB }} | |
> | |
<span>Dashboard</span> | |
| |
</span> | |
</a> | |
<span onClick={this.onClickLogout}>Logout</span> | |
</h3> | |
</div> | |
</header> | |
<div | |
className="gridlist" | |
style={{ | |
// width: "50vw", | |
// marginTop: "26vh !important", | |
// // all: "unset", | |
display: this.state.gridlistDisplay, | |
}} | |
> | |
<div className="search"> | |
<label | |
style={{ | |
cursor: "text", | |
}} | |
className="Search_Businesses" | |
> | |
Search by City, Zip, or Name | |
{/* <a | |
href="javascript:void(0)" | |
onClick={() => { | |
if (this.state.gridlistDisplay === "flex") { | |
this.setState({ | |
gridlistDisplay: "none", | |
showmaptext: "Back", | |
mapMapBoxDisplayBlockNone: "block", | |
}); | |
} else if (this.state.gridlistDisplay === "none") { | |
this.setState({ | |
gridlistDisplay: "flex", | |
showmaptext: "Show Map", | |
mapMapBoxDisplayBlockNone: "none", | |
}); | |
} | |
}} | |
className="link" | |
> | |
{this.state.showmaptext} | |
</a> */} | |
</label> | |
<div | |
className="search-main" | |
style={{ | |
display: "flex", | |
flexDirection: "row", | |
}} | |
> | |
<input | |
placeholder="Search by City, Zip Code, or Name" | |
type="text" | |
className="searchBar redinput" | |
style={{ | |
borderRadius: "6px 0px 0px 6px", | |
}} | |
value={this.state.search} | |
onChange={(e) => this.setState({ search: e.target.value })} | |
onKeyDown={this.keySearch} | |
></input> | |
<input | |
type="button" | |
className="searchSubmit" | |
value="Search" | |
style={{ | |
backgroundColor: "#FFDC00", | |
cursor: "pointer", | |
marginTop: "6px", | |
borderRadius: "0px 0px 0px 0px", | |
width: "100px", | |
}} | |
onClick={this.handleSearch} | |
></input> | |
<input | |
type="button" | |
className="searchSubmit" | |
value="View Full Map" | |
style={{ | |
backgroundColor: "#FFDC00", | |
cursor: "pointer", | |
marginTop: "6px", | |
borderRadius: "0px 6px 6px 0px", | |
width: "200px", | |
}} | |
onClick={() => { | |
this.props.history.push({ | |
pathname: "/MapView", | |
state: { | |
latlng: this.state.addresses, | |
}, | |
}); | |
}} | |
></input> | |
</div> | |
</div> | |
<p | |
style={{ | |
textAlign: "center", | |
display: this.state.FetchingData, | |
}} | |
> | |
Fetching Data... | |
</p> | |
{this.state.shops.map((shop) => ( | |
<MediaCard | |
card={shop} | |
className="MediaCard" | |
bname={shop.bname} | |
emailb={shop.emailb} | |
description={shop.description} | |
phoneNumber={shop.phoneNumber} | |
history={this.props.history} | |
businessCatagory={shop.businessCatagory} | |
stripeId={shop.stripeAccountId} | |
address={shop.address} | |
website={shop.website} | |
key={Math.floor(100000 + Math.random() * 900000)} | |
/> | |
))} | |
<br></br> | |
<input | |
type="button" | |
value={this.state.loadmorebtntextshopcount} | |
style={{ | |
backgroundColor: "#ffc728", | |
display: this.state.loadmorebtndisplayshopcount, | |
}} | |
id="lastscrollshop" | |
onClick={this.loadMore} | |
></input> | |
</div> | |
<div className="mapMapBox"> | |
<div | |
style={{ | |
width: "fit-content", | |
margin: "auto", | |
textAlign: "center", | |
}} | |
> | |
<i | |
style={{ | |
display: this.state.loadingMAP2, | |
// width: "fit-content", | |
// margin: "5px auto", | |
}} | |
class="fa fa-refresh fa-spin" | |
></i> | |
{this.state.loadingMAP ? "Loading The Map..." : ""} | |
</div> | |
{/* {this.state.currentPosition !== {} && ( */} | |
<MapBox | |
currentPosition={this.state.currentPosition} | |
latlng={this.state.shopbusinessesmapbox.map((shop) => shop)} | |
userLocation={this.state.userLocation} | |
zoom={this.state.zoom} | |
shop={this.state.shops} | |
/> | |
{/* )} */} | |
</div> | |
</div> | |
); | |
} | |
} | |
export default Shop; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment