bsherriff/aviation
1
1
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Working on profile picture

Browse Source
This commit is contained in:
Ben Sherriff
2023-12-22 14:38:29 -05:00
parent 4441d99f25
commit c99ebd4a5f
13 changed files with 584 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/api/users.ts
View File

@@ -3,7 +3,7 @@ import { deleteRequest, getRequest, postRequest } from '.';
export async function getPicture(): Promise<Blob | undefined> {
const response = await getRequest('users/picture');
if (response?.status === 200) {
return response.blob();
return await response.blob();
} else {
return undefined;
}

35
ui/src/app/profile/page.tsx
View File

@@ -4,9 +4,9 @@ import { getAirports } from "@/api/airport";
import { Airport } from "@/api/airport.types";
import { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { Badge, Button, Card, Grid, Group, SimpleGrid, Text, Title } from "@mantine/core";
import { Autocomplete, Badge, Box, Button, Card, Grid, Group, SimpleGrid, Text, Title } from "@mantine/core";
import classes from './profile.module.css';
import { getFavorites, removeFavorite } from "@/api/users";
import { addFavorite, getFavorites, removeFavorite } from "@/api/users";
import { getMetars } from "@/api/metar";
import { Metar } from "@/api/metar.types";
import { MdLocationSearching } from 'react-icons/md';
@@ -20,7 +20,7 @@ export default function Page() {
return (
<Grid gutter={80}>
<Grid.Col span={12}>
<Card shadow="sm" m={"lg"} padding="lg" radius="md" withBorder>
<Box m="lg">
<Title className={classes.title} order={2}>
{user?.first_name} {user?.last_name}
</Title>
@@ -28,7 +28,7 @@ export default function Page() {
<Text c="dimmed">
</Text>
</Card>
</Box>
</Grid.Col>
<Grid.Col span={12}>
<TopSection />
@@ -40,6 +40,8 @@ export default function Page() {
function TopSection() {
const [airports, setAirports] = useState<Airport[]>([]);
const [metars, setMetars] = useState<Metar[]>([]);
const [search, setSearch] = useState<string>('');
const [searchAirports, setSearchAirports] = useState<Airport[]>([]);
const router = useRouter();
const [_, setCoordinates] = useRecoilState(coordinatesState);
@@ -96,6 +98,9 @@ function TopSection() {
size="sm"
radius="lg"
style={{ marginTop: '10px' }}
onClick={() => {
router.push(`/airport/${airport.icao}`);
}}
>
View
</Button>
@@ -142,6 +147,28 @@ function TopSection() {
Saved Airports
</Title>
<hr />
<Autocomplete
label='Add an airport to your favorites'
placeholder='ICAO or Airport Name'
value={search}
data={searchAirports.map((a) => ({ value: a.icao, label: `${a.icao} - ${a.name}` }))}
limit={5}
style={{ paddingBottom: '10px' }}
onChange={async (value) => {
setSearch(value);
if (value) {
const a = await getAirports({ icaos: [value], name: value });
setSearchAirports(a.data);
}
}}
onOptionSubmit={async (value) => {
if (!airports.find((a) => a.icao === value)) {
await addFavorite(value);
await updateFavorites();
}
setSearch('');
}}
/>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing={30}>
{airports.map((airport) => AirportCard(airport))}
</SimpleGrid>

13
ui/src/components/Header/HeaderModal.tsx
View File

@@ -14,6 +14,7 @@ import {
Text
} from '@mantine/core';
import { useForm } from '@mantine/form';
import Cookies from 'js-cookie';
interface HeaderModalProps {
type?: string;
@@ -72,9 +73,9 @@ export function HeaderModal({ type, toggle, login, register }: HeaderModalProps)
const loginForm = useForm({
initialValues: {
email: '',
email: Cookies.get('email') || '',
password: '',
remember: false
remember: Cookies.get('remember') === 'true'
}
});
@@ -173,6 +174,12 @@ export function HeaderModal({ type, toggle, login, register }: HeaderModalProps)
<Paper withBorder shadow='md' p={30} mt={30} radius='md'>
<form
onSubmit={loginForm.onSubmit(async (values) => {
Cookies.set('remember', 'true', { expires: 365 });
if (values.remember) {
Cookies.set('email', values.email, { expires: 365 });
} else {
Cookies.remove('email');
}
const success = await login(values);
if (success) {
onClose();
@@ -188,7 +195,7 @@ export function HeaderModal({ type, toggle, login, register }: HeaderModalProps)
{...loginForm.getInputProps('password')}
/>
<Group justify='space-between' mt='lg'>
<Checkbox label='Remember me' {...loginForm.getInputProps('remember')} />
<Checkbox label='Remember me' defaultChecked={loginForm.values.remember} {...loginForm.getInputProps('remember')} />
<Anchor component='a' size='sm' onClick={() => toggle('reset')}>
Forgot password?
</Anchor>

2
ui/src/components/Header/header.css
View File

@@ -2,7 +2,7 @@
display: flex;
justify-content: space-between;
height: 46px;
background-color: #0057a3;
background-color: #242d3e;
color: white;
}

8
ui/src/components/Header/index.tsx
View File

@@ -12,6 +12,8 @@ import { HeaderModal } from './HeaderModal';
import { coordinatesState } from '@/state/map';
import { User } from '@/api/auth.types';
import { usePathname, useRouter } from 'next/navigation';
import { FaMoon } from "react-icons/fa6";
import { FaSun } from "react-icons/fa6";
interface HeaderProps {
user: User | undefined;
@@ -106,6 +108,10 @@ function UserSection({ user, profilePicture, setProfilePicture, logout, toggle }
return (
<div className='user-section'>
<>
{/* <UnstyledButton> */}
{/* <FaMoon /> */}
{/* <FaSun /> */}
{/* </UnstyledButton> */}
{user ? (
<Menu shadow='md' width={200} openDelay={100} closeDelay={400}>
<Menu.Target>
@@ -136,7 +142,7 @@ function UserSection({ user, profilePicture, setProfilePicture, logout, toggle }
});
}
}}
accept='image/png,image/jpeg,image/jpg'
accept='image/png,image/jpeg,image/svg+xml,image/webp,image/gif,image/apng,image/avif'
multiple={false}
>
{(props) => (

76
ui/src/components/Loader.tsx
View File

@@ -1,36 +1,33 @@
'use client';
import { useEffect, useState } from "react";
import Header from "./Header";
import { useRecoilState } from "recoil";
import { refreshIdState, userState } from "@/state/auth";
import { login, logout, refresh, refreshLoggedIn, register } from "@/api/auth";
import { getFavorites, getPicture } from "@/api/users";
import Cookies from "js-cookie";
import { favoritesState, profilePictureState } from "@/state/user";
import { notifications } from "@mantine/notifications";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from 'react';
import Header from './Header';
import { useRecoilState } from 'recoil';
import { refreshIdState, userState } from '@/state/auth';
import { login, logout, refresh, refreshLoggedIn, register } from '@/api/auth';
import { getFavorites, getPicture } from '@/api/users';
import Cookies from 'js-cookie';
import { favoritesState } from '@/state/user';
import { notifications } from '@mantine/notifications';
import { usePathname, useRouter } from 'next/navigation';
export default function Loader({ children }: { children: any }) {
const [loading, setLoading] = useState(true);
const [user, setUser] = useRecoilState(userState);
const [refreshId, setRefreshId] = useRecoilState(refreshIdState);
const [_, setFavorites] = useRecoilState(favoritesState);
const [profilePicture, setProfilePicture] = useRecoilState(profilePictureState);
const [profilePicture, setProfilePicture] = useState<File | undefined>(undefined);
const path = usePathname();
const router = useRouter();
useEffect(() => {
setLoading(true);
if (!user || !Cookies.get("logged_in")) {
if (!user || !Cookies.get('logged_in')) {
refreshUser();
}
setLoading(false);
}, [user]);
}, []);
useEffect(() => {
const p = path.split('/');
console.log(p[1], user);
if (p.length > 1) {
if (p[1] == 'admin' && user?.role != 'admin') {
@@ -41,31 +38,36 @@ export default function Loader({ children }: { children: any }) {
}
}, [path]);
function refreshUser() {
refresh().then((response) => {
if (response) {
setRefreshId(refreshLoggedIn());
setUser(response.user);
getFavorites().then((response) => {
if (response) {
setFavorites(response);
}
});
if (response.user.profile_picture) {
getPicture().then((response) => {
if (response) {
setProfilePicture(response as File);
}
});
async function refreshUser() {
setLoading(true);
const response = await refresh();
if (response) {
setRefreshId(refreshLoggedIn());
setUser(response.user);
const favoritesResponse = await getFavorites();
if (favoritesResponse) {
setFavorites(favoritesResponse);
}
if (response.user.profile_picture) {
const pictureResponse = await getPicture();
if (pictureResponse) {
setProfilePicture(pictureResponse as File);
}
}
});
}
setLoading(false);
}
async function loginUser({ email, password }: { email: string, password: string}): Promise<boolean> {
const loginResponse = await login(email, password);
if (loginResponse) {
setUser(loginResponse.user);
if (loginResponse.user.profile_picture) {
const pictureResponse = await getPicture();
if (pictureResponse) {
setProfilePicture(pictureResponse as File);
}
}
setRefreshId(refreshLoggedIn());
notifications.show({
title: `Welcome back ${loginResponse.user.first_name}!`,
@@ -89,7 +91,7 @@ export default function Loader({ children }: { children: any }) {
async function logoutUser(): Promise<void> {
await logout();
Cookies.remove("logged_in");
Cookies.remove('logged_in');
setUser(undefined);
setFavorites([]);
setProfilePicture(undefined);
@@ -117,6 +119,12 @@ export default function Loader({ children }: { children: any }) {
const loginResponse = await login(email, password);
if (loginResponse) {
setUser(loginResponse.user);
if (loginResponse.user.profile_picture) {
const pictureResponse = await getPicture();
if (pictureResponse) {
setProfilePicture(pictureResponse as File);
}
}
setRefreshId(refreshLoggedIn());
notifications.update({
id,

5
ui/src/state/user.ts
View File

@@ -4,8 +4,3 @@ export const favoritesState = atom({
key: 'favoritesState',
default: [] as string[]
});
export const profilePictureState = atom({
key: 'profilePictureState',
default: undefined as File | undefined
});