Merge branch 'development' into development

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Hata raporlama
+about: Hata raporlama için kullanın
+title: 'bug: '
+labels: ''
+assignees: ''
+
+---
+## Hata Tanımı
+Hatanın ne olduğu hakkında açık ve kısa bir açıklama.
+
+## Hatayı nasıl aldığınızı adım adım açıklayın
+
+1. '...' a gidin
+2. '....' ye tıklayın
+3. '....' ye kaydırın
+4. Hata görünüyor
+
+## Beklenen Davranış
+Beklediğiniz şeyin açık ve kısa bir açıklaması.
+
+## Ekran Görüntüleri
+Uygulanabilirse, sorununuzu açıklamak için ekran görüntüleri ekleyin.
+
+## Masaüstü Bilgileri
+- İşletim Sistemi: [örneğin iOS]
+- Tarayıcı [örneğin chrome, safari]
+- Sürüm [örneğin 22]
+
+## Akıllı Telefon Bilgileri
+- Cihaz: [örneğin iPhone6]
+- İşletim Sistemi: [örneğin iOS8.1]
+- Tarayıcı [örneğin varsayılan tarayıcı, safari]
+- Sürüm [örneğin 22]
+
+## Ek Bağlam
+Sorun hakkında diğer herhangi bir bağlamı burada ekleyin.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Özellik isteği
+about: Özellik isteği için kullanın
+title: 'feat: '
+labels: ''
+assignees: ''
+
+---
+
+## İsteğiniz şeyi tanımlayın 
+Açık ve kısa bir şekilde istediğiniz feature'ın ne olduğunu tanımlayın.
+
+## Değerlendirdiğiniz alternatifleri tanımlayın
+Değerlendirdiğiniz herhangi bir alternatif çözüm veya özellik hakkında açık ve kısa bir açıklama.
+
+## Ek Bağlam
+Bu özellik isteği hakkında herhangi bir başka bağlam veya ekran görüntüsü ekleyin.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+- [x] Açıklayıcı ve anlaşılır bir başlık: PR başlığı, değişikliklerin niteliklerini ve amaçlarını açık bir şekilde tanımlamalıdır. Pr başlığı, PR açıldığında görüntülenen ilk şey olmalıdır. Ve semantik commit kurallarını takip etmelidir. Örneğin "docs: Add README.md" şeklinde bir başlık kullanılabilir. 
+- [x] İlgili issue numarası: PR ile ilgili issue numarası, PR başlığının sonuna # ile eklenmelidir.
+- [x] İlgili dosya seçimi: Sadece ilgili dosyalara dokunulmalı ve başka dosyaların etkilenmemesi sağlanmalıdır.
+- [x] Format ve Lint uygunluğu: Kod, belirli bir format standardına uygun hale getirilmeli ve lint kurallarına göre incelenmelidir.
+- [x] Temiz commit geçmişi: Değişikliklerin yapıldığı commitler, anlaşılır ve düzenli olmalıdır.
+- [x] İş tamamlandığında PR açılması: PR, iş tamamlandığında açılmalı ve diğer takım üyeleri tarafından incelenmesi için gönderilmelidir.
+
+

CONTRIBUTING.md

@@ -9,6 +9,10 @@
 - Bir hatayı düzeltmek için PR açın.
 - Dökümantasyondaki bir hatayı düzeltmek için PR açın.
 
+### [**PR Kuralları**](https://github.com/acikkaynak/deprem-yardim-frontend/blob/development/.github/PULL_REQUEST_TEMPLATE.md)
+
+### [**Issue Kuralları**](https://github.com/acikkaynak/deprem-yardim-frontend/tree/development/.github/ISSUE_TEMPLATE)
+
 ## Başlamadan önce
 
 ### Projeyi kurmak

CONTRIBUTING_ENG.md

@@ -9,6 +9,10 @@
 - Create a PR to fix an issue.
 - Create a PR to fix an error in the documentation.
 
+### [**PR Rules**](https://github.com/acikkaynak/deprem-yardim-frontend/blob/development/.github/PULL_REQUEST_TEMPLATE.md)
+
+### [**Issue Rules**](https://github.com/acikkaynak/deprem-yardim-frontend/tree/development/.github/ISSUE_TEMPLATE)
+
 ## Before you begin
 
 ### Setting up the project

components/UI/Common/LoadingSpinner.module.css

@@ -3,9 +3,8 @@
   top: 0;
   left: 0;
   z-index: 9999;
-  background-color: #000000cc;
+  background-color: transparent;
   width: 100vw;
