diff --git a/src/app/fishing/layout.tsx b/src/app/fishing/layout.tsx index 040f8ad..3360445 100644 --- a/src/app/fishing/layout.tsx +++ b/src/app/fishing/layout.tsx @@ -9,7 +9,7 @@ interface RootLayoutProps { export const metadata = { title: "Colorado Fishing Stocking Report | chickenbone.dev", - description: "Written in Next.js, Tailwind CSS, and Typescript. Using CPW's API to get the latest stocking reports.", + description: "Written in Next.js, Tailwind CSS, and Typescript. Using the new API to get the latest stocking reports.", url: portfolio.publicUrl, image: portfolio.profileImage, } diff --git a/src/app/fishing/page.tsx b/src/app/fishing/page.tsx index 961f4e9..80a27ff 100644 --- a/src/app/fishing/page.tsx +++ b/src/app/fishing/page.tsx @@ -12,27 +12,51 @@ interface Stocking { report_date: string } - -//Example fishing data -// [{"stocking_id":1,"body_of_water":"Evergreen Lake","water_id":548,"region":"northeast","report_date":"2014-04-29"},{"stocking_id":2,"body_of_water":"Georgetown Lake","water_id":469,"region":"northeast","report_date":"2014-04-29"},{"stocking_id":3,"body_of_water":"Dowdy Lake","water_id":229,"region":"northeast","report_date":"2014-04-22"},{"stocking_id":4,"body_of_water":"West Lake","water_id":463,"region":"northeast","report_date":"2014-04-22"},{"stocking_id":5,"body_of_water":"Blue River (Section 2)","water_id":664,"region":"northeast","report_date":"2014-04-22"},] -// Get body of water location from water_id -// - +interface FishingLocation { + name: string, + coordinates: [number, number] +} export default function Fishing() { const [stocking, setStocking] = useState([]) const [regionGroup, setRegionGroup] = useState(true) const [monthCount, setMonthCount] = useState(1) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [locations, setLocations] = useState([]) + useEffect(() => { + setLoading(true) + setError(null) + axios.get("https://ndismaps.nrel.colostate.edu/arcgis/rest/services/FishingAtlas/FishingAtlas_Main_Map/MapServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json") + .then((response) => { + const data = response.data.features.map((feature: any) => ({ + name: feature.attributes.WATER_NAME, + coordinates: [feature.geometry.y, feature.geometry.x] + })) + setLocations(data) + setLoading(false) + }) + .catch((error) => { + setError("Failed to fetch data from the API") + setLoading(false) + }) + }, []) useEffect(() => { - axios.get("https://cpw.crestonedigital.com/fishing/api/v1/stocking").then((data) => { + axios.get("https://ndismaps.nrel.colostate.edu/arcgis/rest/services/FishingAtlas/FishingAtlas_Main_Map/MapServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json").then((data) => { // Cut out data from not the last month let lastMonth = new Date() lastMonth.setMonth(lastMonth.getMonth() - monthCount) let lastMonthString = lastMonth.toISOString().split('T')[0] - let stockData:Stocking[] = data.data + let stockData:Stocking[] = data.data.features.map((feature: any) => ({ + stocking_id: feature.attributes.OBJECTID, + body_of_water: feature.attributes.WATER_NAME, + water_id: feature.attributes.WATER_ID, + region: feature.attributes.REGION, + report_date: feature.attributes.STOCK_DATE + })) let filteredData = stockData.filter((stock: Stocking) => { return stock.report_date > lastMonthString @@ -83,10 +107,15 @@ export default function Fishing() {
{ - stocking.length == 0 &&
+ loading &&

Loading...

} + { + error &&
+

{error}

+
+ } { stocking.map((stock, index) => { return ( @@ -108,8 +137,21 @@ export default function Fishing() { }) }
-
- +
+

Fishing Locations

+
+
+ +
+
+
+ ) }