-
+ <>
+
+
+
+
+
+ )
+}
+
+function MainTabChatRoom({room}) {
+ var { register, control, reset, handleSubmit} = useForm()
+ const [chats, setData] = useState(null)
+ const [isLoading, setLoading] = useState(true)
+
+ var user
+ fetch('/api/user')
+ .then((res) => res.json())
+ .then((data) => {
+ user = data
+ })
+
+ var unsubscribeUpdater
+ useEffect(() => {
+ unsubscribeUpdater = onValue(ref(database, `/rooms/${room}/chats`), (snapshot) => {
+ var chatsArr = []
+ var messages = snapshot.val()
+ for (var message in messages) {
+ chatsArr.push(
)
+ }
+ setData(chatsArr.reverse())
+ setLoading(false)
+ })
+ }, [])
+
+ function sendMessage(data) {
+ reset()
+ var payload = {
+ body: data.message,
+ user: user.username,
+ timestamp: new Date().getTime()
+ }
+ set(ref(database,`/rooms/${room}/chats/${user.username}-${new Date().getTime()}`), payload)
+ }
+
+
+ if (isLoading) return Loading
+ if (!chats) return No Chats
+ return (
+
)
}
+function CreateRoom({loc}) {
+ var { register, control, reset, handleSubmit} = useForm()
+ function createRoom(data) {
+ reset()
+ var path = String(loc.latitude.toFixed(2)).replace(".","")+"/"+String(loc.longitude.toFixed(2)).replace(".","")
+ var timestamp = new Date().getTime()
+ var payload = {
+ name: data.name,
+ description: data.description,
+ timestamp: timestamp,
+ latitude: loc.latitude,
+ longitude: loc.longitude,
+ path: path
+ }
+ set(ref(database,`/rooms/${path}/${data.name}-${timestamp}`), payload)
+ }
+
+ return (
+
+ )
+}
+
+function Home() {
+ var [tab, setTab] = useState("nearby")
+ var [mainTab, setMainTab] = useState("home")
+ var [chatRoom, setChatRoom] = useState("Dev")
+
+ const [myRooms, setRoomData] = useState(null)
+ const [isRoomLoading, setRoomLoading] = useState(true)
+ useEffect(() => {
+ fetch('/api/user').then((res) => res.json())
+ .then((user) => {
+ get(ref(database, '/users/'+user.uid+'/rooms')).then((snapshot) => {
+ var rooms = snapshot.val()
+ var roomArr = []
+ for (var room in rooms) {
+ roomArr.push( {setChatRoom(rooms[room].path+"/"+rooms[room].name+"-"+rooms[room].timestamp);setMainTab("chat")}}/>)
+ }
+ setRoomData(roomArr)
+ setRoomLoading(false)
+ })
+ })
+ }, [])
+
+
+ const [location, setLocation] = useState(null);
+ const [loadingLoc, setLoadingLoc] = useState(true)
+ const [nearby, setNearby] = useState(null);
+ const [loadingNearby, setLoadingNearby] = useState(true);
+ useEffect(() => {
+ if('geolocation' in navigator) {
+ // Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API
+ navigator.geolocation.getCurrentPosition(({ coords }) => {
+ setLocation(coords)
+ setLoadingLoc(false)
+ var nearbyArr = []
+ var path = String(coords.latitude.toFixed(2)).replace(".","")+"/"+String(coords.longitude.toFixed(2)).replace(".","")
+ get(ref(database, `/rooms/${path}`)).then((snapshot) => {
+ if (snapshot.exists()) {
+ var data = snapshot.val()
+ for (var room in data) {
+ nearbyArr.push( {setChatRoom(data[room].path+"/"+data[room].name+"-"+data[room].timestamp);setMainTab("chat")}}/>)
+ }
+ setLoadingNearby(false)
+ setNearby(nearbyArr)
+ } else {
+ setLoadingNearby(false)
+ }
+ })
+ })
+ }
+ }, []);
+
+
+ return (
+
+
+
+
+
+
+
+
+
+ {(mainTab == "home" && !loadingLoc) && }
+ {(mainTab == "home" && loadingLoc) && }
+ {mainTab == "chat" && }
+
+
+
+
+
+
+
{setTab("nearby")}}>Nearby
+
{setTab("rooms")}}>My Rooms
+
{setTab("create")}}>Create
+
+
+ {tab == "nearby" &&
+
+ {(!nearby && !loadingNearby) &&
No Nearby Rooms
Create One?
}
+ {loadingNearby &&
Loading...
}
+ {nearby}
+
+
}
+ {tab == "rooms" &&
+
+ {isRoomLoading &&
Loading
}
+ {(!myRooms && !isRoomLoading) &&
No User Saved Rooms
}
+ {myRooms}
+
+
}
+ {(tab == "create" && !loadingLoc) &&
}
+ {(tab == "create" && loadingLoc) && Loading...
}
+
+
+
-
-