-  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -14,14 +13,16 @@
 
 .spinnerWrapper .spinnerLoaderBox {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   text-align: center;
   align-items: center;
-  background-color: rgba(15, 15, 15, 0.5);
+  background-color: rgba(151, 209, 144, 0.8);
   border-radius: 5px;
-  height: 200px;
+  height: 30px;
   width: 200px;
+  margin-top: 10px;
+  padding: 10px;
 }
 
 @keyframes spin {
@@ -38,21 +39,21 @@
   border-radius: 50%;
   border-right-color: transparent;
   border-bottom-color: transparent;
-  width: 80px;
-  height: 80px;
+  width: 20px;
+  height: 20px;
   animation-name: spin;
   animation-duration: 700ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
+  margin-right: 10px;
 }
 
 .spinnerWrapper .spinnerLoaderBox .spinnerLoaderText {
-  margin-top: 10px;
-  padding-top: 10px;
-  color: lightgrey;
+  color: white;
   font-family: "Lato", sans-serif;
   white-space: pre-wrap;
-  font-size: 18px;
+  font-size: 14px;
+  font-weight: bold;
   animation-name: fading;
   animation-duration: 1500ms;
   animation-iteration-count: infinite;

components/UI/Common/LoadingSpinner.tsx

@@ -11,9 +11,7 @@ const RenderLoadingSpinner = ({ slowLoading }: LoadingProps) => {
       <div className={styles.spinnerLoaderBox}>
         <div className={styles.spinnerLoader}></div>
         <div className={styles.spinnerLoaderText}>
-          {slowLoading
-            ? "Lütfen Bekleyin,\nHala Yükleniyor..."
-            : "Yükleniyor..."}
+          {slowLoading ? "Hala yükleniyor..." : "Yükleniyor..."}
         </div>
       </div>
     </div>

components/UI/Drawer/Drawer.tsx

@@ -14,7 +14,13 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import { default as MuiDrawer } from "@mui/material/Drawer";
 import formatcoords from "formatcoords";
-import React, { MouseEvent, useCallback, useMemo, useState } from "react";
+import React, {
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import styles from "./Drawer.module.css";
 
 interface MapsButton {
@@ -80,6 +86,27 @@ const Drawer = () => {
   );
   const [showSavedData, setShowSavedData] = useState(false);
 
+  useEffect(() => {
+    if (isOpen) {
+      const onWheelTrigger = (e: WheelEvent) => {
+        if (e.ctrlKey) {
+          e.preventDefault();
+        }
+      };
+      const onTouchMove = (e: any) => {
+        if (e.scale !== 1) {
+          e.preventDefault();
+        }
+      };
+      window.addEventListener("wheel", onWheelTrigger, { passive: false });
+      window.addEventListener("touchmove", onTouchMove, { passive: false });
+      return () => {
+        window.removeEventListener("wheel", onWheelTrigger);
+        window.removeEventListener("touchmove", onTouchMove);
+      };
+    }
+  }, [isOpen]);
+
   function copyBillboard(url: string) {
     navigator.clipboard.writeText(url);
     setOpenBillboardSnackbar(true);

components/UI/Head/Head.tsx

@@ -28,7 +28,10 @@ const Head = () => {
         content="Twitter, Instagram, Whatsapp ve çeşitli web siteleri gibi farklı kaynaklardan gelen tüm yardım çağrılarını topluyoruz ve bu veriyi sahada kullanılmak üzere anlamlı, rafine hale getiriyoruz. Amacımız bilgi teknolojilerini kullanarak ilgili kurum ve STK'lara yardımcı olmak ve afet zamanlarında açık bir veri platformu sağlamak. "
       />
       <meta name="twitter:image" content="" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta
+        name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
+      />
       <link rel="icon" href="/favicon.ico" />
     </NextHead>
   );

components/UI/Maintenance/Maintenance.module.css

@@ -0,0 +1,57 @@
+.maintenanceContainer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  z-index: 1000;
+  text-align: center;
+}
+
+.maintenanceContainer .maintenanceContent {
+  height: max-content;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.maintenanceContainer .maintenanceImage {
+  width: 100%;
+  height: 300px;
+  object-fit: contain;
+}
+
+.maintenanceContainer .maintenanceTitle {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #000;
+  margin: 0.5rem;
+}
+
+.maintenanceContainer .maintenanceText {
+  font-size: 16px;
+  color: rgb(153, 153, 153);
+}
+
+.maintenanceContainer a {
+  margin-top: 2rem;
+  text-decoration: none;
+  font-size: 16px;
+  color: #fff;
+  background-color: #000;
+  border: 1px solid #000;
+  border-radius: 4px;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+@media screen and (min-width: 768px) {
+  .maintenanceContainer .maintenanceImage {
+    width: 50%;
+  }
+}

components/UI/Maintenance/Maintenance.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import Link from "next/link";
+import styles from "./Maintenance.module.css";
+
+const maintenance = () => {
+  return (
+    <div className={styles.maintenanceContainer}>
+      <div className={styles.maintenanceContent}>
+        <Image
+          src="/images/maintenance.svg"
+          alt="maintenance"
+          loading="eager"
+          width={500}
+          height={300}
+          className={styles.maintenanceImage}
+        />
+        <h1 className={styles.maintenanceTitle}>Bakımdayız.</h1>
+        <p className={styles.maintenanceText}>
+          Bu sayfa sizlere daha iyi hizmet verebilmek için bakımdadır.
+          <br /> Lütfen daha sonra tekrar deneyin veya DepremYardim.com&apos;u
+          ziyaret edin.
+        </p>
+        <Link href="https://depremyardim.com">
+          <span className={styles.maintenanceLink}>DepremYardim.com</span>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default maintenance;

components/UI/Map/LeafletMap.tsx

@@ -2,6 +2,7 @@ import Map from "@/components/UI/Map/Map";
 import { useMapClickHandlers } from "@/hooks/useMapClickHandlers";
 import { MarkerData } from "@/mocks/types";
 import { useDevice, useMapActions, useMarkerData } from "@/stores/mapStore";
+import { EXPAND_COORDINATE_BY_VALUE } from "@/utils/constants";
 import ResetViewControl from "@20tab/react-leaflet-resetview";
 import { css, Global } from "@emotion/react";
 import { HeatmapLayerFactory } from "@vgrid/react-leaflet-heatmap-layer";
@@ -14,7 +15,6 @@ import React, {
   Fragment,
   MouseEvent,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
 } from "react";
@@ -70,8 +70,20 @@ const MapEvents = () => {
   const mapZoomLevelRef = useRef(0);
   const { setCoordinates, setPopUpData } = useMapActions();
 
-  const debounced = useDebouncedCallback((value: any) => {
-    setCoordinates(value);
+  const debounced = useDebouncedCallback((value: L.LatLngBounds) => {
+    const zoomLevel = map.getZoom();
+
+    let localCoordinates = value;
+
+    // https://github.com/acikkaynak/deprem-yardim-frontend/issues/368
+    if (zoomLevel === 18) {
+      localCoordinates = expandCoordinatesBy(
+        localCoordinates,
+        EXPAND_COORDINATE_BY_VALUE
+      );
+    }
+
+    setCoordinates(localCoordinates);
   }, 1000);
 
   const map = useMapEvents({
@@ -92,9 +104,19 @@ const MapEvents = () => {
   return null;
 };
 
+const expandCoordinatesBy = (coordinates: L.LatLngBounds, value: number) => {
+  const { lat: neLat, lng: neLng } = coordinates.getNorthEast();
+  const { lat: swLat, lng: swLng } = coordinates.getSouthWest();
+
+  const northEast = L.latLng(neLat + value, neLng + value);
+  const southWest = L.latLng(swLat - value, swLng - value);
+
+  return L.latLngBounds(northEast, southWest);
+};
+
 const corners = {
-  southWest: latLng(33.9825, 25.20902),
-  northEast: latLng(43.32683, 46.7742),
+  southWest: latLng(35.652832827451654, 33.12377929687501),
+  northEast: latLng(40.72644570551446, 39.27062988281251),
 };
 
 const bounds = latLngBounds(corners.southWest, corners.northEast);
@@ -112,11 +134,6 @@ function LeafletMap() {
     [data]
   );
 
-  useEffect(() => {
-    setCoordinates(bounds);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const longitudeExtractor = useCallback((p: Point) => p[1], []);
   const latitudeExtractor = useCallback((p: Point) => p[0], []);
   const intensityExtractor = useCallback((p: Point) => p[2], []);
@@ -137,7 +154,9 @@ function LeafletMap() {
             ? DEFAULT_MIN_ZOOM_DESKTOP
             : DEFAULT_MIN_ZOOM_MOBILE
         }
+        zoomSnap={0.25}
         zoomDelta={0.5}
+        whenReady={(map: any) => setCoordinates(map.target.getBounds())}
         preferCanvas
         maxBounds={bounds}
         maxBoundsViscosity={1}
@@ -152,6 +171,7 @@ function LeafletMap() {
           longitudeExtractor={longitudeExtractor}
           latitudeExtractor={latitudeExtractor}
           intensityExtractor={intensityExtractor}
+          useLocalExtrema={false}
         />
         <TileLayer
           url={`https://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&apistyle=s.e%3Al.i%7Cp.v%3Aoff%2Cs.t%3A3%7Cs.e%3Ag%7C`}