Skip to content

Commit

Permalink
feat: fix pois from airtable
Browse files Browse the repository at this point in the history
  • Loading branch information
pReya committed Oct 9, 2023
1 parent 0f0bcda commit 1e2bce7
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 18 deletions.
4 changes: 4 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
PUBLIC_MAPBOX_TOKEN=abc123
AIRTABLE_TOKEN=abc123
NEWS_AIRTABLE_BASE_ID=abc123
INTERVENTIONS_AIRTABLE_BASE_ID=abc123
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
},
"dependencies": {
"@astrojs/check": "^0.2.0",
"jwt-decode": "^3.1.2",
"typescript": "^5.2.2"
}
}
12 changes: 7 additions & 5 deletions src/components/InterventionMap.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from "react";
import React, { useState } from "react";
import Map, { Marker, NavigationControl, Popup } from "react-map-gl";
import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
import type { IInterventionPoi } from "@interfaces/IIntervention";
Expand All @@ -13,7 +13,7 @@ const InterventionMap = ({
token: string;
bounds: [[number, number], [number, number]];
}) => {
const [selectedPoi, setSelectedPoi] = useState<number>(null);
const [selectedPoi, setSelectedPoi] = useState<number | null>(null);
const [isMarkerClicked, setIsMarkerClicked] = useState(false);

const { width } = useWindowSize();
Expand All @@ -34,7 +34,9 @@ const InterventionMap = ({
longitude={intervention.locationLngLat.lng}
>
<CustomMarker
className="transition duration-200 ease-in-out hover:scale-125 cursor-pointer"
className={`transition duration-200 ease-in-out hover:scale-125 cursor-pointer ${
intervention?.airtable ? "!text-black" : ""
}`}
onClick={(e) => {
e.stopPropagation();
if (width > 1024) {
Expand Down Expand Up @@ -134,7 +136,7 @@ const CustomMarker = ({ className, ...props }: CustomMarkerProps) => {
height="41px"
width="27px"
viewBox="0 0 27 41"
className={className}
className={"text-[#009664] " + className}
{...props}
>
<defs>
Expand All @@ -151,7 +153,7 @@ const CustomMarker = ({ className, ...props }: CustomMarkerProps) => {
fill="url(#shadowGradient)"
></ellipse>
<path
fill="#009664"
fill="currentColor"
d="M27,13.5C27,19.07 20.25,27 14.75,34.5C14.02,35.5 12.98,35.5 12.25,34.5C6.75,27 0,19.22 0,13.5C0,6.04 6.04,0 13.5,0C20.96,0 27,6.04 27,13.5Z"
></path>
<path
Expand Down
29 changes: 25 additions & 4 deletions src/components/InterventionsMapDataWrapper.astro
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
trimAndSortInterventions,
transformInterventionsToPoiData,
} from "@util/ContentTransformer";
import { getMapPois } from "@util/AirTable";
interface Props {
count?: number;
Expand All @@ -18,20 +19,40 @@ const rawInterventionsContent = await Astro.glob<IInterventionFrontmatter>(
"../pages/en/interventions/*.mdx"
);
const atPois = (await getMapPois())
.filter((poi) => poi.location)
.map((poi) => ({
locationLngLat: poi.location,
title: "Test from Airtable",
url: "/en/interventions/12-Test",
date: "July 17th - 27th, 2023",
image: "/images/interventions/Peremoha-lab-1.JPG",
location: "Chernihiv",
airtable: true
}));
console.log(atPois);
const trimmedAndSorted = trimAndSortInterventions(
rawInterventionsContent,
count
);
const sortedPoiData = transformInterventionsToPoiData(trimmedAndSorted);
const bounds = sortedPoiData.reduce((bounds, poi) => {
return bounds.extend([poi.locationLngLat.lng, poi.locationLngLat.lat]);
}, new mapbox.LngLatBounds(sortedPoiData[0].locationLngLat, sortedPoiData[0].locationLngLat));
const bounds = sortedPoiData.reduce(
(bounds, poi) => {
return bounds.extend([poi.locationLngLat.lng, poi.locationLngLat.lat]);
},
new mapbox.LngLatBounds(
sortedPoiData[0].locationLngLat,
sortedPoiData[0].locationLngLat
)
);
---

<InterventionMap
client:only="react"
token={import.meta.env.PUBLIC_MAPBOX_TOKEN}
interventions={sortedPoiData}
interventions={[...sortedPoiData, ...atPois]}
bounds={bounds.toArray() as [[number, number], [number, number]]}
/>
64 changes: 55 additions & 9 deletions src/util/AirTable.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import fs from "node:fs";
import jwt_decode from "jwt-decode";

const AIRTABLE_BASE_URL = "https://api.airtable.com/v0/";
const AIRTABLE_BASE_ID = "appy8mE1ZpLXfYzEQ/tblvfXTgnme0tqIQD";

const token = import.meta.env.PUBLIC_AIRTABLE_TOKEN;
const airtableToken = import.meta.env.AIRTABLE_TOKEN;
const airtableNewsBaseId = import.meta.env.NEWS_AIRTABLE_BASE_ID;
const airtableInterventionsBaseId = import.meta.env
.INTERVENTIONS_AIRTABLE_BASE_ID;

const commonHeaders = {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
Authorization: `Bearer ${airtableToken}`,
};

interface AirtableResponse {
interface AirtableNewsResponse {
records: Array<{
id?: string;
createdTime?: string;
Expand Down Expand Up @@ -45,8 +48,6 @@ const fetchAndHandleErrors = async <T>(
},
});

console.log(JSON.stringify(response));

if (!response.ok) {
const text = await response.text();
console.error("Server returned Error: " + text);
Expand All @@ -57,17 +58,62 @@ const fetchAndHandleErrors = async <T>(
};

export const getNewsItems = async () => {
const { records } = await fetchAndHandleErrors<AirtableResponse>(
AIRTABLE_BASE_ID
const { records } = await fetchAndHandleErrors<AirtableNewsResponse>(
airtableNewsBaseId
);

if (records && records.length > 0) {
try {
fs.writeFileSync("./fetch.json", JSON.stringify(records));
// file written successfully
} catch (err) {
console.error("Error while writing file", err);
}
return records;
}
};

export const getMapPois = async () => {
const { records } = await fetchAndHandleErrors<unknown>(
airtableInterventionsBaseId
);
console.log("FETCHING POIS");

if (records && records.length > 0) {
try {
fs.writeFileSync("./fetchPois.json", JSON.stringify(records));
} catch (err) {
console.error("Error while writing file", err);
}

const withLocation = records.map((record) => {
const locationJwt = record?.fields?.["Geo cash (Event)"]?.slice(3);

let locationDecoded;

if (locationJwt) {
console.log("JWT", locationJwt);
try {
locationDecoded = jwt_decode(locationJwt, { header: true });
} catch (e) {
console.log(e);
console.log("Malformed:", locationJwt);
}
console.log("Decoded", locationDecoded);

if (locationDecoded?.o?.lat && locationDecoded?.o?.lng) {
return {
...record,
location: {
lat: locationDecoded?.o?.lat,
lng: locationDecoded?.o?.lng,
},
};
}
}

return record;
});

return withLocation;
}
};

0 comments on commit 1e2bce7

Please sign in to comment.