328 lines
20 KiB
JavaScript
328 lines
20 KiB
JavaScript
|
"use client"
|
||
|
import Link from "next/link"
|
||
|
import useSWR, { SWRConfig } from 'swr'
|
||
|
import Image from 'next/image'
|
||
|
import { useEffect, useRef, useState } from "react"
|
||
|
import { Button, Checkbox, Label, Modal, TextInput } from 'flowbite-react';
|
||
|
import { signIn, signOut, useSession } from "next-auth/react";
|
||
|
import { postData } from "../library/post";
|
||
|
import { encode } from "next-auth/jwt";
|
||
|
import { useRouter } from "next/navigation";
|
||
|
import { useOutsideClick } from "../library/outclick";
|
||
|
import { usePathname } from 'next/navigation'
|
||
|
import WaVerify from "./verifikasi/waverify";
|
||
|
const fetcher = (...args) => fetch(...args).then((res) => res.json())
|
||
|
|
||
|
const ButtonLogin = ({verify,props}) => {
|
||
|
|
||
|
const route = useRouter();
|
||
|
const ref = useOutsideClick(() => {
|
||
|
setVisible(null)
|
||
|
});
|
||
|
|
||
|
const [si, setI] = useState({});
|
||
|
|
||
|
const { data: session } = useSession();
|
||
|
|
||
|
const [visible, setVisible] = useState();
|
||
|
|
||
|
const { data: userData } = useSWR(`/api/user?email=` + (session ? session.user.email:''), fetcher)
|
||
|
// let [userDataW] = userData? userData:[];
|
||
|
|
||
|
useEffect(() => {
|
||
|
if(userData){
|
||
|
let [c] = userData.message;
|
||
|
setI(c?c:{});
|
||
|
// console.log(si);
|
||
|
}
|
||
|
}, [userData, si]);
|
||
|
|
||
|
|
||
|
if(session && session.user){
|
||
|
return (<>
|
||
|
<div className="relative">
|
||
|
<button onClick={()=>{
|
||
|
visible? setVisible(null) : setVisible(1);
|
||
|
}} className="h-[50px] mx-2 overflow-hidden rounded-[50px]">
|
||
|
{session?
|
||
|
<img src={si ? (si.avatar ? si.avatar+`?v=${Date.now()}` : session.user.image ) : session.user.image} alt="" width={50} height={50} />
|
||
|
:
|
||
|
<></>
|
||
|
}
|
||
|
</button>
|
||
|
<div ref={ref} style={{visibility:visible?'visible':'hidden'}} className="absolute top-[60px] right-[0] rounded text-gray-950 px-4 py-2 shadow-xl bg-white w-[320px]">
|
||
|
<div style={{gridGap:'10px', display:'grid', gridTemplateColumns:'80px auto'}}>
|
||
|
<div style={{overflow:'hidden', borderRadius:'50%', display:'inline-block'}}>
|
||
|
{session ?
|
||
|
<img src={si ? (si.avatar ? si.avatar + `?v=${Date.now()}` : session.user.image) : session.user.image} alt="" width={80} height={80} />
|
||
|
:
|
||
|
<></>
|
||
|
}
|
||
|
</div>
|
||
|
<h1 className="flex items-center text-[20px] font-bold my-2">{session.user.name}</h1>
|
||
|
</div>
|
||
|
<button onClick={()=>{
|
||
|
route.push('/profile/edit');
|
||
|
setVisible(null)
|
||
|
}} className="block rounded bg-indigo-950 w-full text-white p-2 my-4">Lihat dan Edit Profil</button>
|
||
|
{!verify ?
|
||
|
<>
|
||
|
<button onClick={() => {
|
||
|
route.push('/waverify')
|
||
|
setVisible(null)
|
||
|
}} className="block rounded bg-yellow-500 w-full text-white p-2 ">Verify WA</button>
|
||
|
</>
|
||
|
:
|
||
|
<></>
|
||
|
}
|
||
|
<button onClick={()=>{
|
||
|
route.push('/iklan')
|
||
|
}} className="border-2 mt-2 text-left rounded-md w-full border-indigo-950 p-2">Iklan Saya</button>
|
||
|
{/* <button className="border-2 mt-2 text-left rounded-md w-full border-indigo-950 p-2">Beli Paket Bisnis</button>
|
||
|
<button className="border-2 mt-2 text-left rounded-md w-full border-indigo-950 p-2">Paket yang Dibeli & Penagihan</button> */}
|
||
|
<button onClick={() => signOut()} className="block rounded bg-indigo-950 w-full text-white p-2 my-4">Log Out</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
<Link href="/post/add" className="relative hidden md:flex items-center justify-center">
|
||
|
<svg width="104" height="45" className="_20oLV" viewBox="0 0 1603 768">
|
||
|
<path
|
||
|
d="M434.442 16.944h718.82c202.72 0 367.057 164.337 367.057 367.058s-164.337 367.057-367.057 367.057h-718.82c-202.721 0-367.058-164.337-367.058-367.058S231.721 16.943 434.442 16.943z"
|
||
|
fill="#ffffff"
|
||
|
></path>
|
||
|
<path
|
||
|
d="M427.241 669.489c-80.917 0-158.59-25.926-218.705-73.004l-.016-.014C139.407 542.352 99.766 464.914 99.766 383.997c0-41.07 9.776-80.712 29.081-117.797 25.058-48.139 64.933-89.278 115.333-118.966l-52.379-67.581c-64.73 38.122-115.955 90.98-148.159 152.845C18.8 280.243 6.201 331.224 6.201 383.997c0 104.027 50.962 203.61 139.799 273.175h.016c77.312 60.535 177.193 93.887 281.22 93.887h299.699l25.138-40.783-25.138-40.783H427.237z"
|
||
|
fill="#c30000"
|
||
|
></path>
|
||
|
<path
|
||
|
d="M1318.522 38.596c-45.72-14.369-93.752-21.658-142.762-21.658H427.249c-84.346 0-165.764 21.683-235.441 62.713l3.118 51.726 49.245 15.865c54.16-31.895 117.452-48.739 183.073-48.739h748.511c38.159 0 75.52 5.657 111.029 16.829 44.91 14.111 86.594 37.205 120.526 66.792l66.163-57.68c-43.616-38.01-97.197-67.703-154.957-85.852z"
|
||
|
fill="#2951a3"
|
||
|
></path>
|
||
|
<path
|
||
|
d="M1473.479 124.453l-55.855 9.91-10.307 47.76c61.844 53.929 95.92 125.617 95.92 201.88a251.85 251.85 0 01-11.214 74.363c-38.348 124.311-168.398 211.129-316.262 211.129H726.949l25.121 40.783-25.121 40.783h448.812c190.107 0 357.303-111.638 406.613-271.498a323.69 323.69 0 0014.423-95.559c0-98.044-43.805-190.216-123.317-259.551z"
|
||
|
fill="#F49619"
|
||
|
></path>
|
||
|
</svg>
|
||
|
<svg
|
||
|
className="absolute"
|
||
|
width="20"
|
||
|
height="20"
|
||
|
fillRule="evenodd"
|
||
|
data-aut-id="icon"
|
||
|
viewBox="0 0 1024 1024"
|
||
|
>
|
||
|
<path
|
||
|
d="M414.898 123.739v291.218H123.68l-97.014 97.014 97.014 97.131h291.218v291.16l97.073 97.071 97.073-97.071v-291.16h291.16l97.131-97.131-97.131-97.014h-291.16V123.739l-97.073-97.073z"
|
||
|
className="rui-lquEm"
|
||
|
></path>
|
||
|
</svg>
|
||
|
</Link>
|
||
|
</>)
|
||
|
}
|
||
|
|
||
|
return (<>
|
||
|
<div className="relative">
|
||
|
<button onClick={() => route.push('/login')} className="block md:hidden h-[50px] mx-2 overflow-hidden rounded-[50px]">
|
||
|
<svg className="w-[40px] h-[40px] text-[#063242] dark:text-gray-400 group-hover:text-yellow-400 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||
|
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
|
||
|
</svg>
|
||
|
</button>
|
||
|
</div>
|
||
|
<div className="pt-3 hidden md:block">
|
||
|
<button className="text-[#db9233] hover:text-white border border-[#db9233] hover:bg-[#db9233] focus:ring-0 focus:outline-none focus:ring-[#db9233] font-bold rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2" onClick={() => route.push('/login') }>Login / Daftar</button>
|
||
|
</div>
|
||
|
</>)
|
||
|
}
|
||
|
|
||
|
const AddMenu = ({props}) => {
|
||
|
const { data: session } = useSession();
|
||
|
if (session && session.user) {
|
||
|
return (<>
|
||
|
<Link href="/post/add" data-tooltip-target="tooltip-new" type="button" className="inline-flex items-center justify-center w-10 h-10 font-medium bg-[#2951a3] rounded-full group focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
|
||
|
<svg className="w-4 h-4 text-[#56cced] hover:text-yellow-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||
|
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/>
|
||
|
</svg>
|
||
|
<span className="sr-only">New item</span>
|
||
|
</Link>
|
||
|
</>)
|
||
|
} else {
|
||
|
return (<>
|
||
|
<Link href="/login" data-tooltip-target="tooltip-new" type="button" className="inline-flex items-center justify-center w-10 h-10 font-medium bg-[#2951a3] rounded-full group focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
|
||
|
<svg className="w-4 h-4 text-[#56cced] hover:text-yellow-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||
|
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/>
|
||
|
</svg>
|
||
|
<span className="sr-only">New item</span>
|
||
|
</Link>
|
||
|
</>)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export const Header = function(){
|
||
|
const route = useRouter();
|
||
|
const {data: session} = useSession();
|
||
|
const [openModal, setOpenModal] = useState ();
|
||
|
const props = { openModal, setOpenModal };
|
||
|
const [hiddenSearch, setHiddenSearch] = useState(1);
|
||
|
const [hiddenMenus, setHiddenMenus] = useState(null);
|
||
|
const [phoneVerified, setPhoneVerified] = useState(1);
|
||
|
const pathName = usePathname()
|
||
|
const daftar = () =>{
|
||
|
signIn();
|
||
|
}
|
||
|
|
||
|
useEffect(function(){
|
||
|
pathName === '/'?setHiddenSearch(1): setHiddenSearch(null);
|
||
|
pathName.indexOf('produk/') != -1 ? setHiddenMenus(1) : setHiddenMenus(null);
|
||
|
// cari tinggi navbar
|
||
|
}, [pathName, setHiddenMenus, setHiddenSearch])
|
||
|
|
||
|
const [callUser, setCallUser] = useState(null);
|
||
|
|
||
|
const searchButton = function(){
|
||
|
goSeach(document.getElementById("search").value);
|
||
|
}
|
||
|
|
||
|
const goSeach = function(value){
|
||
|
value = encodeURI( value.toLowerCase().replace(/\ /g, '-') )
|
||
|
route.push('/search/q-'+value)
|
||
|
}
|
||
|
|
||
|
const keyDownAction = function(event){
|
||
|
if (event.code == 'NumpadEnter' || event.code == 'Enter'){
|
||
|
goSeach(event.target.value);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const ori = function(){
|
||
|
let ori = location.host;
|
||
|
if(ori == 'localhost:3000'){
|
||
|
return 'https://app.rumahjo.com';
|
||
|
}
|
||
|
if (ori == 'rumahjo.vercel.app'){
|
||
|
return 'https://app.rumahjo.com';
|
||
|
}
|
||
|
if (ori == 'rumahjo.com'){
|
||
|
return 'https://app.rumahjo.com';
|
||
|
}
|
||
|
return '';
|
||
|
}
|
||
|
|
||
|
if(session){
|
||
|
if(!callUser){
|
||
|
setCallUser(1);
|
||
|
console.log(session)
|
||
|
postData(ori() +'/data/simpan/user', {
|
||
|
uniqid: 'ID-USER-'+Date.now(),
|
||
|
data: session
|
||
|
})
|
||
|
.then(function(data){
|
||
|
if(data.telp && data.telp != ""){
|
||
|
setPhoneVerified(1);
|
||
|
}else{
|
||
|
setPhoneVerified(null);
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return (<>
|
||
|
<nav style={{borderBottom:'2px solid #F9CC0B'}} className="shadow-lg fixed top-0 z-[999] md:h-[85px] w-[100vw] bg-slate-50 text-white px-4 md:px-2 lg:px-10 py-2">
|
||
|
<div className="flex flex-wrap items-center justify-between mx-auto">
|
||
|
<Link className="flex md:justify-center md:items-center md:block" href="/">
|
||
|
<img src="/logo-h.png" alt="Rumahjo - Rumah Jasa Online" className="h-[50px] md:h-[70px] pt-0 md:pt-1"></img>
|
||
|
</Link>
|
||
|
{/* <div className="md:hidden " id="menuLocation" style={{flexGrow:"1", maxWidth:"calc(100% - 100px)"}}>
|
||
|
<div className="flex" style={{justifyContent:"flex-end"}}>
|
||
|
<div style={{margin: "0 8px 0 0", display: "inline-block", maxWidth: "calc(100% - 28px)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>Malang</div>
|
||
|
<svg width="19px" height="19px" fill="#fff" viewBox="0 0 1024 1024" data-aut-id="icon" className="text-white" fillRule="evenodd">
|
||
|
<path className="rui-w4DG7" d="M512 85.333c211.755 0 384 172.267 384 384 0 200.576-214.805 392.341-312.661 469.333v0h-142.656c-97.856-76.992-312.683-268.757-312.683-469.333 0-211.733 172.267-384 384-384zM512 170.667c-164.672 0-298.667 133.973-298.667 298.667 0 160.021 196.885 340.523 298.453 416.597 74.816-56.725 298.88-241.323 298.88-416.597 0-164.693-133.973-298.667-298.667-298.667zM512.006 298.66c94.101 0 170.667 76.565 170.667 170.667s-76.565 170.667-170.667 170.667c-94.101 0-170.667-76.565-170.667-170.667s76.565-170.667 170.667-170.667zM512.006 383.994c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333c47.061 0 85.333-38.272 85.333-85.333s-38.272-85.333-85.333-85.333z"></path>
|
||
|
</svg>
|
||
|
</div>
|
||
|
</div> */}
|
||
|
<div className="md:w-full md:w-[calc(100vw-250px)] lg:w-[calc(100vw-320px)] flex items-center justify-end md:absolute right-[30px] md:right-[0px] lg:right-[30px] h-[auto] top-[10px]">
|
||
|
<div className={hiddenSearch?`hidden`:`hidden flex justify-end overflow-hidden rounded-md`}>
|
||
|
<input id="search" placeholder="Search..." onKeyDown={keyDownAction} className="p-0 m-0 inline-block w-[100vw] md:w-[37vw] lg:w-[100vw] h-[45px] px-2 text-[1.3rem] text-gray-700 border-2 rounded-l-md border-[#db9233]" />
|
||
|
<button onClick={searchButton} className="px-4 font-semibold py-2 h-[45px] bg-[#db9233]">GO</button>
|
||
|
</div>
|
||
|
<div className="flex md:min-w-[200px] md:w-[200px] justify-center items-center">
|
||
|
<ButtonLogin verify={phoneVerified} props={props} />
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</nav>
|
||
|
{!hiddenMenus?
|
||
|
<div className="fixed md:hidden z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600">
|
||
|
<div className="grid h-full max-w-lg grid-cols-3 mx-auto">
|
||
|
<Link href="/" data-tooltip-target="tooltip-home" type="button" className="inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group">
|
||
|
<svg className="w-5 h-5 mb-1 text-[#063242] dark:text-gray-400 group-hover:text-yellow-400 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||
|
<path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
|
||
|
</svg>
|
||
|
<span className="sr-only">Home</span>
|
||
|
</Link>
|
||
|
{/* <button data-tooltip-target="tooltip-wallet" type="button" className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
|
||
|
<svg className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-yellow-400 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid meet">
|
||
|
<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
|
||
|
<path d="M575 2351 c-60 -10 -125 -50 -163 -101 l-35 -45 829 -5 829 -5 56 -26 c76 -36 129 -86 170 -161 l34 -63 3 -578 3 -577 28 14 c47 25 99 91 116 149 14 48 15 130 13 633 l-3 579 -30 54 c-32 57 -67 90 -131 118 -36 17 -96 18 -859 19 -451 1 -838 -1 -860 -5z"/>
|
||
|
<path d="M290 2091 c-50 -16 -89 -41 -124 -83 -66 -76 -66 -78 -66 -703 0 -646 -1 -635 80 -715 63 -64 117 -80 267 -80 l113 0 0 -33 c0 -18 -7 -58 -16 -88 -13 -43 -27 -65 -75 -110 -64 -61 -73 -89 -36 -114 29 -19 152 -6 246 26 125 43 246 150 302 269 l23 49 506 3 c496 3 506 3 545 25 53 28 99 78 124 133 20 44 21 63 21 631 0 418 -3 596 -12 620 -19 58 -67 115 -121 145 l-52 29 -850 2 c-467 1 -861 -2 -875 -6z"/>
|
||
|
</g>
|
||
|
</svg>
|
||
|
<span className="sr-only">Obrolan</span>
|
||
|
</button> */}
|
||
|
<div className="flex items-center justify-center">
|
||
|
<AddMenu props={props} />
|
||
|
</div>
|
||
|
{/* <button data-tooltip-target="tooltip-settings" type="button" className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
|
||
|
<svg className="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-yellow-400 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||
|
</svg>
|
||
|
<span className="sr-only">Favorit</span>
|
||
|
</button> */}
|
||
|
<button onClick={()=>{
|
||
|
session
|
||
|
?
|
||
|
route.push('/profile/edit')
|
||
|
:
|
||
|
route.push('/login')
|
||
|
}} data-tooltip-target="tooltip-profile" type="button" className="inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group">
|
||
|
{session ?
|
||
|
<img className="rounded-full" src={session.user.image} alt="" width={27.25} height={27.25} />
|
||
|
:
|
||
|
<svg className="w-5 h-5 mb-1 text-[#063242] dark:text-gray-400 group-hover:text-yellow-400 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||
|
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
|
||
|
</svg>
|
||
|
}
|
||
|
<span className="sr-only">Profile</span>
|
||
|
</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
:
|
||
|
<></>
|
||
|
}
|
||
|
{/* <nav className="px-10 py-2 bg-white shadow-md text-gray-600">
|
||
|
<button className="pr-5">SEMUA KATEGORI</button>
|
||
|
<Link className="pr-5 text-[14px]" href="/">Property</Link>
|
||
|
<Link className="pr-5 text-[14px]" href="/">Rumah KPR</Link>
|
||
|
<Link className="pr-5 text-[14px]" href="/">KPR</Link>
|
||
|
</nav> */}
|
||
|
|
||
|
<Modal show={props.openModal === 'default'} size="md" onClose={() => props.setOpenModal(undefined)}>
|
||
|
<Modal.Header></Modal.Header>
|
||
|
<Modal.Body>
|
||
|
<div className="space-y-6">
|
||
|
<button onClick={daftar} className="border-[1px] text-[1.1rem] cursor-pointer text-gray-700 rounded-md border-gray-400 p-2 w-full">
|
||
|
Login/Daftar dengan Google
|
||
|
</button>
|
||
|
{/* <button onClick={daftar} className="border-[2px] text-[1.1rem] cursor-pointer rounded-md border-black p-2 w-full">
|
||
|
Login/Daftar dengan email
|
||
|
</button> */}
|
||
|
</div>
|
||
|
</Modal.Body>
|
||
|
<Modal.Footer>
|
||
|
<div>
|
||
|
<p className="mx-2 text-[12px] text-gray-700 text-center">Kami tidak akan membagikan detail pribadi anda dengan siapapun</p>
|
||
|
<p className="mx-2 text-[12px] text-gray-700 text-center">Jika anda login, anda menerima Syarat dan Ketentuan serta Kebijakan Privasi RumahJo</p>
|
||
|
</div>
|
||
|
</Modal.Footer>
|
||
|
</Modal>
|
||
|
|
||
|
</>)
|
||
|
}
|