Skip to content

Commit

Permalink
Prettier Fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@Atikpui007
Atikpui007 committed Nov 16, 2024
1 parent b452fec commit d6a966a
Show file tree
Hide file tree
Showing 6 changed files with 226 additions and 165 deletions.
95 changes: 62 additions & 33 deletions frontend/src/components/Locations/AddLocationModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
import React, { useState, useEffect } from 'react';
import {
Dialog,
DialogTitle,
DialogContent,
import {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
TextField,
Button,
Select,
MenuItem,
FormControl,
InputLabel
InputLabel,
} from '@mui/material';
import { PlacesSearch } from './PlacesSearch';


// TODO : Move to the index.ts since it is a constant
const CAMPUS_OPTIONS = [
'North Campus',
'West Campus',
'West Campus',
'Central Campus',
'South Campus',
'Commons',
'Other'
'Other',
] as const;

interface Location {
Expand All @@ -42,20 +41,20 @@ interface AddLocationModalProps {
export const AddLocationModal: React.FC<AddLocationModalProps> = ({
open,
onClose,
onAdd
onAdd,
}) => {
const [newLocation, setNewLocation] = useState<Location>({
name: '',
address: '',
info: '',
tag: 'Other',
lat: 0,
lng: 0
lng: 0,
});

const [errors, setErrors] = useState({
name: '',
info: ''
info: '',
});

useEffect(() => {
Expand All @@ -66,22 +65,22 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
info: '',
tag: 'Other',
lat: 0,
lng: 0
lng: 0,
});
setErrors({
name: '',
info: ''
info: '',
});
}
}, [open]);

const handleAddressSelect = (address: string, lat: number, lng: number) => {
console.log('Address selected:', { address, lat, lng });
setNewLocation(prev => ({
setNewLocation((prev) => ({
...prev,
address,
lat,
lng
lng,
}));
};

Expand All @@ -98,8 +97,8 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const name = e.target.value;
const error = validateName(name);
setErrors(prev => ({ ...prev, name: error }));
setNewLocation(prev => ({ ...prev, name }));
setErrors((prev) => ({ ...prev, name: error }));
setNewLocation((prev) => ({ ...prev, name }));
};

const handleSubmit = () => {
Expand All @@ -108,10 +107,16 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({

setErrors({
name: nameError,
info: infoError
info: infoError,
});

if (!nameError && !infoError && newLocation.address && newLocation.lat && newLocation.lng) {
if (
!nameError &&
!infoError &&
newLocation.address &&
newLocation.lat &&
newLocation.lng
) {
console.log('Submitting location:', newLocation);
onAdd(newLocation);
onClose();
Expand All @@ -127,7 +132,14 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<DialogTitle>Add New Location</DialogTitle>
<DialogContent>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem',
marginTop: '1rem',
}}
>
<TextField
label="Location Name"
fullWidth
Expand All @@ -136,14 +148,20 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
error={!!errors.name}
helperText={errors.name}
/>

<div>
<label style={{ display: 'block', marginBottom: '0.5rem', color: 'rgba(0, 0, 0, 0.6)' }}>
<label
style={{
display: 'block',
marginBottom: '0.5rem',
color: 'rgba(0, 0, 0, 0.6)',
}}
>
Address
</label>
<PlacesSearch onAddressSelect={handleAddressSelect} />
</div>

<TextField
label="Description"
fullWidth
Expand All @@ -152,8 +170,11 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
value={newLocation.info}
onChange={(e) => {
const info = e.target.value;
setErrors(prev => ({ ...prev, info: info ? '' : 'Description is required' }));
setNewLocation(prev => ({ ...prev, info }));
setErrors((prev) => ({
...prev,
info: info ? '' : 'Description is required',
}));
setNewLocation((prev) => ({ ...prev, info }));
}}
error={!!errors.info}
helperText={errors.info}
Expand All @@ -164,10 +185,12 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
<Select
value={newLocation.tag}
label="Campus"
onChange={(e) => setNewLocation(prev => ({
...prev,
tag: e.target.value
}))}
onChange={(e) =>
setNewLocation((prev) => ({
...prev,
tag: e.target.value,
}))
}
>
{CAMPUS_OPTIONS.map((campus) => (
<MenuItem key={campus} value={campus}>
Expand All @@ -180,15 +203,21 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button
<Button
onClick={handleSubmit}
variant="contained"
variant="contained"
color="primary"
disabled={!newLocation.name || !newLocation.address || !newLocation.info || !newLocation.lat || !newLocation.lng}
disabled={
!newLocation.name ||
!newLocation.address ||
!newLocation.info ||
!newLocation.lat ||
!newLocation.lng
}
>
Add Location
</Button>
</DialogActions>
</Dialog>
);
};
};
67 changes: 38 additions & 29 deletions frontend/src/components/Locations/LocationMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React, { useCallback, useEffect } from 'react';
import { Map, AdvancedMarker, Pin, useMap } from '@vis.gl/react-google-maps';
import styles from './locations.module.css';


// TODO : Move interface description into the index.ts and import cleaner code = better code
// TODO : Move interface description into the index.ts and import cleaner code = better code
interface Location {
id: number;
name: string;
Expand All @@ -27,36 +26,48 @@ export const LocationMap: React.FC<LocationMapProps> = ({
}) => {
const map = useMap();

const handleMarkerClick = useCallback((location: Location): void => {
onLocationSelect(location);
}, [onLocationSelect]);
const handleMarkerClick = useCallback(
(location: Location): void => {
onLocationSelect(location);
},
[onLocationSelect]
);

// Check if a location is within the current viewport
const isLocationInBounds = useCallback((map: google.maps.Map, location: Location): boolean => {
const bounds = map.getBounds();
if (!bounds) return false;
return bounds.contains({ lat: location.lat, lng: location.lng });
}, []);
const isLocationInBounds = useCallback(
(map: google.maps.Map, location: Location): boolean => {
const bounds = map.getBounds();
if (!bounds) return false;
return bounds.contains({ lat: location.lat, lng: location.lng });
},
[]
);

// Simple animation based on whether location is in bounds or not
const animateToLocation = useCallback((map: google.maps.Map, location: Location): void => {
const isInBounds = isLocationInBounds(map, location);
const targetPosition: google.maps.LatLngLiteral = { lat: location.lat, lng: location.lng };
const defaultZoom = 13;
const animateToLocation = useCallback(
(map: google.maps.Map, location: Location): void => {
const isInBounds = isLocationInBounds(map, location);
const targetPosition: google.maps.LatLngLiteral = {
lat: location.lat,
lng: location.lng,
};
const defaultZoom = 13;

if (!isInBounds) {
// If out of bounds, zoom out first then pan
map.setZoom(11); // Zoom out
setTimeout(() => {
map.panTo(targetPosition);
if (!isInBounds) {
// If out of bounds, zoom out first then pan
map.setZoom(11); // Zoom out
setTimeout(() => {
map.setZoom(defaultZoom);
map.panTo(targetPosition);
setTimeout(() => {
map.setZoom(defaultZoom);
}, 300);
}, 300);
}, 300);
} else {
map.panTo(targetPosition);
}
}, [isLocationInBounds]);
} else {
map.panTo(targetPosition);
}
},
[isLocationInBounds]
);

useEffect(() => {
if (map && selectedLocation) {
Expand All @@ -82,9 +93,7 @@ export const LocationMap: React.FC<LocationMapProps> = ({
>
<Pin
background={
selectedLocation?.id === location.id
? '#1976d2'
: '#FBBC04'
selectedLocation?.id === location.id ? '#1976d2' : '#FBBC04'
}
glyphColor="#000"
borderColor="#000"
Expand All @@ -94,4 +103,4 @@ export const LocationMap: React.FC<LocationMapProps> = ({
))}
</Map>
);
};
};
22 changes: 12 additions & 10 deletions frontend/src/components/Locations/LocationsContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import LocationOnIcon from '@mui/icons-material/LocationOn';
import { Chip } from '@mui/material';
import styles from './locations.module.css';


// TODO : Move to the index.ts file cleaner code = better code
interface Location {
id: number;
Expand All @@ -22,17 +21,20 @@ interface LocationsContentProps {
}

const LocationsContent: React.FC<LocationsContentProps> = ({ locations }) => {
const [filteredLocations, setFilteredLocations] = useState<Location[]>(locations);
const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
const [filteredLocations, setFilteredLocations] =
useState<Location[]>(locations);
const [selectedLocation, setSelectedLocation] = useState<Location | null>(
null
);

// Update filtered locations whenever locations prop changes
useEffect(() => {
console.log('Locations updated in LocationsContent:', locations);
setFilteredLocations(locations);
}, [locations]);

const uniqueTags = useMemo(() =>
Array.from(new Set(locations.map(location => location.tag))),
const uniqueTags = useMemo(
() => Array.from(new Set(locations.map((location) => location.tag))),
[locations]
);

Expand All @@ -53,11 +55,11 @@ const LocationsContent: React.FC<LocationsContentProps> = ({ locations }) => {
{
field: 'tag',
label: 'Type',
options: uniqueTags.map(tag => ({
options: uniqueTags.map((tag) => ({
value: tag,
label: tag.charAt(0).toUpperCase() + tag.slice(1)
}))
}
label: tag.charAt(0).toUpperCase() + tag.slice(1),
})),
},
]}
onFilterApply={handleFilterApply}
/>
Expand Down Expand Up @@ -112,4 +114,4 @@ const LocationsContent: React.FC<LocationsContentProps> = ({ locations }) => {
);
};

export default LocationsContent;
export default LocationsContent;
Loading

0 comments on commit d6a966a

Please sign in to comment.