Fetch data from police api

[willayy]

During US-004 we implemented an async data fetching function that can be called in other async react component methods. The testing example we used looked like this.

  import Image from "next/image";
  import styles from "./page.module.css";
  import { getCrimeData } from "../scripts/dataFetching";

  export default async function Home() {

    const data = await getCrimeData();

    return (  
      <main>
        <h1> test </h1>
        <p>{data[0].id}</p>
        <p>{data[0].datetime}</p>
        <p>{data[0].name}</p>
        <p>{data[0].summary}</p>
        <p>{data[0].url}</p>
        <p>{data[0].type}</p>
        <p>{data[0].location.name}</p>
        <p>{data[0].location.gps}</p>
      </main>
    );
  }

This is pretty much just the basic homepage page.tsx file but with some added paragraphs to display the fetched data. however its very import to notice that instead of the usual function signature of

export default function Home()

We used

export default async function Home()

Because if we didn't the async data fetching wouldn't work.

The function also comes with a built in stop switch that returns a cached data package if to many requests are sent, to configure the URL or the allowed calls per minute please use the constants in dataFetching.ts

// Configs for the data fetch
const url: URL = new URL("https://polisen.se/api/events");
const fetchingTimeframe = 60; // This is the timeframe in seconds that the data is cached for

We also decided it would be best to put the script in agile-app/src/scripts for the sake of encapsulation and modularity.

The function uses the next fetch() function to fetch data and to ensure we don't call the api too much. This is described in detail on Next.js

[jmarkusson]

Looks good!