[![OpenStreetMap demo](/images/openstreet/openstreetmap.png)](https://peanuts-83.github.io/maps_nice)
[My Github repository](https://github.com/Peanuts-83/maps_nice)

Curious to know how to implement some interractive maps in your projects ? Want to make use of public data to enrich your map and fit your needs ?

Follow this quick guide...

## Easy setup

Your existing angular project requires the [Leaflet library](https://leafletjs.com/) to manage map datas. We are here using OpenStreetMap, but you can use any convenient map service you want, such as GoogleMap or any other.

```bash
npm i leaflet@latest
```

After install, generate a dedicated component called *map*.

```bash
ng g c map --skip-tests
```
The template of this component will contain the map object, assigned to a div with an id named **map**, like this :

```html
<div id="map"></div>
```

As you need to access the *#id element of the DOM* for inserting the map, you require to initiate the map in the *AfterInitView* lifecycle hook.

The *Leaflet library* is imported as *L*, and all the components will be derivated from it (L.Map, L.marker, L.popup etc...). The map is defined by the id tagname (for targeting insertion) and some options such as map center coordinates and zoom value. This part of map is made of a lot of *tiles* on a layer you have to call with the right service URL. This is where you call the OpenStreetMap service, or any other you want.

You finally add these tiles to the map you just created.

```javascript
import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
  private map;

  private initMap(): void {
    this.map = L.Map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3
    });


    const tiles = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 3,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    tiles.addTo(this.map);
  }

  constructor() { }

  ngAfterViewInit(): void {
    this.initMap();
  }
}
```

The tiles will appear in the wrong order, so you need to add *"./node_modules/leaflet/dist/leaflet.css"* to the **styles** parameter of *angular.json*.

All the additional tools, like **markers** or **popups**, will be added to the map object in the *AfterViewInit* lifecycle hook.

## Services

To add informations to enrich your map, you will have to access data with **geoJSON** format. I currently used open data from the Nice city in [this website](http://opendata.nicecotedazur.org/data/dataset?res_format=geojson). These static datas are placed in *assets/data*, but you can of course access data from an API to get more fresh and updated values.

``` javascript
// Marker Service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';

@Injectable({
  providedIn: 'root'
})
export class MarkerService {
  ports: string = '/assets/data/localisation-des-ports.geojson';

  constructor(private http: HttpClient) {
  }

  makePortMarkers(map: L.map): void {
    this.http.get(this.ports).subscribe((res: any) => {
      for (const c of res.features) {
        const lon = c.geometry.coordinates[0];
        const lat = c.geometry.coordinates[1];
        const marker = L.marker([lat, lon]);

        marker.addTo(map);
      }
    });
  }
}

// Map Component
...
constructor(private markerService: MarkeService) {} // don't forget to import the service!

ngAfterViewInit(): void {
    this.initMap()
    this.markerService.makePortMarkers(this.map)    // call the service's method with the map as a parameter
}
```

The global idea is to make up some services calling the data sources with **HttpClient module** in order to setup **observables** you will subscribe to in the *AfterViewInit map component*.




You can see a demo of this app in [my demo page](https://peanuts-83.github.io/maps_nice/).

[My Github repository](https://github.com/Peanuts-83/maps_nice)

*[For the whole tutorial, explanations and API documentation, please check the references websites given in the README.md](https://github.com/Peanuts-83/maps_nice/blob/master/README.md)*


OpenStreetMap & Leaflet - Angular

[![Material Design demo](/images/material/materialImg.png)](https://ng-material-peanuts.herokuapp.com/)
[My Github repository](https://github.com/Peanuts-83/angular_material/tree/main/client)

Discover with a quick *HOW TO* the way to manage Material Design in your Angular projects. This is a short overview of the nice and smooth UI/UX capabilities of this cross-over framework library.

The interest of Material lives in the way you can develop UI/UX very well designed very quick, so you can spend more time on the interresting part of your job, I mean javascript algorythms and high-level functionalities...

And these components are also easily customizable, so it won't look the same as your neighbour ;)

## Easy setup

```bash
ng add @angular/material
```

After install, setup a specific **module** in shared/modules to manage all the required imports for your project. This way you wont load the whole library, but only the components you need.

Because you must import and export the same array of components twice, use a MATERIALS constant for both.

```javascript
// shared/modules/material.module.ts
import { NgModule } from '@angular/core'

import { MatButtonModule } from '@angular/material/button'
import { MatButtonToggleModule } from '@angular/material/button-toggle'


const MATERIALS = [
  MatButtonModule,
  MatButtonToggleModule,
]

@NgModule({
  imports: MATERIALS,
  exports: MATERIALS,
})
export class MaterialModule { }

```

You can then import your material.module.ts in your app.module.ts.

```javascript
// app.module.ts
import { NgModule } from '@angular/core'
import { MaterialModule } from './shared/modules/material.module'

import { AppComponent } from './app.component'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MaterialModule,
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

## Import a Material component

Except specific functionalities, you will import them the same way every time:

* Functionality: \<Name> (ex: Button)
* Import JS name: \<Mat[Name]Module> (ex: MatButtonModule)
* Use HTML name: \<mat-[option?]-[Name]-[option?]> (ex: \<mat-button>, \<mat-raised-button>, etc...)


## Options

Some options are generic ones, such as color (basic/primary/accent/warn).<br>
Each components gets specific options, such as FormGroup and formControlName for Input components.

You can see a demo of a few part of the huge ammount of components of this library on [my demo page](https://ng-material-peanuts.herokuapp.com/), while the technical explanations live on my Github README file.

[My Github repository](https://github.com/Peanuts-83/angular_material/tree/main/client)

*[For the whole API, check the OFFICIAL MATERIAL website dedicated to Angular https://material.angular.io/](https://material.angular.io/)*


Material Design - Angular

[![Mflix Homepage](/images/mflix/mflix.png)](https://mflix-git-main-peanuts-83.vercel.app/)
[Test the app live here](https://mflix-git-main-peanuts-83.vercel.app/)

The objective of this project is to create an application "from scratch" providing ratings and reviews on cinema movies, using API self-made routes implemented with aggregate mongo's requests.

## Figma

([Project's UI on Figma](https://www.figma.com/file/rl6YRZXP9g5gljMydsDjgg/Mflix))
Quick development of the application's UI design, its functionalities (form fields to address request, sort fields...), and the articulation of responsive elements.

## React

Classical base components are used, with special components required from NextJS (_app.js & layout.js). The use of Style with Sass requires modules, because of the way NextJS manages style as an object.

Some UI elements such as double range bar required some specific CSS/JS work around, masking original elements to reshape them the right way...

You can use the "Show request build" button to see the request adressed to mongo server being shaped live!

## NextJS - API routes

API routes are defined in the same project. A default route (index) can be defined, and a more specific route can be built with specific arguments to query.

## Atlas MongoDB service

Mongo gives access to a free online database service called Atlas, provided with some data collections to be used for experimentation.

### [The Github repo](https://github.com/Peanuts-83/mflix)

*... still got to work on it, a bunch of functionalitites are to be done and the code is not clean and perfectly commented, this project is still at work.*


Mflix - Fullstack project

Image management in NextJS can be made by using **Image component**.

Using this component with Server Side Rendering option or either Client Side Rendering option enables to make use of a bunch of pre-made features such as *loader*, *quality settings*, *blurDataURL* (placeholder image beofre full loading) or *lazy loading*...

All these functionalities and more are clearly explained in [the online doc](https://nextjs.org/docs/api-reference/next/image).

*But one thing I have had a bit of difficulty to resolve is setting a **fallback image** in the case an image URL is wrong.*

## Fallback Image

The solution I found is to build a derivated component from *Image component* I called **ImageWithFallback**. This component imports the NextJS *Image component*, with a default *fallback image*.

It takes two required parameters :
* **src** - The original image URL.
* **fallback** - The fallback image.
* Other settings (width, eight, layout ...) are taken with **...rest** parameter. They can be defined either in the **ImageWithFallback** component, or in the call of this component in the parent component.

```javascript
import Image from 'next/image'
import { useState } from 'react'
import defImg from 'assets/default_movie.png'


export default function ImageWithFallback({ src, fallback, ...rest }) {
    const [imgSrc, setImgSrc] = useState(src)

    function handleError() {
        setImgSrc(fallback)
    }

    return (
        <div>

            <Image
                {...rest}
                src={imgSrc}
                layout='responsive'
                placeholder={fallback}
                onError={handleError}
            />
        </div>
    )
}
```

As you can see, the component accepts an **onError** eventHandler that enables the use of a *state setter* to change the src target to the **fallback image**.

## Responsive image

An important option for responsive image management is the proper use of **layout** property. Here are the accepted options you will have to use for the **layout** behavior of the image as the viewport changes size :

* **intrinsic** (default)
    - Behavior : Scale down to fit width of container, up to image size
    - srcSet : 1x, 2x (based on imageSizes)
    - sizes : N/A
    - Has wrapper and sizer : yes

* **fixed**
    - Behavior : Sized to width and height exactly
    - srcSet : 1x, 2x (based on imageSizes)
    - sizes : N/A
    - has wrapper and sizer : yes

* **responsive**
    - Behavior : Scale to fit width of container
    - srcSet : 640w, 750w, ... 2048w, 3840w (based on imageSizes and deviceSizes)
    - sizes : 100vw
    - has wrapper and sizer : yes

* **fill**
    - Behavior : Grow in both X and Y axes to fill container
    - srcSet : 640w, 750w, ... 2048w, 3840w (based on imageSizes and deviceSizes)
    - sizes : 100vw
    - has wrapper and sizer : yes

* **raw**
    - Behavior : Insert the image element with no automatic layout behavior
    - srcSet : Behaves like responsive if the image has the sizes prop, and like fixed if it does not
    - sizes : optional
    - has wrapper and sizer : no


Image fallback & responsive

*In my NextJS framework learning goal, I decided to convert a React application (Create-React-App) into a NextJS application.*

You will tell me that it should not be very complicated, both relying on the same language, the same technology. Certainly, but NextJS including the back-end in addition to the front-end, with API routes and requests to the mongoDB server, the matter is not as easy as it seems!

My first step was to properly configure the Redux store and put the UI imports (styles) back in place. The CSS is actually managed in a particular way, with a global style that applies to **_app.js** in a classic way, and the other styles that are managed as objects whose properties are called as follows:

```javascript
import style from 'styles/compStyle.css'
...
<div classname={style.class}>
```

Obviously, I wanted to go too fast, and I took the opportunity to modify all the links which now require an **"a" tag** in the **"Link" tag** to work.
I took it badly, because this error cost me an afternoon of bug research that I attributed to the store, [see my previous post...](frustration)

I then advanced with difficulty in configuring the **login/logout** function. A blog post by [Jason Watmore](https://jasonwatmore.com/post/2021/08/04/next-js-11-jwt-authentication-tutorial-with-example-app#login-jsx) describes in detail the implementation of this function by wrapping it around the application.

So I had to extract this functionality from my store where it was, to then come and link it to the store and thus retain global access to the user's properties.

*The complete architecture of the application had to be reviewed, in order to take into consideration the routing by files of the 'pages' directory.*

Some parts of the old app that I wanted to keep required me to make significant changes to Jason's code, such as the form checkers.

**One interesting trick I learned** is to create an index.js file in the utilities folders such as 'helpers' or 'services' directories which just exports the exported functions of all the files in the directory. **You can then call any exported function by simply calling the directory in question**.

```javascript
// From index.js
export * from './myFile.js'
```

```javascript
// You don't have to specify any file...
import { function } from 'dirName'
```

Another trick is the creation of a **jsconfig.js** file which allows you to define a starting point for the paths called in imports. **We can then import from the root of the defined project**, without having paths with extension type "../../../directory"

```javascript
{
    "compilerOptions": {
        "baseUrl": "."
    }
}
```

```javascript
// from ./pages/api/authenticate.js
import { function } from 'helpers'
// instead of
import { function } from '../../helpers'
```

The project is therefore progressing, but **there is still a lot to do**:
+ Terminate access to application pages (especially the Transactions page)
+ Put back in place the UX - interactivity
+ Switch from mocked data to remote data


React-CRA migration to NextJS #1

I see some learners express their difficulties on a daily basis and ask themselves the question of continuing. It is healthy to express oneself and to externalize one's anxieties.

**However, we must make one thing clear: a young dev will be frustrated 90% of his time, falling from problem to problem during his apprenticeship.**

That's how it is, you have to accept this frustration and make it a source of motivation by keeping in mind these remaining 10% of satisfaction from having overcome a seemingly insoluble problem 😀!

**For example, here is my day on Sunday:**

In the morning, I started learning *NextJS*, a React-based framework that links front and back and allows SSR among other things.

In the afternoon, I tackle the migration of P13-ArgentBank into this techno, starting with the transition of the Redux store (huge piece!). The changes don't look complex and are few in number... and then bam!

*Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.*

I spent hours turning the problem around, consulted dozens of doc and forum pages to make sure my store's Provider was taken correctly.

Then I gradually moved away, I observed the close components then more distant... until my Header component. Nothing to do with Redux!
I use the Link component there, which is imported into React-CRA as follows:

```javascript
import { Link } from 'react-router-dom'
```

In NextJS, it is imported as follows:

```javascript
import Link from 'next/link'
```

**I removed the braces, smiled to have found the solution, put the computer to sleep. Sweet Dreams. It was 11 p.m....**


{ "Frustration": "Motivation" }

We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

You can use Static Generation for many types of pages, including:

- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation

You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.

On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.

In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.


When to Use Static Generation v.s. Server-side Rendering

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.


Tom's blog

Code for life, from front to back

Bills