npease/ChatMaps
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

UI Changes, Prepare for Chatrooms

Browse Source
This commit is contained in:
Nicholas Pease
2024-02-24 06:35:23 +00:00
parent 9ee8bf3376
commit eeb6b856e6
4 changed files with 74 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-next/src/app/api/signout/route.js
+1 -1
View File
@@ -6,5 +6,5 @@ export async function GET(req) {
cookies().delete('user')
cookies().delete('session')
cookies().delete('uid')
return NextResponse.json({}, { status: 200 });
return NextResponse.redirect(new URL("/",req.url))
}
frontend-next/src/app/app/layout.js
-7
View File
@@ -1,6 +1,5 @@
import { Inter } from "next/font/google";
import "../globals.css";
import { Header, Sidebar } from "./shared"
const inter = Inter({ subsets: ["latin"] });
@@ -13,13 +12,7 @@ export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<div className="grid grid-cols-4 auto-cols-max overflow-hidden">
<div className="col-span-3 h-page">
<Header/>
{children}
</div>
<Sidebar/>
</div>
</body>
</html>
);
frontend-next/src/app/app/page.js
+73 -6
View File
@@ -1,6 +1,66 @@
"use client"
import { useState, useEffect } from 'react'
import {Map, Marker} from "pigeon-maps"
import {Map, Marker, ZoomControl} from "pigeon-maps"
function Header() {
return (
<div className="m-2 rounded-lg h-[60px] bg-white shadow-2xl">
<a href="/"><img src="/logos/logo_transparent_inverse.png" className="h-[60px]"/></a>
</div>
)
}
function Sidebar() {
var nearbyTab = false
return (
<div className="h-dvh">
<div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
<div className='p-2'>
<div className='p-1 rounded-lg grid grid-cols-3 bg-white'>
<div className='p-1 cursor-pointer rounded-lg bg-[#D3D3D3] hover:bg-white' onClick={() => {nearbyTab = true}}>Nearby</div>
<div className='p-1 cursor-pointer rounded-lg hover:bg-[#D3D3D3] bg-white'>My Rooms</div>
<div className='p-1 cursor-pointer rounded-lg hover:bg-[#D3D3D3] bg-white'>Create</div>
</div>
</div>
{nearbyTab && <div className='overflow-y-auto h-[90%]'>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General Last"/>
</div> }
</div>
</div>
)
}
function ChatRoomSidebar({roomName}) {
return (
<div className='border-[black] border-1 shadow-lg p-2 m-2 rounded-lg grid grid-cols-3 cursor-pointer'>
<div className=''>
Icons
</div>
<div className='col-span-2'>
<div className='font-bold'>{roomName}</div>
<div className='italic'> x Members</div>
</div>
</div>
)
}
function WelcomeMessage() {
//TODO: REALLY GROSS WAY TO GET COOKIES, NEED NEW WAY TO STORE USER DATA WITHOUT API CALLS. THIS PAGE HAS TO BE CLIENT SIDE DUE TO MAPS / GEOLOCATION
@@ -20,7 +80,7 @@ function WelcomeMessage() {
return (
<div className="bg-white rounded-lg m-2 mt-4 text-left p-2 pl-5">
<div>
Welcome, {data.firstName} {data.lastName}
Welcome, {data.firstName} {data.lastName} ({data.username})
</div>
<div>
Lets see what&apos;s happening in your area.
@@ -47,6 +107,7 @@ function Geo() {
return (
<Map className="rounded-lg" center={[data.latitude, data.longitude]} defaultZoom={14}>
<Marker width={50} anchor={[data.latitude, data.longitude]} color="red"/>
<ZoomControl />
</Map>
)
} else {
@@ -59,11 +120,17 @@ function Geo() {
function Home() {
return (
<div className="h-[calc(100%-75px)]">
<WelcomeMessage/>
<div className='h-[calc(100%-110px)] m-5 rounded-lg'>
<Geo/>
<div className="grid grid-cols-4 auto-cols-max overflow-hidden">
<div className="col-span-3 h-page">
<Header/>
<div className="h-[calc(100%-75px)]">
<WelcomeMessage/>
<div className='h-[calc(100%-110px)] m-5 rounded-lg'>
<Geo/>
</div>
</div>
</div>
<Sidebar/>
</div>
)
}
frontend-next/src/app/app/shared.js
-18
View File
@@ -1,18 +0,0 @@
export function Header() {
return (
<div className="m-2 rounded-lg h-[60px] bg-white shadow-2xl">
<a href="/"><img src="/logos/logo_transparent_inverse.png" className="h-[60px]"/></a>
</div>
)
}
export function Sidebar() {
return (
<div className="h-dvh">
<div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
Sidebar
</div>
</div>
)
}