PhongPham
c65cc97a33
✨ MAJOR FEATURES: • Auto-zoom intelligence với smart bounds fitting • Enhanced 3D GPS markers với pulsing effects • Professional route display với 6-layer rendering • Status-based parking icons với availability indicators • Production-ready build optimizations 🗺️ AUTO-ZOOM FEATURES: • Smart bounds fitting cho GPS + selected parking • Adaptive padding (50px) cho visual balance • Max zoom control (level 16) để tránh quá gần • Dynamic centering khi không có selection 🎨 ENHANCED VISUALS: • 3D GPS marker với multi-layer pulse effects • Advanced parking icons với status colors • Selection highlighting với animation • Dimming system cho non-selected items 🛣️ ROUTE SYSTEM: • OpenRouteService API integration • Multi-layer route rendering (glow, shadow, main, animated) • Real-time distance & duration calculation • Visual route info trong popup 📱 PRODUCTION READY: • SSR safe với dynamic imports • Build errors resolved • Global deployment via Vercel • Optimized performance 🌍 DEPLOYMENT: • Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app • Bundle size: 22.8 kB optimized • Global CDN distribution • HTTPS enabled 💾 VERSION CONTROL: • MapView-v2.0.tsx backup created • MAPVIEW_VERSIONS.md documentation • Full version history tracking
70 lines
2.3 KiB
Markdown
70 lines
2.3 KiB
Markdown
# FP Guide
|
|
|
|
**date-fns** v2.x provides [functional programming](https://en.wikipedia.org/wiki/Functional_programming) (FP)
|
|
friendly functions, like those in [lodash](https://github.com/lodash/lodash/wiki/FP-Guide),
|
|
that support [currying](https://en.wikipedia.org/wiki/Currying).
|
|
|
|
## Table of Contents
|
|
|
|
- [Usage](#usage)
|
|
|
|
- [Using Function Composition](#using-function-composition)
|
|
|
|
## Usage
|
|
|
|
FP functions are provided via `'date-fns/fp'` submodule.
|
|
|
|
Functions with options (`format`, `parse`, etc.) have two FP counterparts:
|
|
one that has the options object as its first argument and one that hasn't.
|
|
The name of the former has `WithOptions` added to the end of its name.
|
|
|
|
In **date-fns'** FP functions, the order of arguments is reversed.
|
|
|
|
```javascript
|
|
import { addYears, formatWithOptions } from 'date-fns/fp'
|
|
import { eo } from 'date-fns/locale'
|
|
import toUpper from 'lodash/fp/toUpper' // 'date-fns/fp' is compatible with 'lodash/fp'!
|
|
|
|
// If FP function has not received enough arguments, it returns another function
|
|
const addFiveYears = addYears(5)
|
|
|
|
// Several arguments can be curried at once
|
|
const dateToString = formatWithOptions({ locale: eo }, 'd MMMM yyyy')
|
|
|
|
const dates = [
|
|
new Date(2017, 0 /* Jan */, 1),
|
|
new Date(2017, 1 /* Feb */, 11),
|
|
new Date(2017, 6 /* Jul */, 2)
|
|
]
|
|
|
|
const formattedDates = dates.map(addFiveYears).map(dateToString).map(toUpper)
|
|
//=> ['1 JANUARO 2022', '11 FEBRUARO 2022', '2 JULIO 2022']
|
|
```
|
|
|
|
## Using Function Composition
|
|
|
|
The main advantage of FP functions is support of functional-style
|
|
[function composing](https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba).
|
|
|
|
In the example above, you can compose `addFiveYears`, `dateToString` and `toUpper` into a single function:
|
|
|
|
```javascript
|
|
const formattedDates = dates.map((date) => toUpper(dateToString(addFiveYears(date))))
|
|
```
|
|
|
|
Or you can use `compose` function provided by [lodash](https://lodash.com) to do the same in more idiomatic way:
|
|
|
|
```javascript
|
|
import compose from 'lodash/fp/compose'
|
|
|
|
const formattedDates = dates.map(compose(toUpper, dateToString, addFiveYears))
|
|
```
|
|
|
|
Or if you prefer natural direction of composing (as opposed to the computationally correct order),
|
|
you can use lodash' `flow` instead:
|
|
|
|
```javascript
|
|
import flow from 'lodash/fp/flow'
|
|
|
|
const formattedDates = dates.map(flow(addFiveYears, dateToString, toUpper))
|
|
``` |