feat: center map on container

env.ts

@@ -7,5 +7,4 @@ export default defineConfig({
     APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
     APP_TITLE: Schema.string(),
     APP_GRAPHQL_CODEGEN_ENDPOINT: Schema.string.optional(),
-    APP_GRAPHQL_ENDPOINT: Schema.string.optional(),
 })

package.json

@@ -26,7 +26,7 @@
         "@graphql-codegen/typescript-operations": "^4.2.0",
         "@ifrc-go/icons": "^1.3.3",
         "@ifrc-go/ui": "^1.0.0",
-        "@mapbox/mapbox-gl-draw": "^1.2.0",
+        "@mapbox/mapbox-gl-draw": "^1.4.3",
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.2.0-beta-6",
         "@togglecorp/toggle-form": "^2.0.4",

src/utils/map.ts

@@ -18,14 +18,15 @@ export const defaultNavControlPosition: ControlPosition = 'top-right';
 export const defaultMapOptions: Omit<mapboxgl.MapboxOptions, 'style' | 'container'> = {
     logoPosition: 'bottom-left' as const,
     zoom: 1,
-    minZoom: 1,
+    minZoom: 0,
     maxZoom: 18,
     scrollZoom: false,
     pitchWithRotate: false,
     dragRotate: false,
     renderWorldCopies: true,
     attributionControl: false,
     preserveDrawingBuffer: true,
+    center: [34, 39],
 };
 
 const DEFAULT_CIRCLE_SIZE = 'medium';

src/views/AlertTable/index.tsx → src/views/Home/AlertsTable/index.tsx

@@ -64,7 +64,7 @@ type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['pub
 const alertKeySelector = (item: AlertType) => item.id;
 const PAGE_SIZE = 10;
 
-function AlertTable() {
+function AlertsTable() {
     const strings = useTranslation(i18n);
 
     const {
@@ -188,4 +188,4 @@ function AlertTable() {
         </Container>
     );
 }
-export default AlertTable;
+export default AlertsTable;

src/views/Home/Alerts/index.tsx → src/views/Home/AlertsView/index.tsx

@@ -41,7 +41,7 @@ interface Props {
     className?: string;
 }
 
-function Alerts(props: Props) {
+function AlertsView(props: Props) {
     const { className } = props;
 
     const strings = useTranslation(i18n);
@@ -88,4 +88,4 @@ function Alerts(props: Props) {
     );
 }
 
-export default Alerts;
+export default AlertsView;

src/views/Home/Alerts/styles.module.css → src/views/Home/AlertsView/styles.module.css

@@ -5,8 +5,8 @@
     .main-content {
         display: flex;
         flex-grow: 1;
-        height: 45rem;
         gap: var(--go-ui-spacing-md);
+        height: 45rem;
 
         .alerts-map {
             flex-grow: 1;

src/views/Home/index.tsx

@@ -9,8 +9,8 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import Page from '#components/Page';
 
-import OngoingAlertMap from './AlertMap';
-import Alerts from './Alerts';
+import AlertsTable from './AlertsTable';
+import AlertsView from './AlertsView';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -44,28 +44,12 @@ export function Component() {
                     </Tab>
                 </TabList>
                 <TabPanel name="map">
-                    <OngoingAlertMap
-                        bbox={undefined}
-                    />
+                    <AlertsView />
                 </TabPanel>
                 <TabPanel name="table">
-                    <AlertTable />
+                    <AlertsTable />
                 </TabPanel>
             </Tabs>
-            <OngoingAlertMap
-                bbox={undefined}
-            />
-            <OngoingAlertMap
-                bbox={undefined}
-                onActiveCountryChange={setActiveCountryId}
-                activeCountryId={activeCountryId}
-            />
-            <OngoingAlertMap
-                bbox={undefined}
-                onActiveCountryChange={setActiveCountryId}
-                activeCountryId={activeCountryId}
-            />
-            <Alerts />
         </Page>
     );
 }