src/types/PointOfInterest.ts

-export interface PointOfInterestBase {
-  lat: number;
-  lng: number;
-  name: string;
-  description: string;
-  address: string;
-  website: string;
-  category: string;
-}
-export interface PointOfInterest extends PointOfInterestBase {
-  id: number;
-  image?: string;
-  tags: Tag[];
-}
-
-export interface PointOfInterestFormData extends PointOfInterestBase {
-  email: string;
-  image: File | null;
-  tags: string;
-}
-
-export interface Tag {
-  id: string;
-  displayName: string;
-  color: string;
-}
-
-export interface PointsOfInterestDTO {
-  pois: PointOfInterest[];
-}
+export interface PointOfInterestBase {
+  lat: number;
+  lng: number;
+  name: string;
+  description: string;
+  address: string;
+  website: string;
+  category: string;
+  relationStatus: string;
+}
+export interface PointOfInterest extends PointOfInterestBase {
+  id: number;
+  image?: string;
+  tags: Tag[];
+}
+
+export interface PointOfInterestFormData extends PointOfInterestBase {
+  email: string;
+  image: File | null;
+  tags: number[];
+}
+
+export interface Tag {
+  id: string;
+  displayName: string;
+  color: string;
+}
+
+export interface PointsOfInterestDTO {
+  pois: PointOfInterest[];
+}

src/util/array.ts

+export function removeDuplicateObjects<T>(arr: T[], key: keyof T): T[] {
+  const tagMap = new Map(arr.map((item: T) => [item[key], item]));
+  return [...tagMap.values()];
+}

src/util/color.ts

+export function generateRandomHslColor(saturation = 100, lightness = 50, distinctValues = 20): string {
+  const randomColorIndex = getRandomIntInclusive(0, distinctValues);
+  const color = `hsl(${Math.floor(randomColorIndex * (360 / distinctValues))},${saturation}%,${lightness}%)`;
+  return color;
+}
+
+function getRandomIntInclusive(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}

src/util/fetcher.ts

 import { request } from 'graphql-request';
+import type { Variables } from 'graphql-request/dist/types';
 
-const fetcher = (query: string, variables?: Object) =>
+const fetcher = <T, V extends Variables>(query: string, variables?: V): Promise<T> =>
   request(import.meta.env.SNOWPACK_PUBLIC_API_URL, query, variables);
 
 export default fetcher;

src/util/file.ts

+export const validateFile = (
+  file: File,
+  allowedSize = 5000000,
+  allowedExtensions = ['jpg', 'jpeg', 'png'],
+): boolean => {
+  const { name: fileName, size: fileSize } = file;
+
+  const fileExtension = fileName.split('.').pop();
+  if (fileExtension && !allowedExtensions.includes(fileExtension.toLowerCase())) {
+    return false;
+  } else if (fileSize > allowedSize) {
+    return false;
+  }
+  return true;
+};

tailwind.config.js

@@ -8,5 +8,9 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [require('@tailwindcss/forms')],
+  plugins: [
+    require('@tailwindcss/forms')({
+      strategy: 'class',
+    }),
+  ],
 };