My 1st SocialCoder project | What I learned
Tags: react, typescript, journey, socialcoder
Published: 2023-09-27 16:27:55

Recently, I volunteered on [SocialCoder](https://socialcoder.org) to code a one page website for [ONCRA](https://www.oncra.org/). 

The requirement of the website is to 
1. read some KML file (like Google Earth 🌍), 
2. then fetch and crunch some data, 
3. then show results in a table.

#### Outcome

[The Website](https://oncra.github.io/) and its [GitHub Repo](https://github.com/oncra/oncra.github.io)

![Website demo gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03cta9hqj50kgjcve9fh.gif)



## What I learned
 1. [One Page Website != Let's use Plain HTML JavaScript](#chapter-1)
 2. [How to check if point is inside polygon](#chapter-2)
 3. [How to calculate polygons intersection](#chapter-3)
 4. [The Earth is not flat 🤯](#chapter-4)

### <a name="chapter-1"></a> #1: One Page Website != Let's use Plain HTML JavaScript

When I first spoke with the client, the requirement sounded like a very simple one page website, so I thought I can just code it in plain HTML.

But as I coded the key components of the website, I realise I have components that needs to be update visually as data were fetched, like this table:

![A table containing above ground biomass data for several years, being populated incrementally row by row as the data gets fetched](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8tjmodjpxsnsews3nhi.gif)

Yeah that was doable in plain JavaScript HTML, but it meant I was updating those table values manually:
```JavaScript
... // fetching data
yearElement.innerHTML = `${year} <div class="spinner"></div>`
 
... // data fetched
yearElement.innerHTML = `${year} ✅`
valueElement.innerText = getAGBValue(data, polygon);
```
But I doubt future me will remember this kind of side effect on the data fetching script 🧠

So eventually I took the plunge and rewrote the website in React. The table rows are now
```tsx
<td>{year} {statusIcon}</td>
```
where the `statusIcon` depends on a state `rowsStatus`. 

So as data were fetched, the `rowsStatus` state would be updated and React would just update those table values. The whole thing is much easier to follow 😄

### <a name="chapter-2"></a> #2: To check if a point is inside a polygon, use Ray Casting algorithm

The "data crunching" part of this project involves determining if a lat-lon grid is inside the kml file polygon. I discovered this gem of a video, which shows me how to determine if a point is inside a polygon

{% youtube RSXM9bgqxJM %}

### <a name="chapter-3"></a> #3: To calculate polygons intersection, use Weiler-Atherton algorithm

As part of the "data crunching", I need to compute "how many percent" of a lat-lon grid is inside the kml polygon, and apply that percentage to the AGB data value of the grid.

To calculate the intersectional polygon(s)
we can use the Weiler–Atherton clipping algorithm to achieve
https://www.geeksforgeeks.org/weiler-atherton-polygon-clipping-algorithm/

![Polygon intersection demonstration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwz289hbkms7vwhlhp25.gif)

To calculate the area of the intersectional polygon(s), we can use the Shoelace formula
https://en.wikipedia.org/wiki/Shoelace_formula

### <a name="chapter-4"></a> #4: The Earth is Not Flat🌍

Because the dataset has a longitude range of -180 to 180 deg, so if a user were to upload a polygon from longitude 179.99 to -179.99 by going through 180 (or -180 because the Earth is not flat), the dataset would fail to retrieve.

So I had to take that special case into account and make 2 separate calls to the dataset:
1. request for longitude range 179.99 to 180
2. another request for longitude range -180 to -179.99

then combine the retrieved data together, add 360 degrees to the longitude value and proceed as usual 👍

![business as usual](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExNmhtOG9vYjhlMm5ucThzZG5ibHRxeHh3bHNyeGE1OThxdDdsdGxzYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/TtEEepZeowF3qZ3hzK/giphy.gif)

## Conclusion
Here's the [website link](https://oncra.github.io/) and its [GitHub Repo](https://github.com/oncra/oncra.github.io)


![Website Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhdut6wvhn7qscqbcouv.gif)




This has been a great opportunity for me to practice using React 😄

The website is simple enough that it didn't have many nested components 🪆, so I've only been using `useState`. Although now thinking about it, I probably should've used `useContext` to avoid having to pass around some frequently used states 🤔

I'm still in the process of learning React, so any feedback appreciated 🙏🙏