feature/map

src/@types/problems.ts

@@ -5,7 +5,8 @@ export interface IProblem {
   sector: string;
   author: string;
   status: string;
-  image: string;
+  userImages: string[];
+  adminImages: string[];
   description: string;
   comments: IComment[];
   location: ILocation;
@@ -23,6 +24,6 @@ interface ILocation {
   city?: string;
   state?: string;
   district?: string;
-  lat: number;
-  lg: number;
+  latitude: number;
+  longitude: number;
 }

src/pages/Dashboard/Map/Marker/index.tsx

@@ -21,7 +21,7 @@ const defaultOptions = {
   iconSize: new L.Point(50, 55),
   iconAnchor: new L.Point(25, 55),
   shadowUrl: iconShadow
-}
+};
 
 const SafetyIcon = new L.Icon({
   iconUrl: safety,
@@ -47,6 +47,7 @@ const InfraestrutureIcon = new L.Icon({
   iconUrl: infraestruture,
   ...defaultOptions
 });
+
 const OtherIcon = new L.Icon({
   iconUrl: other,
   ...defaultOptions
@@ -56,6 +57,7 @@ const SewerIcon = new L.Icon({
   iconUrl: sewer,
   ...defaultOptions
 });
+
 const EducationIcon = new L.Icon({
   iconUrl: education,
   ...defaultOptions
@@ -72,14 +74,14 @@ const markerIcons: Record<string, L.Icon> = {
   energy: EnergyIcon
 };
 
-const CustomMarker: React.FC<CustomMarkerProps> = ({ problem, children }) => {
-  if(!problem.location.lat || !problem.location.lg) problem.location = { lat: -7.21667, lg: -35.908813}
-  const { lat, lg } = problem.location;
+const CustomMarker: React.FC<CustomMarkerProps> = ({ problem }) => {
+  const { latitude, longitude } = problem.location;
+
   return (
     <Marker
       key={problem._id}
-      position={L.latLng(lat, lg)}
-      icon={markerIcons[problem.sector || 'safety']}
+      position={L.latLng(latitude, longitude)}
+      icon={markerIcons[problem.sector || 'other']}
     >
       <StyledPopup offset={[0, -60]}>
         <h3>{problem.title}</h3>

src/pages/Dashboard/Map/Marker/styles.tsx

@@ -1,15 +1,14 @@
-import styled from 'styled-components'
+import styled from 'styled-components';
 import { Popup } from 'react-leaflet';
 
 export const StyledPopup = styled(Popup)`
-    .leaflet-popup-content{
-        height: 50px;
-        width: 200px;
-        padding: 10px;
-        text-align: center;
-        h3{
-            margin-bottom: 10px;
-        }
+  .leaflet-popup-content {
+    height: 50px;
+    width: 200px;
+    padding: 10px;
+    text-align: center;
+    h3 {
+      margin-bottom: 10px;
     }
-    
+  }
 `

src/pages/Dashboard/Map/index.tsx

@@ -10,14 +10,12 @@ import { api } from '../../../service/api';
 const DefaultCenter = L.latLng(-7.2171368, -35.911943);
 
 const Map = () => {
-  const [problems, setProblem] = useState<IProblem[]>([])
+  const [problems, setProblem] = useState<IProblem[]>([]);
   useEffect(() => {
-    api
-      .listProblems()
-      .then((res) => {
-        setProblem(res)
-      })
-  }, [])
+    api.listProblems().then((res) => {
+      setProblem(res);
+    });
+  }, []);
 
   return (
     <Container>
@@ -30,9 +28,7 @@ const Map = () => {
           url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         />
-
         {problems.map((problem) => {
-
           return (
             <CustomMarker key={problem._id} problem={problem}></CustomMarker>
           );

src/pages/Dashboard/SingleProblem/index.tsx

@@ -28,15 +28,12 @@ const SingleProblem: React.FC = () => {
     author: '',
     status: '',
     comments: [],
-    image: '',
+    adminImages: [],
+    userImages: [],
     description: '',
     location: {
-      address: '',
-      city: '',
-      state: '',
-      district: '',
-      lat: 0,
-      lg: 0
+      latitude: 0,
+      longitude: 0
     }
   })
   const [comment, setComment] = useState<string>('')
@@ -101,7 +98,9 @@ const SingleProblem: React.FC = () => {
       </InfoBox>
       <h3 className='subtitle'>Imagens adicionadas pelo cidadão</h3>
       <ImagesBox>
-        <img src={problem.image} alt='imagem' />
+        {problem.userImages.map((image, index) => (
+          <img key={index} src={image} alt='problem'></img>
+        ))}
       </ImagesBox>
       <div className='field'>
         <p className='control has-icons-right'>