Hva er en 'App'?

Hva er en App?

En App er et forsøk på å organisere prosjektet inn i mindre deler med separat funksjonalitet. For eksempel er Events og Webshop separate Apps, ettersom de ikke har noe med hverandre å gjøre.

Apps ligger i src/ mappen i prosjektet.

Spesielle Apps

Prosjektet har noen spesielle apps, som inneholder funksjonalitet som skal brukes på litt andre måter.

Common Appen

src/common er en app som inneholder funksjonalitet som er brukbar rundt om i hele prosjektet. Dette er funksjonalitet som standard knapper, funksjonalitet for å bruke API-et, og modeller som hører til hele systemet.

Core Appen

src/core er en app som inneholder funksjonalitet som står utenfor alle de andre appene. Dette er hovedsaklig funksjonalitet som Header/navbar, footer, brukersystemet, feilmeldingssider og lignende.

Hva består en App av?

Apper består av et sett med standard deler, med mulighet for å legge til andre deler om nødvendig.

index.ts filen

Denne filen her til for å sette opp appen. Er det noe funksjonalitet som trengs for at de skal kjøre kan det settes opp her. Her eksporteres også appens entrypoint, som en App eller Main Component.

components mappen

Denne mappen inneholder React komponenter. Når en skriver med TypeScript må alle filer som inneholder JSX bruke .tsx filendingen. Komponentene skal hovedsaklig brukes til det som vises på skjermen. Greit å behandle data så lite som mulig direkte i komponenten for å gjøre det lettere å forstå hva som foregår.

containers mappen

Denne mappen inneholder React container komponenter.

models mappen

Denne mappen inneholder typedefinisjoner, interfaces og klasser. Dette gjør vi for å kunne holde styr på dataen som flyter i applikasjonen. Det lar oss også definere hvordan dataen som hentes fra API-et ser ut slik at det virker skikkelig i frontenden.

Mulig å bruke klasser har på data som skal returneres til serveren via HTTP POST. Dette vil kunne gjøre det lettere å validere og holde styr på ting.

api mappen

Dette er mappen som innholder kontaktepunktene til API-et. Filene burde definere hvilke endepunkter som er mulig å bruke, og eksportere funksjoner som henter data.

Eksempelvis kan data for artikler hentes på denne måten:

// src/articles/api/index.ts
/* HTTP funksjonalitet  for å kontakte API-et er standardisert i denne modulen */
import { get } from `common/utils/api`;
/* IArticle er et interface, det deklarerer formen og typene på objekter i TypeScript */
import { IArticle } from '../models/Article';

/* Dette er URL-en som denne applikasjonen bruker for å hente data. Det kan såklart være flere */
const API_URL = '/api/v1/articles'

/**
 * Denne funksjonen er alt som trengs for å hente artikler fra API-et.
 * @param {none} ... Veldig greit å holde funksjonen uten parametere så mye som mulig.
 * Mulig å heller å sette en 'state' på end endepunktet for å endre hvilken data som hentes?
 * @returns {IArticle[]} Funksjonen returnerer bare dataen som hentes fra API-et.
 * Veldig greit å prøve å 'normalisere' data i endepunktet fremfor å React komponentene.
 */
export const getArticles = async (): IArticle[] => {
  const data = await get(API_URL, { format: 'json' });
  /* Declare results to be an array of objects corresponding to the IArticle interface */
  const { results }: { results: IArticle[] } = data;
  /* ... Do somehting with results ... */
  return results;
};