Implementing new Views

All views should be places under.

frontend/src/features/NAME

The NAME should be replaced with a description of the feature. For example the folder name temperature is used for the view TemperatureView.js

If the view utilizes an API use the standard described in React/JavaScript coding standards and place the file in the folder.

Standard view template

import React from 'react';
import Card from '../../components/Card/Card';
 
export default function NameOfView() {
 
  return (
    <Card title="TitleOfView">
         {/*place your code here*/}  
    </Card>
  );
}

view using API

import React from 'react';
import Card from '../../components/Card/Card';
import { useFunctionName } from './FileContainingApi';
 
export default function NameOfView() {
  const { data, loading, error } = useFunctionName();
 
  if (loading) return <p>Laddar...</p>;
  if (error)   return <p>Fel: {error}</p>;
 
  return (
    <Card title="TitleOfView">
        {data.NameOfDataFromApi}  
    </Card>
  );
}

In the examples above placeholder names are used. Replace these with the real names.

Use a view

To use a created view, you must first import it. The following code is used to import a view.

import NameOfView from '../features/NameOfFolder/NameOfView';

Important, the code should be placed at the beginning of the file

After the view is imported it can now be used. by adding.

<NameOfView />

Add view to dropdown

Views should not be added to App.js, they are added to the dashboard "frontend/src/components/Dashboard/Dashboard.js", as off now no views should be manually added to minimize merge-conflicts as well as ensure that the grid layout hold its properties. You add them to the dropdown data as well as the function that translate them to elements, right now it is hard coded. The functions are located in frontend/src/components/Dashboard/Dashboard.js, this way the user can choose which view to be added to the home-page when using the application.

Declare an id next in line e.g. id: 3, and your view as value "MyNewView".

    // Data to dropdown-component
    const views = [
        {id: 1, value: "TemperatureView"},
        {id: 2, value: "ParkingView"}
    ]

Example:

    // Data to dropdown-component
    const views = [
        {id: 1, value: "TemperatureView"},
        {id: 2, value: "ParkingView"},
        {id: 3, value: "MyNewView"}
    ]

Next you specify the element in an if-statement in this function which set the view on the view to be added.

    // Sets the view in the "addNewView" function.
    function setView(view) {
        if(view === "TemperatureView") {
            addNewView(<TemperatureView/>);
        }
        if(view === "ParkingView") {
            addNewView(<ParkingView/>);
        }

    }

Example:

    // Sets the view in the "addNewView" function.
    function setView(view) {
        if(view === "TemperatureView") {
            addNewView(<TemperatureView/>);
        }
        if(view === "ParkingView") {
            addNewView(<ParkingView/>);
        }
        if(view === "MyNewView") {
            addNewView(<MyNewView/>);
        }
    }

Now a user can add your view to the home-page.