Skip to content
Snippets Groups Projects
Commit 7e6cd2f9 authored by Andreas Rystad's avatar Andreas Rystad
Browse files

merge with master

parents 86e71b30 60d77d38
No related branches found
No related tags found
No related merge requests found
# Getting Started with Create React App
#Dokumentasjon
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
###Axios:
For å ta i bruk AJAX har vi brukt et JavaScript-bibliotek som heter Axios. Dette er fordi noen av gruppemedlemmene har hatt positiv erfaring med dette biblioteket tidligere.
## Available Scripts
###Localstorage:
Vi valgte å bruke de to HTML Web Storage-variantene vi skulle bruke i denne oppgaven på litt forskjellige måter. Blant annet brukte vi localstorage til å lagre projectId og token på innloggingssiden. Vi ville ha denne muligheten for tilpasning, siden vi tenkte det var lurt å gjøre nettsiden mer universell, ved at alle med et git-repo kunne bruke siden vår. Da tenkte vi det var passende at det man fylte inn ble lagret i localstorage, siden det da vil ligge lagret dersom man åpner en ny fane.
In the project directory, you can run:
###Sessionstorage:
Sessionstorage brukte vi på siden der man kan sortere og filtrere en liste over alle issues, og vi brukte det for å lagre hva issuesene var sortert etter. Vi tenkte dette var en god løsning, siden man da kan beholde sorteringen dersom man går ut av og inn i siden i samme fane. Vi tenkte at noe mer grundig lagring enn dette av sorteringen ikke var nødvendig, siden det er nokså enkelt å finne tilbake til den gamle sorteringen.
### `yarn start`
###Layout:
Vi har brukt flere elementer for å tilpasse sidene våre slik at de skal få et fint design på ulike skjermstørrelser. Blant annet har vi brukt media-queries for å tilpasse designet slik at det ser bra ut på både mobil og pc. Dette gjorde at vi kan ha ulike størrelsesforhold og ulikt layout på ulike skjermstørrelser.
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
###Testing av layout:
Vi har testet hvordan nettsiden ser ut på flere ulike skjermstørrelser gjennom hele utviklingsprosessen. Vi har testet på vanlige pc-skjermer med ulike størrelser, i tillegg til mobil i både landscape og portrait mode. Da har vi testet at ting har et ønskelig størrelsesforhold, slik at ikke noe blir borte, eller blir for stort eller for lite i forhold til andre sideelementer. I tillegg har vi testet at funksjonaliteten fungerer uansett skjermstørrelse.
The page will reload if you make edits.\
You will also see any lint errors in the console.
###Funksjonelle komponenter:
Vi har eksempler på både klasse- og funksjonelle komponenter i React-koden vår. Vi har likevel flere funksjonelle komponenter, siden gruppen er mer komfortable med dette, og vi mener at det er dette som er mest i vinden, og derfor mest relevant for bruk fremover. Likevel var det lærerikt å erfare at man kan bruke klassekomponenter, for å se at ting kan gjøres på ulike måter.
### `yarn test`
###Git:
Vi har, som oppgaven krevde, brukt git til utviklingen av nettsiden. Vi har laget issues for ting som skal fikses, og laget en egen branch per issue. Før vi har merget en branch inn i master, har vi fått et av de andre gruppemedlemmene til å se over koden. Dette gjør at man har større sjanse for å oppdage eventuell tunglest kode, i tillegg til at man får et bedre innblikk i hele prosjektet ved å sette seg inn i andres kode.
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
###Parametrisering:
Vi lar brukeren gjøre flere ulike valg på hvilken type informasjon som vises om både issues og commits. Vi har viser informasjon både i form av list-view og grafer. På list-view-sidene kan man både sortere og filtrere på ulike krav. Listen tilpasses da etter hva man ønsker å se, og i hvilken rekkefølge man ønsker å se elementene. På graf-sidene kan man endre hva man ønsker å se på aksene, slik at man får flere ulike måter å vise ulik informasjon på. I tillegg har vi en oversikt over antall issues og commits per person i form av kakediagram. Her kan man velge hvilke brukere man kan se antallet commits og issues på.
### `yarn build`
###Props, state og context:
Props og state har vi brukt der vi mener det er hensiktsmessig. Vi har blant annet brukt state på listen over issues, for at den skal endre seg når man endrer sortering/filtrering. Context har vi brukt på siden som viser grafer av commits. Det bruker vi for å kunne endre språk på siden.
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
###Testing:
Til testing har vi brukt Jest og Enzyme.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
###Viewport:
Vi har valgt å ikke bruke viewport på applikasjonen vår. Vi implementerte det ikke fra starten av, men brukte heller andre metoder som media-queries for å tilpasse sidene til ulike skjermstørrelser. Da vi implementerte det på slutten av prosjektet, så vi at det ikke utgjorde noen forskjell for layoutet på siden vår, siden vi allerede hadde tatt hensyn til ulike skjermstørrelser. Derfor valgte vi å fjerne det igjen, og det er derfor ikke med på det endelige produktet.
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment