From 0dd05f95182bf2ca942cfe70607a6935099a1423 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Fri, 20 Dec 2024 21:01:29 +0545
Subject: [PATCH] refactor(mapper): ts errors on frontend (#2006)
* fix(tsconfig): add path aliases to tsconfig
* refactor(toast): remove unused css
* refactor(login): remove unused prop type
* fix(bottom-sheet): ts type fix
* fix(dialog-task-actions): ts error fix
* fix(header): update shoelace component reference types
* fix(comment): ts error fix
* fix(common): update ts types
* fix(editor): remove empty style tag
* fix(toolbar): onkeydown event add
* [pre-commit.ci] auto fixes from pre-commit.com hooks
for more information, see https://pre-commit.ci
* fix(getDeviceRotation): ts type add
* fix(+page): ts type fix
* fix(store): ts type fix
* fix(types): update ts type
* fix(main): update ts type
* fix(tasks): update ts types
---------
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
.../src/lib/components/bottom-sheet.svelte | 24 ++++--
.../lib/components/dialog-task-actions.svelte | 18 ++--
.../src/lib/components/editor/editor.svelte | 3 -
.../src/lib/components/editor/toolbar.svelte | 82 ++++++++++++++++++-
src/mapper/src/lib/components/header.svelte | 43 +++++-----
src/mapper/src/lib/components/login.svelte | 5 --
src/mapper/src/lib/components/map/main.svelte | 14 ++--
.../src/lib/components/more/comment.svelte | 2 +-
src/mapper/src/lib/components/toast.svelte | 6 --
src/mapper/src/lib/types.ts | 15 +---
src/mapper/src/lib/utils/getDeviceRotation.ts | 2 +-
.../src/routes/[projectId]/+page.svelte | 17 ++--
src/mapper/src/store/common.svelte.ts | 6 +-
src/mapper/src/store/entities.svelte.ts | 6 +-
src/mapper/src/store/tasks.svelte.ts | 13 +--
src/mapper/tsconfig.json | 13 ++-
16 files changed, 177 insertions(+), 92 deletions(-)
diff --git a/src/mapper/src/lib/components/bottom-sheet.svelte b/src/mapper/src/lib/components/bottom-sheet.svelte
index d31cdbf84c..54c16907a4 100644
--- a/src/mapper/src/lib/components/bottom-sheet.svelte
+++ b/src/mapper/src/lib/components/bottom-sheet.svelte
@@ -7,8 +7,8 @@
let startY: number;
let startHeight: number;
- let currSheetHeight: number = $state();
- let show: boolean = $state();
+ let currSheetHeight: number = $state(0);
+ let show: boolean = $state(false);
let isDragging: boolean = $state(false);
interface Props {
@@ -37,17 +37,27 @@
document.body.style.overflowY = 'auto';
};
- const dragStart = (e) => {
+ const dragStart = (e: MouseEvent | TouchEvent) => {
e.preventDefault();
- const pagesY = e.pageY || e.changedTouches[0].screenY;
+ let pagesY: number = 0;
+ if (e instanceof MouseEvent) {
+ pagesY = e.pageY;
+ } else if (e instanceof TouchEvent) {
+ pagesY = e.changedTouches[0].screenY;
+ }
startY = pagesY;
startHeight = parseInt(sheetContentRef.style.height);
isDragging = true;
};
- const dragging = (e) => {
+ const dragging = (e: MouseEvent | TouchEvent) => {
if (!isDragging) return;
- const delta = startY - (e.pageY || e.changedTouches[0].screenY);
+ let delta: number = 0;
+ if (e instanceof MouseEvent) {
+ delta = startY - e.pageY;
+ } else if (e instanceof TouchEvent) {
+ delta = startY - e.changedTouches[0].screenY;
+ }
const newHeight = startHeight + (delta / window.innerHeight) * 100;
bottomSheetRef.style.height = `100vh`;
updateSheetHeight(newHeight);
@@ -106,8 +116,6 @@
>
-
-
-
-
diff --git a/src/mapper/src/lib/components/editor/toolbar.svelte b/src/mapper/src/lib/components/editor/toolbar.svelte
index 56da5e4042..1abc329cae 100644
--- a/src/mapper/src/lib/components/editor/toolbar.svelte
+++ b/src/mapper/src/lib/components/editor/toolbar.svelte
@@ -11,6 +11,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('bold')}
onclick={() => editor?.chain()?.focus()?.toggleBold().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleBold().run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -19,6 +24,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('italic')}
onclick={() => editor?.chain()?.focus()?.toggleItalic().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleItalic().run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -27,6 +37,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('strike')}
onclick={() => editor?.chain()?.focus()?.toggleStrike().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleStrike().run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -35,6 +50,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('heading', { level: 1 })}
onclick={() => editor?.chain()?.focus()?.toggleHeading({ level: 1 }).run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleHeading({ level: 1 }).run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -43,6 +63,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('heading', { level: 2 })}
onclick={() => editor?.chain()?.focus()?.toggleHeading({ level: 2 }).run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleHeading({ level: 2 }).run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -51,6 +76,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('heading', { level: 3 })}
onclick={() => editor?.chain()?.focus()?.toggleHeading({ level: 3 }).run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleHeading({ level: 3 }).run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -59,6 +89,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('bulletList')}
onclick={() => editor?.chain()?.focus()?.toggleBulletList().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleBulletList().run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -67,6 +102,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('orderedList')}
onclick={() => editor?.chain()?.focus()?.toggleOrderedList().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleOrderedList().run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -75,6 +115,11 @@
class={`${iconClassName}`}
class:active={editor.isActive('codeBlock')}
onclick={() => editor?.chain()?.focus()?.toggleCodeBlock().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleCodeBlock().run();
+ }}
+ role="button"
+ tabindex="0"
>
@@ -83,17 +128,48 @@
class={`${iconClassName}`}
class:active={editor.isActive('blockquote')}
onclick={() => editor?.chain()?.focus()?.toggleBlockquote().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.toggleBlockquote().run();
+ }}
+ role="button"
+ tabindex="0"
>
- editor?.chain()?.focus()?.setHorizontalRule().run()}
+ editor?.chain()?.focus()?.setHorizontalRule().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.setHorizontalRule().run();
+ }}
+ role="button"
+ tabindex="0"
>
- editor?.chain()?.focus()?.undo().run()}>
+ editor?.chain()?.focus()?.undo().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.undo().run();
+ }}
+ role="button"
+ tabindex="0"
+ >
- editor?.chain()?.focus()?.redo().run()}>
+ editor?.chain()?.focus()?.redo().run()}
+ onkeydown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') editor?.chain()?.focus()?.redo().run();
+ }}
+ role="button"
+ tabindex="0"
+ >
diff --git a/src/mapper/src/lib/components/header.svelte b/src/mapper/src/lib/components/header.svelte
index 1a7848c112..3aa939b5d9 100644
--- a/src/mapper/src/lib/components/header.svelte
+++ b/src/mapper/src/lib/components/header.svelte
@@ -8,20 +8,23 @@
import { getAlertStore } from '$store/common.svelte';
import { getProjectSetupStepStore } from '$store/common.svelte.ts';
import { projectSetupStep as projectSetupStepEnum } from '$constants/enums.ts';
+ import type { SlDrawer, SlTooltip } from '@shoelace-style/shoelace';
- let drawerRef: any = $state();
- let drawerOpenButtonRef: any = $state();
+ let drawerRef: SlDrawer | undefined = $state();
+ let drawerOpenButtonRef: SlTooltip | undefined = $state();
const loginStore = getLoginStore();
const alertStore = getAlertStore();
const projectSetupStepStore = getProjectSetupStepStore();
- let isFirstLoad = $derived(+projectSetupStepStore.projectSetupStep === projectSetupStepEnum['odk_project_load']);
+ let isFirstLoad = $derived(
+ +(projectSetupStepStore.projectSetupStep || 0) === projectSetupStepEnum['odk_project_load'],
+ );
const handleSignOut = async () => {
try {
await revokeCookies();
loginStore.signOut();
- drawerRef.hide();
+ drawerRef?.hide();
// window.location.href = window.location.origin;
} catch (error) {
alertStore.setAlert({ variant: 'danger', message: 'Sign Out Failed' });
@@ -87,30 +90,30 @@
class="!text-[1.8rem] text-[#52525B] leading-0 cursor-pointer hover:text-red-600 duration-200"
style={isFirstLoad ? 'background-color: var(--sl-color-yellow-300);' : ''}
onclick={() => {
- drawerRef.show();
+ drawerRef?.show();
}}
onkeydown={() => {
- drawerRef.show();
+ drawerRef?.show();
}}
role="button"
tabindex="0"
>
- {/snippet}
+ {/snippet}
{#if isFirstLoad}
- {
- // Always keep tooltip open
- drawerOpenButtonRef.show();
- }}
- >
- {@render drawerOpenButton()}
-
-
+ {
+ // Always keep tooltip open
+ drawerOpenButtonRef?.show();
+ }}
+ >
+ {@render drawerOpenButton()}
+
+
{:else}
{@render drawerOpenButton()}
{/if}
diff --git a/src/mapper/src/lib/components/login.svelte b/src/mapper/src/lib/components/login.svelte
index 3cb45c78a3..7ec79c795b 100644
--- a/src/mapper/src/lib/components/login.svelte
+++ b/src/mapper/src/lib/components/login.svelte
@@ -3,11 +3,6 @@
import { osmLoginRedirect } from '$lib/utils/login';
import { getLoginStore } from '$store/login.svelte.ts';
- type Props = {
- open: boolean;
- toggleOpen: (value: boolean) => void;
- };
-
type loginOptionsType = {
id: string;
name: string;
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
index ce75c68af5..69dd581b25 100644
--- a/src/mapper/src/lib/components/map/main.svelte
+++ b/src/mapper/src/lib/components/map/main.svelte
@@ -23,7 +23,7 @@
import { polygon } from '@turf/helpers';
import { buffer } from '@turf/buffer';
import { bbox } from '@turf/bbox';
- import type { GeoJSON as GeoJSONType, Position, Geometry as GeoJSONGeometry } from 'geojson';
+ import type { Position, Geometry as GeoJSONGeometry, FeatureCollection } from 'geojson';
import LocationArcImg from '$assets/images/locationArc.png';
import LocationDotImg from '$assets/images/locationDot.png';
@@ -77,7 +77,7 @@
let taskAreaClicked: boolean = $state(false);
let toggleGeolocationStatus: boolean = $state(false);
let toggleNavigationMode: boolean = $state(false);
- let projectSetupStep = $state(null);
+ let projectSetupStep: number | null = $state(null);
// Trigger adding the PMTiles layer to baselayers, if PmtilesUrl is set
let allBaseLayers: maplibregl.StyleSpecification[] = $derived(
projectBasemapStore.projectPmtilesUrl
@@ -131,7 +131,7 @@
});
$effect(() => {
- projectSetupStep = +projectSetupStepStore.projectSetupStep;
+ projectSetupStep = +(projectSetupStepStore.projectSetupStep || 0);
});
// set the map ref to parent component
@@ -165,7 +165,7 @@
taskAreaClicked = true;
const clickedTaskId = clickedTaskFeature[0]?.properties?.fid;
taskStore.setSelectedTaskId(clickedTaskId, clickedTaskFeature[0]?.properties?.task_index);
- if (+projectSetupStepStore.projectSetupStep === projectSetupStepEnum['task_selection']) {
+ if (+(projectSetupStepStore.projectSetupStep || 0) === projectSetupStepEnum['task_selection']) {
localStorage.setItem(`project-${projectId}-setup`, projectSetupStepEnum['complete_setup']);
projectSetupStepStore.setProjectSetupStep(projectSetupStepEnum['complete_setup']);
}
@@ -221,7 +221,7 @@
// Save the drawn geometry location, then delete all geoms from store
const features: { id: string; geometry: GeoJSONGeometry }[] = drawInstance.getSnapshot();
const drawnFeature = features.find((geom) => geom.id === id);
- let firstGeom: GeoJSONGeometry = null;
+ let firstGeom: GeoJSONGeometry | null = null;
if (drawnFeature && drawnFeature.geometry) {
firstGeom = drawnFeature.geometry;
} else {
@@ -254,11 +254,11 @@
}
});
- function addStatusToGeojsonProperty(geojsonData: GeoJSONType) {
+ function addStatusToGeojsonProperty(geojsonData: FeatureCollection) {
return {
...geojsonData,
features: geojsonData.features.map((feature) => {
- const entity = entitiesStore.entitiesStatusList.find((entity) => entity.osmid === feature.properties.osm_id);
+ const entity = entitiesStore.entitiesStatusList.find((entity) => entity.osmid === feature?.properties?.osm_id);
return {
...feature,
properties: {
diff --git a/src/mapper/src/lib/components/more/comment.svelte b/src/mapper/src/lib/components/more/comment.svelte
index 6b8f502cf1..2688554245 100644
--- a/src/mapper/src/lib/components/more/comment.svelte
+++ b/src/mapper/src/lib/components/more/comment.svelte
@@ -94,7 +94,7 @@
size="small"
class="primary col-span-2 sm:col-span-1"
onclick={() => {
- commentTask(projectId, taskStore.selectedTaskId, currentComment);
+ if (taskStore.selectedTaskId) commentTask(projectId, taskStore.selectedTaskId, currentComment);
editorRef?.commands.clearContent(true);
}}
onkeydown={() => {}}
diff --git a/src/mapper/src/lib/components/toast.svelte b/src/mapper/src/lib/components/toast.svelte
index 7da7fa7c2a..06b3561d48 100644
--- a/src/mapper/src/lib/components/toast.svelte
+++ b/src/mapper/src/lib/components/toast.svelte
@@ -35,9 +35,3 @@
{alertStore.alert?.message}
-
-
diff --git a/src/mapper/src/lib/types.ts b/src/mapper/src/lib/types.ts
index 20fbe4965a..22165ffc43 100644
--- a/src/mapper/src/lib/types.ts
+++ b/src/mapper/src/lib/types.ts
@@ -1,23 +1,12 @@
import type { UUID } from 'crypto';
+import type { Polygon } from 'geojson';
export type ProjectTask = {
id: number;
project_id: number;
project_task_index: number;
feature_count: number;
- outline: {
- type: string;
- geometry: {
- type: string;
- coordinates: [];
- };
- properties: {
- fid: number;
- uid: number;
- name: string;
- };
- id: number;
- };
+ outline: Polygon;
};
export interface ProjectData {
diff --git a/src/mapper/src/lib/utils/getDeviceRotation.ts b/src/mapper/src/lib/utils/getDeviceRotation.ts
index 66dfda2cce..7a59bc260d 100644
--- a/src/mapper/src/lib/utils/getDeviceRotation.ts
+++ b/src/mapper/src/lib/utils/getDeviceRotation.ts
@@ -1,4 +1,4 @@
-export function GetDeviceRotation(quaternion) {
+export function GetDeviceRotation(quaternion: any) {
// https://w3c.github.io/orientation-sensor/#model explains the order of
// the 4 elements in the sensor.quaternion array.
let [qx, qy, qz, qw] = quaternion;
diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
index 43720e2694..619b7d4c7b 100644
--- a/src/mapper/src/routes/[projectId]/+page.svelte
+++ b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -82,8 +82,8 @@
});
onDestroy(() => {
- taskEventStream.unsubscribeAll();
- entityStatusStream.unsubscribeAll();
+ taskEventStream?.unsubscribeAll();
+ entityStatusStream?.unsubscribeAll();
});
const projectSetupStepStore = getProjectSetupStepStore();
@@ -91,13 +91,14 @@
$effect(() => {
// if project loaded for the first time, set projectSetupStep to 1 else get it from localStorage
if (!localStorage.getItem(`project-${data.projectId}-setup`)) {
- localStorage.setItem(`project-${data.projectId}-setup`, projectSetupStepEnum['odk_project_load']);
+ localStorage.setItem(`project-${data.projectId}-setup`, projectSetupStepEnum['odk_project_load'].toString());
projectSetupStepStore.setProjectSetupStep(projectSetupStepEnum['odk_project_load']);
} else {
- projectSetupStepStore.setProjectSetupStep(localStorage.getItem(`project-${data.projectId}-setup`));
+ const projectStep = localStorage.getItem(`project-${data.projectId}-setup`);
+ projectSetupStepStore.setProjectSetupStep(projectStep ? +projectStep : 0);
}
// if project loaded for the first time then show qrcode tab
- if (+projectSetupStepStore.projectSetupStep === projectSetupStepEnum['odk_project_load']) {
+ if (+(projectSetupStepStore.projectSetupStep || 0) === projectSetupStepEnum['odk_project_load']) {
tabGroup.updateComplete.then(() => {
tabGroup.show('qrcode');
});
@@ -163,7 +164,7 @@
{#if commonStore.selectedTab === 'qrcode'}
- {#if +projectSetupStepStore.projectSetupStep !== projectSetupStepEnum['odk_project_load']}
+ {#if +(projectSetupStepStore.projectSetupStep || 0) !== projectSetupStepEnum['odk_project_load']}
(alert = { variant: alertDetails.variant, message: alertDetails.message }),
- clearAlert: (alertDetails: AlertDetails) => (alert = { variant: null, message: '' }),
+ clearAlert: (alertDetails: AlertDetails) => (alert = { variant: 'default', message: '' }),
};
}
diff --git a/src/mapper/src/store/entities.svelte.ts b/src/mapper/src/store/entities.svelte.ts
index 3e36e9e160..46702cdc80 100644
--- a/src/mapper/src/store/entities.svelte.ts
+++ b/src/mapper/src/store/entities.svelte.ts
@@ -44,7 +44,11 @@ function getEntityStatusStream(projectId: number): ShapeStream | undefined {
}
function getEntitiesStatusStore() {
- async function subscribeToEntityStatusUpdates(entitiesStream: ShapeStream, entitiesList: entitiesListType[]) {
+ async function subscribeToEntityStatusUpdates(
+ entitiesStream: ShapeStream | undefined,
+ entitiesList: entitiesListType[],
+ ) {
+ if (!entitiesStream) return;
entitiesShape = new Shape(entitiesStream);
entitiesShape.subscribe((entities: ShapeData) => {
diff --git a/src/mapper/src/store/tasks.svelte.ts b/src/mapper/src/store/tasks.svelte.ts
index 704f1d8230..51b13eb16d 100644
--- a/src/mapper/src/store/tasks.svelte.ts
+++ b/src/mapper/src/store/tasks.svelte.ts
@@ -1,12 +1,12 @@
import { ShapeStream, Shape } from '@electric-sql/client';
import type { ShapeData, Row } from '@electric-sql/client';
-import type { GeoJSON } from 'geojson';
+import type { Feature, FeatureCollection, GeoJSON } from 'geojson';
import type { ProjectTask, TaskEventType } from '$lib/types';
let taskEventShape: Shape;
-let featcol = $state({ type: 'FeatureCollection', features: [] });
-let latestEvent = $state(null);
+let featcol: FeatureCollection = $state({ type: 'FeatureCollection', features: [] });
+let latestEvent: TaskEventType | null = $state(null);
let events: TaskEventType[] = $state([]);
// for UI show task index for simplicity & for api's use task id
@@ -29,7 +29,8 @@ function getTaskEventStream(projectId: number): ShapeStream | undefined {
}
function getTaskStore() {
- async function subscribeToTaskEvents(taskEventStream: ShapeStream) {
+ async function subscribeToTaskEvents(taskEventStream: ShapeStream | undefined) {
+ if (!taskEventStream) return;
taskEventShape = new Shape(taskEventStream);
taskEventShape.subscribe((taskEvent: ShapeData) => {
@@ -49,7 +50,7 @@ function getTaskStore() {
async function appendTaskStatesToFeatcol(projectTasks: ProjectTask[]) {
const latestTaskStates = await getLatestStatePerTask();
- const features = projectTasks.map((task) => ({
+ const features: Feature[] = projectTasks.map((task) => ({
type: 'Feature',
geometry: task.outline,
properties: {
@@ -88,7 +89,7 @@ function getTaskStore() {
const allTasksCurrentStates = await getLatestStatePerTask();
selectedTask = allTasksCurrentStates.get(taskId);
selectedTaskState = selectedTask?.state || 'UNLOCKED_TO_MAP';
- selectedTaskGeom = featcol.features.find((x) => x.properties.fid === taskId)?.geometry || null;
+ selectedTaskGeom = featcol.features.find((x) => x?.properties?.fid === taskId)?.geometry || null;
}
return {
diff --git a/src/mapper/tsconfig.json b/src/mapper/tsconfig.json
index 1c1f843a3f..3812f96020 100644
--- a/src/mapper/tsconfig.json
+++ b/src/mapper/tsconfig.json
@@ -10,7 +10,18 @@
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler",
- "types": ["vite-plugin-pwa/client"]
+ "types": ["vite-plugin-pwa/client"],
+ "paths": {
+ "$lib/*": ["./src/lib/*"],
+ "$components/*": ["./src/components/*"],
+ "$store/*": ["./src/store/*"],
+ "$routes/*": ["./src/routes/*"],
+ "$constants/*": ["./src/constants/*"],
+ "$static/*": ["./static"],
+ "$styles/*": ["./src/styles/*"],
+ "$assets/*": ["./src/assets/*"]
+ },
+ "allowImportingTsExtensions": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files