# Next.js duomenų gavimas

Next.js turi kelis būdus gauti duomenis puslapiams. Šiame dokumente apžvelgiamas pagrindinės duomenų gavimo strategijos.

## getStaticProps

`getStaticProps` leidžia gauti duomenis statinio generavimo metu (build time).

```jsx
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // bus perduota puslapio komponentui kaip props
  };
}
```

## getServerSideProps

`getServerSideProps` vykdomas kiekvieną kartą, kai puslapis prašomas iš serverio.

```jsx
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // bus perduota puslapio komponentui kaip props
  };
}
```

## getStaticPaths

Naudojamas su dinaminiais maršrutais ir `getStaticProps` statiniams puslapiams generuoti:

```jsx
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return {
    paths,
    fallback: false,
  };
}
```

Next.js duomenų gavimas

# Next.js Router

Next.js turi įmontuotą puslapių maršrutizavimo sistemą, kuri leidžia sukurti dinaminius puslapius su paprastomis ir patogimis funkcijomis.

## Pagrindinės savybės

- **Failu pagrįstas maršrutizavimas**: Kiekvienas failas `pages` kataloge tampa maršrutu.
- **Dinaminiai maršrutai**: Galite sukurti dinaminius maršrutus naudodami laužtinius skliaustus, pvz., `[id].js`.
- **Kelių segmentų maršrutai**: Galite sukurti sudėtingesnius maršrutus naudodami `[[...slug]].js` sintaksę.

## Pavyzdys

```jsx
import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { id } = router.query;
  
  return <p>Post: {id}</p>;
}
```

## Navigacija tarp puslapių

Next.js siūlo `Link` komponentą, kuris optimizuoja navigaciją tarp puslapių:

```jsx
import Link from 'next/link';

export default function NavExample() {
  return (
    <Link href="/posts/first-post">
      <a>Pirmasis įrašas</a>
    </Link>
  );
}
```

Next.js Router

# Failo sukūrimas

```sh
nvim demo.md
```

Paleis buferį susietą su failu `demo.md`. Tai kas yra RAM'e yra buferyje, failas yra HDD.

* `:w` - įrašyti buferį į diską
* `:cq` - atšaukti pakeitimus ir užverti

Jeigu apačioje ties failo pavadinimu rodo [+], vadinasi yra neišsaugotų pakeitimų

# Darbas su nvim

* `:edit +TAB` - pasirenkamas failas redagavimui, navigacija TAM ir enter
  * pasirinkimas `shift` + `r`
* `:edit .`
* `:set nu` - ijungia eiluciu numeravimą
* `:set relativenumber` - ijungia relatyviu numeracija (nuo esamos eilutės
* `:buffers` - rodo kas atverta (ramuose = buferyje)
* `:buffer 1` - persijungimas tarp buferių
* `:bnext` - sekanti buferis
* `:bpreviuos` - buvęs buferis

## Rėžimai

* Normal - judėjimas dokumente
* i. a - insert
* `:` cmd

## Motions (basic)

* `j` - juda žemyn
* `k` - juda aukštyn
* `l` - juda dešine
* `h` - juda į kairę
* `w` - judame next žodis (žodžio pradžia)
* `shift + w` - žodis bert kas atskirtas tapu
* `b` - atgal buvusio žodio pradži`
* `e` - žodžio galą
* `shift + e` - tas pats kas `e` tik žodis tai kads atskirta tarpu

## Kombinacija

operator - count/(count alternative) - motion

`operator` - veiksmas, nebūtinas (copy, delete)
`count` - kiek kartų kartoti
`count alternative` - skope
`motion` - veiksmas kuri kartoti

`3w` - 3 žodiai

## Motion advanced

* `$` - eilutės pabaiga
* `0` - eilutės pradžia
* `gg` - failo pradžia
* `shift + g` - failo apačia
* `[line number] + shigt +g` - nueiti į konkrečia eilute
* `f + [chart]` - pirmas chart
*  `2ff` - 2 f

## Movin blobks

* `shift + ]` arba `shift + [` - judame blokais tarp `{`
* `%` arba `shift + 5` - judame per `{` ir `}`, arba tarp `<` ir `>`, arba tarp HTML tagu `<head>` ir `</head>` (jeigu stovime ant tag)
* `[ + shift + [` - grįžtame prie paskutinio `{`
* `ctrl+u` - page up
* `ctrl+d` - page down
* `shift + '-'` - prie eilutes pradzios (teksto pradzia eilutėje |_____[]asssssss)
  * "-" - aukstne pradzia
  * "+" - žemesnė pradžia

## Delete text

* `d2w` - delete 2 words ir liekame `NORMAL` mode 
* `c2w` - delete 2 words ir liekame `INSERT` mode. c - correct text
* `u` - undo
* `dw` - delete word
* po delete žodis yra default buferyje
* `dd` - trina eilute
* `db` - delete atgal
* `d2 + enter` - trina 2 eilutes
* `d2k` - trina di eilutes aukštyn
* `d10j` - delete žemyn
* `d$` - trinti iki eilutės pabaigos

Failo sukūrimas

When you have items ant need to join. But problem when semewhere is null. Solution

```
<div> className={['box', classNameFromProps, oneMoreClassName].filter(Boolean).join(' ')}</div>
```
 Same but overwriting

```
<div> {...props} className={['box', props.className, oneMoreClassName].filter(Boolean).join(' ')}</div>
```

className

Komponentas - tai react funcija, ja reikia iškviesti

Komponentas tai funcija, kuriai perduodi props objekta ir ji kažka renderina.

Komponento pavadinimas iš didziosios, nes reikalingas linkas (reference) į funciją, kad ją iškvesti. Jeigu norima iš mažosios, reikia perduoti lika kitaip React galvos, kad čia natyvus komponentas html pvz div.

```
function message () {}

const component = {message}
...
<component.message />

```

---

Jeigu norime nieko negrąžinti, grąžiname `null`

---

Klaida:

```
function App() {

  return 
    <div>
    ....
    </div>

}
```

Nes JS engine automatiskai po return uzdės `;`. Ir funkcija grąžins `undefined`

```
function App() {

return ; // <---
  <div>
  ....
  </div>

}
```

Todėl norint kažką grąžinti multiline reikia skliaustelių

```
function App() {

return (
  <div>
    ....
  </div>
  }
}
```

---

Early return


```
function App() {

  if(error){
      return <div>Error</div>
  }

return (
  <div>
    ....
  </div>
  }
}
```

components

# Controlled input

Tai, kai `onChange` event input value saugai `useState` value

```
import { useState } from 'react'
import { createRoot } from 'react-dom/client'

function ControlledInput Example() {
  const [value, setValue] = useState('')

  return (
    <div>
      <input
        value={value}
        onChange={event => {
          setValue(event.currentTarget.value.replace(/koala/gi, "'))
        }}
      />
      <p>You typed: {value}</p>
    </div>
  )
}

const rootEl = document.createElement('div')
document.body.append(rootEl)
createRoot(rootEl).render(<ControlledInputExample />)
```

Controlled input

Paprastas css (global)

css
```
.text {
  ...
}
```

jsx
```
import './file.css'
....
```

---

Module css

file.module.css
```
.text {
  ...
}
```

jsx
```
import css from './file.module.css`
...
<div className={css.text} >
...
```

---

In jsx

```
export default function Count() {

const span = span`
  colort: green;
`

return <span>0</span>

}
```

---

global

styliai faile index.css

---

Tailwind

Pagal default css framework naudojamas sis

jsx
```
...
<div className="text-green text-xl"></div>
```

---

# Derived state

rendrinimo metu suskaičiuojamas parametras - `const isEven = count % 2 === 0`, vengiant beraikalo naudoti useState

```tsx
import { useState } from 'react'
export default function Counter() {
  const [count, setCount] = useState(0)

  function handleClick() {
    const newCount = count + 1
    setCount(newCount)
  }

  // this is the derived state
  const isEven = count % 2 === 0

  return (
    <div>
      <p>{count}</p>
      <p>{isEven ? 'Even': 'Odd'}</p>
      <button onClick={handleClick}>Increment</button>
</div>
```

Dar pvzd:


```
function App() {
  const [query, setQuery] = useState('')
  const words = query.split(' ')

  const dogChecked = words. includes ('dog')
  const catChecked = words. includes ('cat')
  const caterpillerChecked = words. includes ('caterpiller')
```

Derived state

# Effect Cleanup

Esmė tokia, kad nors ir komponentas bus `unmounted`, gali likti atmintis užimta. Todėl reikia išvalyti efektorius.

```tsx
useEffect (() => {
  function handleEvent() {
    // some-event happened!
  }
  window.addEventListener('some-event', handleEvent)
  return () => {
    window.removeEventListener('some-event', handleEvent)
  }
}, [])
```

## Kaip pasireiškia atminties nutekėjimas ir kaip fixint.

[Naršyklės task manager](../main/chrome/taskManager.md)

Sukuriamas ReactJs komponentas su useEffect ir ten kazkokia funcija. Uždarius komponenta atmintyje lieka ryšiai (ref, async uzkrauta atmintis ir t.t.) 

```tsx
  const dogChecked words. includes ('dog')
  const cat Checked = words. includes ('cat')
  const caterpillar Checked = words. includes ('caterpillar')
  useEffect (() => {
    // you can use this to test whether your cleanup is working 
    const hugeData = new Array(1_000_000).fill(new Array(1_000_000).fill('....')
    // extract your event handler here into a function called updateQuery
    window.addEventListener('popstate', () => {
      // you can use this to test whether your cleanup is freeing up memory // console.log(hugeData)
      console.log('popstate event listener called')
      setQuery(getQueryParam())
    })
    // return a function which removes the popstate https://developer.mozilla.org/en-US/docs/Web/
}, [])
```

mount -> unmount -> mount -> unmount komponenta augs naudojama atmintis (memmory leak)

Sprendimas:

```tsx

useEffect (() => {
  const hugeData = new Array(1_000_000).fill(
    new Array(1_000_000).fill('ON'),
  )

  const handlePopState = () => {
    console.log('popstate event listener called')
    setQuery(getQueryParam())
  }

  window.addEventListener('popstate', handlePopState)

  return () => {
    window.removeEventListener('popstate', handlePopState)
  }
], [])
```

*  `const handlePopState` - iškeltas į nauja kintamaji, kad linkus tuos pacius perduoti tiek add tiek remove event listener
*  kas ivyks event handler isliks net unmount komponantą ( `const handlePopState = () => {` )
*  rezultate unmount komponentui suveiks cleanup return fn, ir garbage collector isvalis atmintį

Effect Cleanup

# How it works

main.jsx :

```
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
```

Ieško root elemento ir ten ikelia ReactApp.

index.html

```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
```

App įkels į ```<div id="root"></div>```

How it works

# Intro

Wrong solution:

```tsx
function Calculator({ left, operator, right }) {
  try {
    const resul = operations[operator](left, right)
    return (
      <div>
        <code>
          {left} {operator} {right} = <output>{result}</output>
        </code>
      </div>
    )
  } catch (error) {
    return <div>Oh no! An error occurred! </div>
  }
}
```

Reikia apgaubti pati App komponenta

```
<ErrorBoundary fallback={<div>Oh no!</div>}>
  <App />
</ErrorBoundary>
```

Realizacija
```
class ErrorBoundary extends React.Component {
  state = { error: null }
  static getDerivedStateFromError(error) {
    return { error }
  }
  render() {
    return this.state.error? this.props. fallback this.props.children
  }
}
```

Async realizacija

```
function App() {
  const { showBoundary } = useErrorBoundary()

  useEffect (() => {
    function handleMouseMove(event) {
      try {
        // Do something that could throw
      } catch (error) {
        showBoundary(error)
      }
    }
    window.addEventListener('mousemove', handleMouseMove)
      return () => {
        window.removeEventListener('mousemove', handleMouseMove)
      }
  })

  // Render
}
```

Dar pvz:

```
function App() {
  return (
    <div>
      <ErrorBoundary fallback={<div>Something went wrong with the list. </div>}>
        <List />
      </ErrorBoundary>
      <ErrorBoundary fallback={<div>Something went wrong with this item, try another.</div>}
        <Detail />
      </ErrorBoundary>
    </div>
  )
}
```

## Sprendimas

Naudojant react-error-boundary

```
import { createRoot } from 'react-dom/client'
// bring in ErrorBoundary and FallbackProps type from react-error-boundary importErrorBoundary, type FallbackProps } from 'react-error-boundary'
...
function ErrorFallback (props: FallbackProps) {
  return (
    <div role="alert">
      <p>Something went wrong: </p>
      <pre> {props.error.message}</pre>
    </div>
  )
}
...
function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <OnboardingForm />
    </ErrorBoundary>
  )
}

```

async

```
import {
  ErrorBoundary,
  useErrorBoundary,
  type FallbackProps,
} from 'react-error-boundary'

function OnboardingForm() {
const { showBoundary } = useErrorBoundary()

return (
  <form
    action="api/onboarding"
    method="POST"
    encType="multipart/form-data"
    onSubmit={event => {
    try {
      event.preventDefault()
      const formData = new FormData(event.currentTarget)
      console.log(Object.fromEntries (formData))
      const accountType = formData.get('accounType') as string
      console.log(accountType.toUpperCase())
    } catch (error) {
      showBoundary(error)
    }
  }}
...
function ErrorFallback (props: FallbackProps) {
  return (
    <div role="alert">
      <p>Something went wrong: </p>
      <pre> {props.error.message}</pre>
    </div>
  )
}
...
function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <OnboardingForm />
    </ErrorBoundary>
  )
}
```

Reset error (recreate new component instance without data (state)

`resetErrorBoundary` - fallback galima pasiimti reset boundary

```
function Error Fallback({ error, resetErrorBoundary }: FallbackProps) {
  return (
    <div role="alert">
      There was an error: {' '}
      <pre style={{ color: 'red', whiteSpace: 'normal' }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}
```

Intro

# Darbas su forma

`event.preventDefault()` - stops default drowser behavior - reload page

```
<form
  onSubmit={event => {
    event.preventDefault() // prevent the default browser behavior
    const formData = new FormData(event.currentTarget)
    console.log(Object.fromEntries(formData))
    // do something with the form data
  }}
  {/* form fields go here */}
</form>
```

```
<label>
  Name
  <input name="name" type="text" />
</label>
```

```
<label htmlFor="nameInput">Name</label>
<input id="nameInput" name="name" type="text" />
```

## Metodai

Formoje yra GET, POST ir DIALOG metodai . 

### GET

Get metodas - visus perduodamus duomenis sudeta query. Tinka visokiom paieškoms, kur nera kritiniu duomenų (slaptažodžiū ar pnš)

Duomenu gavimas:

```
new URL(request.url).searchParams
```

### POST

Post metodas - perduoda bodyje

Duomenų gavimas:

```
await request.formData()
```

## Enc type

Tam, kad perduoti prikabintą faila, reikia pridėti parametrą `encType=multipart/form-data`

`new FormData` api gali tureti savyje kelis parametrus tuo paciu pavadinimu

## Action

Galime action perduoti callback, kuris kaip parametra gauna formos duomenis FormData objekte

```
function App() {

  function logFormData(formData: FormData) {
    console.log(Object. fromEntries (formData))
  }

return (
<form action={logFormData}>
  <div>
    <label htmlFor="username Input">Username:</label>
    <input id="usernameInput" name="username" /> </div>
```

Darbas su forma

# Init callback

Pvzd: 
```tsx
const initialVal =  calculateInitialValue()
const [val, setVal] = useState(initialVal)
```

Bėda, kad React kvies šį komponentą daug kartų ir kiekvienkart perskaičiuos init value ir bus renderinimas

```tsx
const [val, setVal] = useState(() => calculateInitialValue())
```

Tokiu atveju React iškvies, tik tada kada reikia. Pirmo renderinimo metu.

Pvzd:

```
function getQueryParam() {
  const params = new URL SearchParams (window.location.search)
  const initialQuery = params.get('query') ?? ''
  return initialQuery
}

function App() {
  const [query, setQuery] = useState(getQueryParam)

```

Bet jeigu iškviesime fnc useState `const [query, setQuery] = useState(getQueryParam())`, tai kvies funcija per kiekviena rendarinimą

Init callback

# checkbox

Jeigu pirma input, o paskui text, tai jis bus desineje input

```jsx
<div>
  <label>
    <input  name="waiver" type="checkbox" /> 
    Waiver Signed
  </label>
</div>
```

Submitinus ateis `waiver: "on"`, jeigu nebus selectintas, visai enateis, t.y. `off` string nebus

# select

Eiliškums `option` svarbus, pirmas bus default reiškmė 

```
<div>
  <label htmlFor="accountTypeSelection">Account Type:</label> <select id="accountTypeSelection" name="accountType">
  <option value="">--Please select an option--</option>
  <option value="admin">Admin</option>
  <option value="teacher">Teacher</option>
  <option value="parent">Parent</option>
  <option value="student">Student</option>
</select>
</div>
```

# radio

selectinus `visibility` value bus `value` - public / private. Nieko neparankus nebus visai.

```
<fieldset>
  <legend>Visibility</legend>
  <div>
    <label>
      <input name="visibility" type="radio" value="public" />
      Public
    </label>
  </div>
  <div>
    <label>
      <input name="visibility" type="radio" value="private" />
      Private
    </label>
  </div>
</fieldset>
```

# hidden

Naudojamass, kai norima perduoti formos duomenis, kuriu UI nenorime kad butu (user nereikia kad matytu) 

```
<input type="hidden" name="orgId" value="123" />
```

# default value

Jeigu bus value, react neleis pakeisti, default tik init metu

```
<input type="text" defaultValue="Hello World" />

// these give the same result:
<input type="number" defaultValue="42" />
<input type="number" defaultValue={42} />

<input type="date" defaultValue={new Date().toISOString().slice(0, 10)} />

<select defaultValue="pineapple">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="pineapple">Pineapple</option>
</select>

<input type="checkbox" default Checked />
// and for the radio, just set default Checked on the one you want
<input type="radio" name="fruit" value="apple" defaultChecked />
<input type="radio" name="fruit" value="banana" />
<input type="radio" name="fruit" value="pineapple" />
```

checkbox

# React App Lifecycle

1. Initial render
2. Create the DOM
3. use interact (vartototo veiksmai)
4. state change
5. re-render
6. update the dom
7.  -> 3

# Managing UI state

- `useState`
- `useRef`
- `use`
- `useReducer`
- `useEffect`

React App Lifecycle

# Lifting State

Svarbu:

* jeigu state yra vaikiname tai uzmount dings ir state
* jeigu tstae teviniame, tai jam pasiekitus bus perrenderinti vaikai

```tsx
import { useState } from 'react'

function App() {
  return (
    <div>
      <Counter />
    </div>
  }
}

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(count + 1}> Increase </button>
    </div>
  )
}
```

Jeigu dviems vaikams reikia state reikia jį iškelti aukščiau. T. y. į tėvini komponwentą ir perduoti vaikams.

```tsx
function App() {
  return (
    <div>
      <Counter />
      <CountDisplay />
    </div>
  }
}

function CountDisplay() {
  return <div>Count: 0</div>
}
```

Iškeliam state į App komponentą

```tsx
function App() {
  const [count, setCount] = useState(0)

return (
  <div>
    <Counter count = {count} setCount = { setCount} />
    <CountDisplay count={count} />
  </div>
}
```

# Colocate state

Iš `parent` komponento state iškeliame į `child`. Viskas kas buvo ti atskirai:

# Kita

filtracijos pvzd (nesusija su tema)

*  `isFavorited={favorites.includes(post.id)}` - PASIEMAME ID TEVINIAME NES TEN NAUDOJAME (VAIKUI NESIUNCIAM)

```tsx
matchinProps.sort((a, b) = => {
  const aFav = favorites.includes(a.id)
  const bFav = favorites.includes (b.id)
  return aFav === bFav ? 0: aFav ? -1 : 1
})
.map(post => (
  <Card
    key={post.id}
    post={post}
    isFavorited={favorites.includes(post.id)}
    onFavoriteClick= {favorite => {
      setFavorites (prevFavorites => {
        if (favorite) {
          return [...prevFavorites, post.id]
        } else {
          return prevFavorites.filter(id => id
        }
    })
))}
```

Lifting State

# Vite

[Vite dokumentacija](https://vite.dev/)

## Create APP

Sukuriame React APP naudodami Vite

```
npm create vite -

npm create vite@4.4.1 .
```

Pasirenkame kokį projektą kursime

```
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

```

Next step

```
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    React Router v7 ↗

```

Rezultate

```
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /home/vytautas/temp/test...

Done. Now run:

  npm install
  npm run dev

```

## After create



Diegiame ```npm install```, projekto paleidimas ```npm run dev```

```

  VITE v6.0.6  ready in 466 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help


```

package.json :

```
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
```

Vite

# Components folder

Kodas, kuris keičiasi kartu (susijęs), randati toli vienas nuo kito. Kodas kuris nesusijęs randasi kartu.

Šalia:
```
...
TableCell.tsx
...
TableRow.tsx
...
TrackModel.tsx
...
```

Logika artima, bet failai nutolę

```
/src/components/TrackModal.tsx
/store/selectors/trackSlice.ts
```

Signalas apie problemą esantys katalogai (failai pagal typai):

```
/state/
/hooks/
/components/
```

Prieš

```mermaid
  graph TD;
      Components-->Component2Part1;
      Components-->Component1Part1;
      Components-->Component1Part2;
      Components-->Component2Part2;
      Components-->Component1Part3;
      Components-->Component1Part4;
      Components-->Component2Part3;
      Components-->Component2Part4;
      Store-->State1
      Store-->State2
      State2-->Component2Part1
      State2-->Component2Part2
      State2-->Component2Part3
      State2-->Component2Part4
      State1-->Component1Part1
      State1-->Component1Part2
      State1-->Component1Part3
      State1-->Component1Part4
```

Po

```mermaid
  graph TD;

      State2-->Component2Part1
      State2-->Component2Part2
      State2-->Component2Part3
      State2-->Component2Part4
      State1-->Component1Part1
      State1-->Component1Part2
      State1-->Component1Part3
      State1-->Component1Part4
```

## Minusai

- sunku orientuotis projekte
- užduoties sprendimui reikia suprasti visą kodą
- sunkumas dėl negalima "lokalizuoti" pakeitimų. Kai susiję failai šalia lengviau orientuotis

## Sprendimai

- Išskaidyto komponentas pagal modulius
- FSD
- DDD
- Mikrofront

Components folder

# Global state coupling

Sąryšis per globalų state. Pernešimas state (būsenos) į state manager padaro koda chaotišką, sunkų ryšių analizavimui. State manageriai: Redux, zuslan ir t.t. Viskas eina per global state

Pvz TableCell komponente išvalomas state. Turetu butu formoje. Kitame komponente irgi galimas išvalymas ir sunku atsekti.

```tsx
dispatch(setSelectedCell({ day, task})
dispatch(updateFormData({
  name: '',
  task,
  hours: 0,
  date: ${selectedYear}-${String(s.....
}));
dispatch(setIsModalOpen (true));
};
```


## Minusai

- vizualiai paprastesnis komponentas. Globalus state yra gerai, bet jis sukūria naujas problemas
- labai sunku suprasti kaip visa programa veikia
- neįmanoma perpanaudoti kodą
- kodas tampa sudetingas

## Sprendimai

- sukurti `local global state`. Ne visur reikia globalaus state
- naudoti paterną `mediator`

Global state coupling

# God component

Labai daug atsakomybės turi komponentas. Visas (visas kodas viename APP.tsx) arba per daug kodo viename faile. Reikia stantis kad faile butu iki 100 eilučių. Jeigu jau 100-200 eilučių kodo, jau reikia galvoti apie mažinimą. Vienas komponentas, viena atsakomybė. Viena priežąstis keisti. 

God component (kai visas kodas viename faile):

```
App.module.css
App.tsx
index.css
main.tsx
```

God component (kai viename faile daug atsakomybių, komponentas atsako uz modulio valdyma, formos kontrole, filtrus ir task):

```
const App = () => {
  const [tracks, setTracks] = useState<Track[]>([]); 
  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
  const [hideWeekends, setHideWeekends] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCell, setSelectedCell] = useState<{ day: number; task: string} | null>(null);
  const [selected Track, setSelectedTrack] = useState<Track | null>(null);
  const [formData, setFormData] = useState({
    name: '',
    task: '',
    hours: 0,
    date: new Date().toISOString().split('T')[0] });
```

## Minusai: 

- neaiškus kodas. Milerio krepsis, žmogus galvoje gali tureti 5 - 7 abstrakcijų vienų metu. Norint suprasti, kaip veikia, reikia VISKĄ suprasti. 
- neimanoma kodo perpanaudoti

## Sprendimas

Išskaidyti kodą į atskirus komponentus

God component

# hooks flow

Nepavyksta padalinti logiką į hookus, nes logikai reikia tų pačių duomenų. Sprendimas, duomenys gali pereiti iš vieno `hook` į kitą `hook` , kol nepateks į komponentą. Kiekvienas atsako už savo darbo dalį su duomenimis.

Buvo:
```mermaid
  graph TD;
      APP-->logicA;
      APP-->logicB;
      APP-->logicC;
```

Tapo:
```mermaid
  graph TD;
      APP-->hookA;
      APP-->hookB;
      APP-->hookC;
      hookA-->logicA;
      hookB-->logicB;
      hookC-->logicC;
```

Kiekvienas hook atlieka savo fnc

# Pavyzdys

Kiekvienas hookas su savo paskirtimi ir tiesiogiai vienas nuo kito nepriklauso 

- `useTracks` - darbas su trackais
- `useTracksFilter` atsako už filravima

```tsx
const App = () => {
  const { trackCreate, trackDelete, trackUpdate, tracks } = useTracks();
  const { filtered Tracks, filters, setFilters, visibleDays} = useTracksFilter({
    tracks,
  });

  const { uniqueTasks } = useTasks({
    tracks: filteredTracks,
  });

  const { getDayTotal, getDayTracks, getTaskTotal, getTotal} = useTableComputing({
    tracks: filteredTracks
  });

  const {
    cellclick,
    close,
    createClick,
    isOpenModal,
    selectedCell,
    selectedTrack,
    trackClick
} = useTrackModal();


const { formData, handleInputChange, handleSubmit ) = useTrackForm({
...filters,
selectedCell,
selectedTrack,
```

## Hook pvz

Priima inf, grąžina memorizuota duomenį

```tsx
import { useMemo } from "react";
import { Track } from "./use-tracks";

export function useTasks({ tracks } { tracks: Track[] }) {
  const uniqueTasks = useMemo (
    () => Array.from(new Set(tracks.map((track) => track.task))),
    [tracks]
);

return {
  uniqueTasks,
};
```

Nepriema paramsu bet grazina metodus ir parametrus

```tsx
import { useState } from "react";
import { Track) from "./use-tracks";

export function useTrackModal() {
  const [isCreate, setIsCreate] = useState(false);
  const [selectedCell, setSelectedCell] = useState<{
    day: number;
    task: string;
  } | null>(null);
  const [selectedTrack, setSelectedTrack] = useState<Track | null>(null);

  const cellClick (day: number, task: string) => {
    setSelectedCell({ day, task });
    setSelectedTrack (null); // Clear the selected track when a cell is clicked setIsCreate(true);
    setIsCreate(true);
  };

  const trackClick (track: Track) => {
    setSelectedCell(null); // Clear the selected cell when a track is clicked
    setSelectedTrack(track);
    setIsCreate(true);
  };
  ...  

  const createClick() => {
    setSelectedCell(null);
    setSelectedTrack(null);
    setIsCreate(true);
  };

  const isOpenModal = isCreate || selectedCell !== null || selectedTrack !== null;

  const close = () => {
    setSelectedCell(null);
    setSelectedTrack(null);
  };

return {
  isOpen: isCreate,
  selectedCell,
  selectedTrack,
  cellClick,
  trackClick,
  close,
  isOpenModal,
  createClick
}
```

Priema metodus ir parametrus

```tsx
import styles from "./tracks-filters.module.css";
export function TracksFilters({
  selectedMonth,
  selectedYear,
  hideWeekends,
  setSelectedMonth,
  setSelectedYear,
  setHideWeekends,
}:{
  selectedMonth: number;
  selectedYear: number;
  hideweekends: boolean;
  setSelectedMonth: (month: number) => void;
  setSelectedYear: (year: number) => void;
  setHideWeekends: (hideWeekends: boolean) => void;
  actions: React. ReactNode
}) {
const months = [
"January",
"February",
"March"
"April",
"May",
...
```

hooks flow

# "local" global state

State manager naudojimas

Situacija:
- Komponentų/hook'ų dekompozicijos metu keliams komponentams reikia `state`. Bet jis nereikalingas aukštesniam (išoriniams) kodui
- Iš `React` ribotumo , mums reikia iškelti `state` už komponento ribų (pvz į parent), tam kad galetume tai realizuoti keliams komponentams.

Sprendimas:
- Mes turi sukurti lokalų `context` tiems komponentams. Tokiu budu jie gali panaudoti `state`, be jo iškėlimo į kitus komponentus.

Buvo:
```mermaid
  graph TD;
      STATE-->APP;
      APP-->componentA;
      APP-->componentB;
```

Tapo:
```mermaid
  graph TD;
      APP-->componentA;
      APP-->componentB;
      componentB-->STATE;
      STATE-->componentA;
```

Context pajungimas. Provider - kad butu galima pasiekti `context`
- `const trackModal = useTrackModal();` konteksto sukūrimas
- `<trackModalContext. Provider value={trackModal}>` wrapas provideris

```tsx
import { createContext } from "react";
import { useTrackModal } from "../hooks/use-track-modal";

type TrackModalContext = ReturnType<typeof useTrackModal>;
export const trackModalContext = createContext<TrackModalContext | null>(null);

export function TrackModalProvider({
  children,
}: {
  children: React. ReactNode;
}) {
  const trackModal = useTrackModal();
  return (
    <trackModalContext.Provider value={trackModal}>
      {children}
    </trackModalContext.Provider>
  );
}
```

Context tipas
- `TrackModalContext | null>(null)` null reikia dėl default reikšmės

```tsx
import { createContext } from "react";
import { Track } from "../../App";

type TrackModalContext = {
  close: () => void;
  createClick: () => void;
  isOpenModal: boolean;
  selectedCell: number;
  selected Track: Track;
  trackClick: (track: Track) => void;
};
export const trackModalContext = createContext<TrackModalContext | null>(null);
```

`Context` panaudojimas

```tsx
export default function App() {
  return (
    <TrackModalProvider>
      <AppContent />
    </TrackModalProvider>
  )
}
```

Vienas komponentas (hook - modal valdymas)

- `const context = useContext(trackModalContext);` pasinaudojame `context`
- `if (!context) {` jeigu kontektsto nėra.  `throw new Error`. `Fail fast` metodas, esant klaidai, kuo greičiau išeiti. nereikia kiekviena karta tikrinti ar context yra. Grazinamass `null`

```tsx
import { useContext } from "react";
import {trackModalContext } from "../components/track-modal-context";

export function useTracksModalOpen() {
  const context = useContext(trackModalContext);
  if (!context) {
    throw new Error(
      "useTracksModalOpen must be used within a TrackModalProvider"
    );
  }
  return {
    createClick: context.createClick,|
    cellClick: context.cellClick,
    trackClick: context.trackClick,
  }
}
```

Kitas komponentas (visa logika)

```tsx
import { useContext } from "react";
import { useTrack Form } from "../hooks/use-track-form";
import {trackModalContext } from "./track-modal-context";

export function TrackModal() {
  const context = useContext(trackModalContext);
  if (!context) {
    throw new Error("useTracks Modal must be used within a TrackModalProvider");
  }

const {
  cellclick,
  close,
  createClick,
  isOpenModal,
  selectedCell,
  selectedTrack,
  trackClick,
  } context;
...
```

`local context`, nes iš išorės neturi prie jo prieigos

Privalumai:
- patikimumo padidinimas
- kodo aiškumo padidinimas
- smulkmenų užslėpimas padidina perpanaudojimą. Išorinis kodas neturi prieigos prie duomenų

Trūkumai
- nepatogus konteksto naudojimas
- nepatogus provider

Perpanaudojimo pavizdys

```tsx
export default function App() {
  return (
    <TrackModalProvider>
      <AppContent />
    </TrackModalProvider>
    <TrackModalProvider>
      <AppContent />
    </TrackModalProvider>
  )
}
```

Galima apjungti:
- kontekstas duoda didesni perpanaudojimas
- state manager patogumas

"local" global state

# Low level code

Kodas neišskaidytass pagal infrastruktura ir biznio logiką

Vietoje `UI-kit` tiesiogiai naudojamas lenteles (HTML) css (stiliai):

```tsx
return (
  <tr className={styles.summaryRow}>
    <td className={styles.summaryCell} >Total</td>
      {visibleDays.map((day) =>
        <TableSummaryCell
          key={day}
          day={day}
        />
      ))}
      <TableSummaryAllCell />
    </tr>
  );

```

Tiesiogiai naudojami stiliai `styles.cell, styles.sticky` :

```tsx
return <td className={classNames(styles.cell, styles.sticky)}>{month Total}h</td
```

Šalia komponentų failai su stiliais

Tiesiogiai naudojami `input`:

```tsx
<form onSubmit={handleSubmit}>
  <div className={styles.formGroup}> <label htmlFor="name">Name: </label>
    <input type="text"
      id="name"
      name="name"
      value={formData.name}
      onChange={handleInputChange}
      required
    />
  </div>
<div className={styles.formGroup}>
```

Arba pvz kaip pakeisti data ir kokios datos reikia.

Raiki atskirti biznio koda is infrastruktūra

```mermaid
  graph TD;
      Title[biznio kokas, biznio logika]-->Title2[infrastruktūra, techninis problemos];

```

Jeigu padauges biznio, infrastruktra liks tiek pat

```mermaid
  graph TD;
      Title[biznio kokas, biznio logika]-->Title2[infrastruktūra, techninės problėmos];
      Title3[biznio kokas, biznio logika]-->Title2[infrastruktūra, techninės problėmos];

```

## Minusai

- daug papildomo koda
- keičiant reikia pakeisti daugiau kodo
- "sunkumas" išmetytas po projektą

## Sprendimai

- bibliotekų naudojimas
- savos infrastruktūros parašymas. Insftrastruktos `pattern`'ai. Sudėtingas `Typescript`

Low level code

# Premature optimization

Išankstinė optimizacija

Pvz bandant optimizuoti perrenderinimą, kodas tampa ypač sudėtingas. `useMemmory` `useCallBack` `memo` ir pnš. Padarius klaida (įdėjus į `[]` parametrą kuris dažnai kinta) nesuveiks memorizacija. Jeigu bent vienas bus perduotas be memorizacijos, bus pilna renderinimu.

```tsx
export const TrackModal = memo(({
  isModalOpen,
  setIsModalOpen,
  selectedTrack,
  setSelectedTrack,
  formData,
  handleInputChange,
  handleSubmit,
  resetForm
}: TrackModalProps) => {

  const handleClose = useCallback(() => {
    setIsModalOpen(false);
    setSelectedTrack(null);
    resetForm();
  }, [setIsModalOpen, setSelectedTrack, resetForm]);

  const handleModalClick = useCallback((e: React.MouseEvent) => { e.stopPropagation();
}, []);
```

## Minusai

- padaugėja kodo. kiekvienas selektorius išsipučia
- sudėtingėja kodo suprantamumas
- vaizdinės triukšmas

## Sprendimai

- naudoti `React.memo` `useCallback` `useMemo` tik ten kur neišvengiama
- naudoti efektyvesnias optimizavimo priemones

Premature optimization

# Props drilling

Per komponentą ir `hook` praeina daugybė `props`, kurie nereikalingi pačiam komponentui

```
const App = () => {
  const {
    selectedMonth,
    setSelectedMonth,
    selectedYear,
    setSelectedYear,
    hideWeekends,
    setHideWeekends,
    tableContainerRef,
    currentDayRef,
    getVisibleDays,
    getWeekday, months,
} = useCalendar();

const {
  getUniqueTasks, getDayTotal, getDayTracks,
  getMonthTotal,
  getTaskTotal,
  handleDeleteTrack,
  submitTrack
} = useTracks (selectedMonth, selectedYear);
```

Ir paskui jie perduodami kitam komponentui.

[] > name > [] > name > [ name ]

## Minusai

- Kodas suprantamesnis
- Daug šabloninio kodo (import, props)
- Vis dar sunku suprasti kodą
- Suprasti kaip viskas veikia tapo dar sunkiau

Dekomponentizacija sąlogija daug meta informacijos/duomenų, aprašant interfeisus

```
interface TableProps {
  tableContainerRef: React.RefObject<HTMLDivElement>;
  currentDayRef: React. RefObject<HTMLTableCellElement>; getVisibleDays: () => number[];
  getWeekday: (day: number) => string;
  selectedMonth: number;
  selectedYear: number;
  getUniqueTasks: () => string[];
  getDayTracks: (day: number, task: string) => Track []; handleCellClick: (day: number, task; string) => void; handleUpdate Track: (track: Track) => void; handleDeleteTrack: (trackId: string) => void;
  getTaskTotal: (task: string) => number;
  getDayTotal: (day: number) => number;
  getMonthTotal: () => number;
```

Komponentu nePERpanaudojimas. Komponento nepanaudosi be vidiniu komponentų.

```
<div className={styles.tableContainer) ref={tablec...} >
  <table className={styles.table}>
    <TableHead
      getVisibleDays={getVisibleDays} getWeekday={getWeekday}
      currentDayRef={currentDayRef}
      selectedMonth={selectedMonth}
      selectedYear={selectedYear}
    />
    <tbody>
    {getUniqueTasks().map(task => (
      <TableRow
        key={task} task={task}
        getVisibleDays={getVisibleDays} getDayTracks={getDayTracks}
        handleCellClick={handleCellClick}
        handleUpdateTrack={handleUpdateTrack} handleDeleteTrack={handleDelete Track}
        getTaskTotal={getTaskTotal}
      />
    ))}
    <TableSummaryRow
```

## Sprendimas

- Redux panaudojimas. Tiesiai pasiimti gali iš redus nereikia perdavineti
- naudoti pattern `slot` ir `mediator`

Props drilling

# Render props

Analogiškai, kaip SLOT paternas, tik sudėtingesnis. Komponentai turi daug atsakomybės. Bet mes negalime panaudoti SLOT, nes vaikiniai komponentai priklausomi nuo `local state`. Mes galime naudoti `vaikinių komponentai per propsus` strategiją. Galime paimti ne React komponentą, bet STATE giją, kurie piešia vaikinius komponentus.

Buvo:
```mermaid
  graph TD;
      APP-->ComponentA;
      STATE-->ComponentA;
      ComponentA-->ComponentB;
```

Tapo:
```mermaid
  graph TD;
      APP-->ComponentA;
      STATE-->ComponentA;
      APP-->ComponentB;
```

`Render props` perduodami

## Pavyzdys

SLOT komponentai nesusieti, JSX perduodami per props. `TracksTable` ir `TracksDayHeadCell` nesusieti.

```tsx
<TracksTable
  tableContainerRef={tableContainerRef}
  days={getVisibleDays().map((day) => (
    <TracksDayHeadCell
      key={day}
      day={day}
      selectedMonth={selectedMonth}
      selectedYear={selectedYear}
      currentDayRef={currentDayRef}
      getweekday={getWeekday}
    />
))}
```

Modifikakuojame vaiką:

- dabar grąžina reactnode `days: (ref: React. RefObject<HTMLTableCellElement>) => React.ReactNode;` ir `children: React.ReactNode;`
- iškviečiame perduotą funkciją `{days(currentDayRef)}`

```tsx
export function TracksTable({
  days,
  children,
}:{
  days: (ref: React. RefObject<HTMLTableCellElement>) => React.ReactNode;
  children: React.ReactNode;
}) {
...
return (
  <div className={styles.tableContainer) ref={tableContainerRef}>
    <table className={styles table}>
      <thead>
        <tr>
          <th>Task</th>
          {days(currentDayRef)}
          <th>Total</th>
        </tr>
      </thead>
      <tbody>{children}</tbody>1,0x
    </table>
  </div>
```

Dabar `render props` - renderinimui perduodamas lokalus state/props

```tsx
<TracksTable
  days (currentDayRef) =>
    getVisibleDays().map((day) => (
      <TracksDayHeadCell
        key={day}
        day={day}
        selectedMonth={selectedMonth}
        selectedYear={selectedYear}
        currentDayRef={currentDayRef}
        getWeekday={getWeekday}
      />
    ))
  }
>
```

## Pavyzdys

```mermaid
  graph TD;
      OP(["Outside props"])-->FNC;
      IP(["Inside props"])-->FNC;
      FNC-->Component;
```

- render props `renderTask={(task) => (`
- render props `getDayTracks(day, task)`

```tsx
renderTask={(task) => (
  <TracksTaskRow
    getTaskTotal={getTaskTotal}
    task={task}
    days={getVisibleDays().map((day) => (
      <TracksCell
        day={day}
        task={task}
        getDayTracks={getDayTracks}
        handleCellClick={handleCellClick}
        tracks={getDayTracks(day, task).map((track) =>
          <TableTrack
            key={track.id}
            track={track}
            actions={
              <TracksActions
                track={track}
                handleUpdateTrack={handleUpdateTrack}
                handleDeleteTrack={handleDeleteTrack}
              />
          ))}
/> ))}
```

# Pliusai

- Tas pats, kas su SLOT
- Leidzia `inkapsuliuoti` STATE

# Minusai

- Sunku suprasti kodą
- Sunku `junior` programuotojams

# Svarbu

- naudoti atsargiai, kartais lengviau pakeisti į `local` global state

Render props

# Slot

Decomposition patterns (sprendžia kaip suskaldyti koda, kad nebūtų problemų). Padeda spręsti problemas tokias kaip `god component` - dideli komponentaim neaiškus kodas. Taip pat ir `props drilling` - kai komponentas perduoda per save per daug propsų. Taip pat ir `global state folder`.

Problema - labai dideli komponentai ir hook'ai, komponentas turi labai daug atsakomybės. Padeda spręsti su `React child`. 

```mermaid
  graph TD;
      ComponentA-->ComponentB;
      ComponentA-->ComponentC;
      ComponentA-->ComponentD;
      ComponentB-->ComponentE;
      ComponentD-->ComponentF;
      ComponentD-->ComponentG;
      ComponentD-->ComponentH;
      ComponentF-->ComponentI;
      ComponentF-->ComponentJ;
      ComponentF-->ComponentK;
```

`ComponentD` - pats daro kažka vieno ir deliguoja kažkai vaikams (t.y. perduoda vaikiniams komponentams).

Mes galime deliguoti renderiniti kažkokią dalį teviniams komponentui, ir gauti dali renderinimo per propsus.

Buvo:
```mermaid
  graph TD;
      APP-->ComponentA;
      ComponentA-->ComponentB;
```

Tapo:
```mermaid
  graph TD;
      APP-->ComponentA;
      APP-->ComponentB;
```

Tai yra SLOT esmė: komponentas `A` ir komponentas `B` nieko nežino vienas apie kitą.

## Pavizdys

Situacija tokia: komponentai yra `medyje` vienas itarptas i kita ir t.t. Viskas pewrduodama propsais.
Table atsako ne vien uz table ir t.t. Turi savyje logikos. 

```tsx
<div className={styles.tableContainer) ref={tableContainerRef}>
  <table className={styles.table}>
    <thead> 
      <tr>
        <th>Task</th>
        {getVisibleDays().map(day => {
          const isCurrentDay =
            new Date().getDate() === day &&
            new Date().getMonth() === selectedMonth &&
            new Date().getFullYear() === selectedYear;
          return (
            <th
              key={day}
              ref={isCurrentDay? currentDayRef : null}
              className={isCurrentDay? styles.currentDay: undefined}
            >
              <div className={styles.dayHeader}>
              <span>{day}</span>
              <span className={styles.weekday}>{getWeekday (day)}</span> </div>

```

Sukursime kiekvienam dalykui komponentas ir perduodime per propsus. Pradedame tuo vaikinio mažiausio ir taip vis aukstyn.

Iškerpam btn
```tsx
<div>
 <button
    className={styles.actionButton}
    onClick={(e) => handleUpdate Track (e, track)}
    title="Edit">
  </button>
  <button
    className={${styles.actionButton} ${styles.deleteButton}`}
    onClick={(e) => handleDeleteTrack (e, track.id)}
    title="Delete"
  >
  </button>
</div>
```
Paprastas komponentas:
```tsx
import styles from "./tracks-actions.module.css";

export function TracksActions({}: {
  handleUpdateTrack: (e: React.MouseEvent, track: Track) => void;
  handleDeleteTrack: (e: React.MouseEvent, trackId: string) => void;
}) {
  return (
    <>
      <button
        className={styles.actionButton}
        onClick={(e) => handleUpdate Track (e, track)}
        title="Edit">
      </button>
      <button
        className={${styles.actionButton} ${styles.deleteButton}`}
        onClick={(e) => handleDeleteTrack (e, track.id)}
        title="Delete"
      >
      </button>
    </>
  )
}
```
įdėsime jį į vidų kitam:
```tsx
</div>
<div className={styles.trackActions}>
  <TracksActions
    track={track}
    handleUpdateTrack={handleUpdateTrack}
    handleDeleteTrack={handleDeleteTrack}
  >
</div>
</div>
```

Analogiškai

- `actions,` - perduomamas action renderinimas

```tsx
export function TracksCell({
  actions,
  getDayTracks,
  day,
  task,
  handleCellClick,
}: {
  actions: JSX.Element;
  getDayTracks: (day: number, task: string) => Track []; day: number;
  task: string;
  handleCellClick: (day: number, task: string) => void;
  getDayTracks: (day: number, task: string) => Track[];
}){
  return (
    <td
      key={${day}-${task}`}
      className={styles.cell}
      onClick={() => handleCellClick (day, task)}
    >
      {(() => {
        const dayTracks = getDayTracks (day, task);
        if (dayTracks.length
```

Formuojam

```tsx
<tbody>
  {getUniqueTasks().map((task) => (
    <tr key={task}>
      <td>{task}</td>
      {getVisibleDays().map((day) => (
        <TracksCell
          day={day}
          task={task}
          getDayTracks={getDayTracks}
          handleCellClick={handleCellClick}
          actions={
            <TracksActions
              track={track}
              handleUpdateTrack={handleUpdateTrack}
              handleDelete Track={handleDeleteTrack}
              />
          }
        </TracksCell>
))}
```
Parduodame per propsus jau surenderintus, bet nereikia jiems peruodti viau paramsus i tevini elementa.

T.y. SLOT'as 

```tsx
 actions={
            <TracksActions
              track={track}
              handleUpdateTrack={handleUpdateTrack}
              handleDelete Track={handleDeleteTrack}
              />
          }
```

Dar vienas pavizdys:

```tsx
import styles from "./tracks-table.module.css";

export function TracksTable({
  tableContainerRef,
  days,
  children,
}: {
  tableContainerRef: React. RefObject<HTMLDivElement>;
  days: React.ReactNode;
  children: React.ReactNode;
}) {

  return (
    <div className={styles.tableContainer) ref={tableContainerRef}>
      <table className={styles.table}>
        <thead>
          <tr>
            <th>Task</th>
            {days}
            <th>Total</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>
  );
}
```


Tėvinis:

- `TracksTable` paramse  `days` generuojama jsx
- kaip child props perduodmas kitas jsx `{getUniqueTasks().map((task).. `

```tsx
<TracksTable
  tableContainerRef={tableContainerRef}
  days={getVisibleDays().map((day) => (
    <TracksDayHeadCell
      key={day} day={day}
      selectedMonth={selectedMonth}
      selectedYear={selectedYear}
      currentDayRef={currentDayRef}
      getWeekday={getWeekday}
    />
))}
>
  {getUniqueTasks().map((task) => (
    <TracksTaskRow
      getTaskTotal={getTaskTotal}
      task={task}
      days={getVisibleDays().map((day)
        <TracksCell
          day={day}
          task={task}
          getDayTracks={getDayTracks} handleCellClick={handleCellClick}
```

## Pliusai

- Gauname, kad komponentai vieni nuo kitų nepriklauso. Jeigu reikės dažnai keisti vieną komponentą, kitiems tai nebus aktualu.
- Kodas tampa žymiai lengviau perpanaidojamas
- `Props drilling` nėra
- DIP (Dependency Inversion Principle)
- lift state down, lift content up. Renderins rečiau. 
- nusukuria gloabal state problemos

## Minusai

- Blokuoja React.memo. Negalime naudoti, nes naudojant SLOT, kiekvienu renderinimu naujas komponentas
- Sunkokiai skaitomas kodas
- sunkiau suprasti visos programos veikimo logiką

## Svarbu

- Neskaldyti perstipriai. Yra galimybė sukurti "neteikiančius naudos" komponentus, t.y. komponentas kuyris nieko nedaro

Slot

# useEffect driven development

Dažnas useEffect naudojimas logikoje. 

```tsx
useEffect(() => {
  if (selectedCell){
  setFormData (prev => ({
  ...prev,
  task: selectedCell.task,
  date: ${selectedYear}-${String(sel
  }));
}
else { setFormData({
name:
task:
hours: 0,
date: new Date().toISOString().spli
});
}, [selectedCell, selectedMonth, selected

```

Jei useEffect viduje turi setState - yra blogai. Turi būti tik vienas informacijos šaltinis.

## Minusai

- sudėtingumas dėl SSOT (single source of truth) pažeidimo
- DAUG bereikalingų rerrenderinimo
- GOTO stiliaus logika
- priklausomybe su "gyvenimo ciklų" ReactJS

## Sprendimai

- naudoti State manager
- cache, source of truth segregation
- react galime rašyti be useEffect

useEffect driven development

The last prop will overwrite the first prop

```
const props = {className: "secondClass"}
<div className="firstClass" {...props} className="thirdClass"/>
```

The child prop in the tag will overwrite the prop passed in props.

```
const props = {children: "firstText"}
<div {...props}>secondText</div>

Output: <div>secondText</div>
```

props

https://www.example.com/search?query=cat+dog
```tsx
const params = new URL SearchParams (window.location.search)
const initialQuery = params.get('query') ?? ''
```

queryParams

Galime 'nuresetinti' (pašalinti ir vėl pridėti) componenta, pakeisdamas jo key

Pasikeitus `key`, reactjs parašils ir sukurs nauja elementą.

```
import { useState } from 'react'
import { createRoot } from 'react-dom/client'
function App() {
  const [key, setKey] = useState(0)
  return (
    <div>
      <input key={key}
      <button onClick={() => setKey(key => key + 1)}>Reset</button>
    </div>
}

const rootEl = document.createElement('div')
document.body.append(rootEl)
createRoot(rootEl).render(<App />)
```

resetKey

# Side-Effects

ReactJs have a lot iontegrations:

* Browser APIs like local storage, geolocation, media devices
* Integrations with third-party libraries like D3, Chart.js

Side-Effects yra kaip rezultatas iš integracijos, kuris keičia state

```tsx
useEffect (() => {
  // your side-effect code here.
  // this is where you can interact with browser APIs for example
  doSomeThing()

  return function cleanup() {
    // if you need to clean up after your side-effect (like unsubscribe from on
    // event), you can do it here
    doSomeCleanup()
  }
}, [
  // this is where dependencies of your useEffect callback go
  // we'll talk about this in depth in a future exercise.
  // In this exercise, we'll just leave it as an empty array
  dep1,
  dep2,
])
```

`doSomeThing()` - kodas kuris vykdomas efekto metu
`return function cleanup()` - unmount metu vykdomas kodas
`doSomeCleanup()` - valome event listener
`[dep1,dep2]` - callback vykdomas kei pasikeičia dependence

StrictMode useEffect vykdomas du kartus, kad butu galima pagauti bugą

Dar momentas, jeigu `doSomeThing()` vykdymo metu pakeis `[dep1,dep2]` priklausomybę. Pateksime į infinite loop. Jeigu perduodime aunc funkcija kai priklausomybe, galime patekti į infinite loop

# Hook Flow

![alt text](./hook-flow.png)

`Run lazy initializers` - stadija `useState`

## Render (mount)

Renderinimo metu:

1 - `render` fazė kūriamas DOM

2 - `React updates DOM` - atnaujinamas DOM

3 - `Browser paints screen` - baigimas piešimas

Nuo 1 iki 3 - laikas kai pamatome vizualų vaizdą

## Update

1 - `React updates DOM` - piešiami atnaujinimai

2 - `Cleanup LayoutEffects`

3 - `Run LayoutEffects`

4 - `Browser paint screen`


1 - 4 laiko tarpas tarp updeito ir kai pamatome pakeitimą. 


## Run effect

`Run effects` - paleidžia useEffects

`Render` - loaderiui užkrauti

## Unmount

1 - `Cleanup LayoutEffects`

2 - `Cleanup Effect` - išvalome. Pvz web socket

## Kiti

`useEffect` ir funkcijos `doSomeTing` šalia vienas kito, kad nebutu linku kurie gali pasikeitsi ir `doSomeThing` ves į nebeagzistuojantį linką. 

# Pvz fix loading (back mygtukas naršyklėj

Tikslas jeugu klientas paspaudžia back arba nect - pagauti ir atnaujinti query. Kadangi nėra dependence `[]` paleis pirmą kartą.

```tsx

function getQueryParam() {
  const params = new URL SearchParams (window.location.search) return params.get('query') ?? '|'
}

function App() {
  const [query, setQuery] = useState(getQueryParam)
  const words = query.split(' ')

  const dogChecked = words.includes('dog)
  const catChecked = words.includes('cat')
  const caterpillarChecked = words.includes('Caterpillar')

  useEffect (() => {
    window.addEventListener('popstate', () => setQuery (getQueryParam)
  }, [])

  function handleCheck (tag: string, checked: boolean) {
```

Side-Effects

**Recomending for (in props) children use `React.ReactNode` type**

```
type MessageType = {children: React.ReactNode}
```

**If is error, you can tell ts, that is normal situation**

```
//@ts-expect-error
```

**Only specified symbols**

```
operator: '+', '-', '*', '/'
```

**Get auto types from object**

```
const user = {name: 'Name', isActive: true}
type User = typeof user
// type User = {name: string, isActive: boolean}
```

**Get only keys**

```
type UserKeys = keyof user
// type UserKeys = "name" | "isActive"

operators: keyof typeof operators
similar
type kazkas = tyopeof operators
type kazkas1 = keyof kazkas
```

**Object of similar items**

```
type OperationFn = (left: number, right: number) => number

const operations: Record<string, OperationFn> = {
'+': (left, right) => left + right,
'-': (left, right) => left - right,
}
```

Jeigu norim apriboti (kad tik šitie butu)

```
const operations = {
'+': (left, right) => left + right,
'-': (left, right) => left - right,
} satisfies Record<string, OperationFn> 
```

**Native html element props**

```
function MySpan(props: React.ComponentProps<'span'>) {
 return <span {...props}/>
}
```

Jeigo norime praplėsti savais

```
function MySpan(props: React.ComponentProps<'span'> & {size?: 'small' | 'medium'}) {
 return <span {...props}/>
}
```

typescript

# useEffect

```tsx
useEffect(
  () => {
    // set up stuff
    return function cleanup() {
      // clean up stuff
    }
  },
  // depend on stuff:
  [],
)
```


## Su dependsais

`useEffect(() => {}, [])` naudojama kai reikia bendrautu su kažkuo, kas yra už react'o. Document TITLE, windows object, spacebar

1 - param callback fnc
2 - how often want tu run callback fnc

`[]` - only one time, when first rendering

`useEffect(() => {})` - every rendering

Example

```
useEffect(() => {
  document.title = `You clicked ${number} times`;

  return () => {
    document.title = `Done`;
  }
}, [number])
```

`useEffect(() => {}, [number])` - first render and when numberic was changed

`return () => {}` - paleis kada unmountins komponentą. `Clean UP function`


```tsx
 useEffect (() => {
    const { current: tilt Node } = tiltRef
    if (!tiltNode) return
    VanillaTilt.init(tiltNode, vanillaTiltOptions)
    return () => tiltNode.vanillaTilt?.destroy()
},
[vanillaTiltOptions, tiltRef]))
```

`React Hook useEffect has an unnecessary dependency:
tiltRef.current'. Either exclude it or remove the dependency array. Mutable values like 'tiltRef.current' aren't valid dependencies because mutating them doesn't re-render the component. eslint (react-hooks/exhaustive-deps)`

Esmė - mutacija be renderinimo

## Kai labai daug dependence

```tsx
useEffect(() => {
  const { current: tiltNode } = tiltRef
  if (!tiltNode) return
  const vanillaTiltOptions = {
    max,
    speed,
    glare,
    'max-glare': maxGlare,
  }
  VanillaTilt.init(tiltNode, vanillaTiltOptions)
  return () => tiltNode.vanillaTilt?.destroy()
  }, [glare, max, maxGlare, speed])
```
jeigu lb dauramsu reiia onbejta neufoti arba json stringify

## Primitive Dependencies

```tsx
const options1 = { glare: true, max: 25, 'max-glare': 0.5, speed: 400 } 
const options2 = { glare: true, max: 25, 'max-glare': 0.5, speed: 400 } 
Object.is(options1, options2) // false!!

const options1 = { glare: true, max: 25, 'max-glare': 0.5, speed: 400 } 
const options2 = options1 
Object.is(options1, options2) // true
```

useEffect

# useId - UniqueID

Kai reikia unikalaus ir jis nesvarbus.

Pvz: spaudzant ant label, suveiks fokusas. Negalima naudoti static, nes inputai gali kartotis

```tsx
function FormField() {
  const id = useId()
  return (
    <div>
      <label htmlFor={id}>Name: </label> 
      <input id={id} type="text" />
    </div>
  )
}
```

`id=":r0:"` - sugeneruos tokiu formatu

Jeigu reikia taisikles id generavimo

```tsx
createRoot(rootEl, {identifierPrefix: 'tilt-root'}).render(<App />)
```

```
createRoot (container: Container, options?: RootOptions | undefined): Root
createRoot lets you create a root to display React components inside a browser DOM node.
- API Reference for createRoot @see-
```

`id=":tilt-rootr0:"` - sugeneruos tokiu formatu

## Input id pavizdys

- `<input {... inputProps} id={id} />` - jeigu id nenurodytas naudos sugeneruota

```tsx
function Field({
  label,
  ... inputProps
}: {
  label: string
} & React.Component Props<'input'>) {
  const id = useId()
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input {... inputProps} id={id} />
    </div>
  )
}
```

Kitoks pvz

```tsx
function Field({
  label,
  id
  ... inputProps
}: {
  label: string
} & React.Component Props<'input'>) {
  const generatedId = useId()
  id ??= generatedId
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input {... inputProps} id={id} />
    </div>
  )
}
```

useId - UniqueID

# useReducer

Dažniausiai yra naudojamas `useState`. `useReducer` naudojamas, kai state labai sudetingas, pvz `objektas`.

Parametrai reducer fnc:
- Pirmas parametras `previousName`, senas (esamas) steitas
- Antras parametras `newName`, nauja reiksmė

```tsx
function nameReducer (previousName: string, newName: string) {
  return newName
}

const initialNameValue = 'Joe'

function Name Input() {
  const [name, setName] = useReducer(nameReducer, initialNameValue)
  const handleChange = event => setName(event.currentTarget.value)

  return (
    <div>
      <label>
        Name: <input defaultValue={name} onChange = {handleChange} />
      </label>
      <div>You typed: {name}</div>
    </div>
  }
}
```

Parametrai useReducer: 
- pirmas parametras funcija darbui su duomenimis
- antras init duomenys

```tsx
import { useReducer, useState } from 'react'
import * as ReactDOM from 'react-dom/client'

const countReducer = (count: number, change: number) => count + change

function Counter({ initialCount = 0, step = 1 }) {
  const [count, changeCount] = useReducer(countReducer, initialCount)

  const increment = () => changeCount (step)
  const decrement = () => changeCount(-step)

  return (
    <div className="counter">
      <output>{count}</output>
      <div>
        <button onClick={decrement}></button> <button onClick={increment}></button>         </div>
    </div>
  )
}
```

## State object

```tsx
const [state, setState] = useReducer (countReducer, {
  count: initialCount,
})
const { count } = state
const increment = () => setState({ count: count + step })
const decrement = () => setState({ count: count - step })
```

```tsx
const [state, setState] = useReducer (countReducer, {
  count: initialCount,
  someOtherState: 'hello',
})
const { count } = state 
const increment = () => setState({ count: count + step })
const decrement = () => setState({ count: count - step })
```

## Actions function

Kai `state` didesnis tokiu principu atnaujinant, prarasime dali objekto. Naujas `state` užrašis ant viršaus, o reikia `merdžint`

Toks principas neracionalus `someOtherState: state. someOtherState`, nes keiciantis objektui, reikes visada keisti ir čia.

```tsx
const {count} = state
const increment = () => setState({ count: count + step, someOtherState: state. someOtherState })
const decrement = () => setState( count: count
```

Paprastas sprendimas

```tsx
const {count} = state
const increment = () => setState({ ... state, count: count + step })
const decrement = () => setState({ ... state, count: count step })
```

Arba galima mergint reduceryje

```tsx
const countReducer = (state: State, action: Action) => ({...state, ...action})
```

Naudosim action functions


### Action Function

```tsx
const [state, setState] = useReducer (count Reducer, {
  count: initialCount,
})

const { count } = state

const increment = () =>
  setState(currentState => ({ count: currentState.count + step }))
const decrement = () =>
  setState(currentState => ({ count: currentState.count - step }))
```

Jeigu `state` priklauso nuo buvusio state, tai reikia naudoti funkcija

- `setState({ count: count + step })` - tokiu atveju pametamnas state (nes settime metu paimtas state ten ir bus naudojamas
- `setState(currentState => ({ count currentState.count - step }))` - čia ok, nes naudojamass prev state (bus naujas)

```tsx
type State = {count: number }

type Action = Partial<State> | ((state: State) => Partial<State>)

const count Reducer = (state: State, action: Action) => ({
  ...state,
  ...(typeof action === 'function' ? action (state): action),
})

function Counter({ initialCount = 0, step = 1 }) {
  const [state, setState] = use Reducer (count Reducer, {
    count: initialCount,
  })

  const {count } = state
  const increment = () => {
    setTimeout(() => {
      setState({ count: count + step })
    }, 500)
  }

  const decrement = () => {
    setTimeout(() => {
      setState(currentState => ({ count currentState.count - step }))
    }, 500)
  }
```

## Traditional Reducer

Action - reiklaingas `type` propertry ir nebutinas `payload`

```tsx
const [state, dispatch] = useReducer (count Reducer, {
  count: initialCount,
})
const { count } = state
const increment = () => dispatch({ type: 'INCREMENT', step })
const decrement = () => dispatch({ type: 'DECREMENT', step })
```

- `type Action = { type: 'increment'; step: number } | { type: 'decrement'; step: number }` action type aprašymas

```tsx
type State = { count: number }
type Action = { type: 'increment'; step: number } | { type: 'decrement'; step: number }
const count Reducer = (state: State, action: Action) => {
  const { type, step } = action
  switch (type) {
    case 'increment': {
      return {
        ..state,
        count: state.count + step,
      }
    }
    case 'decrement':
      return {
        ...state,
        count: state.count step,
      }
  }
```

## Dar vienas reducer

```tsx
type GameAction =
  { type: 'SELECT_SQUARE'; index: number }
  | { type: 'SELECT_STEP'; step: number }
  | { type: 'RESTART' }

function gameReducer (state: GameState, action: GameAction) { 
  // your code...
}
```

- skaitosi `lazy init` kai tokia realizacija props.initialCount, getInitialState,

```tsx
function getInitialState (initialCount: number) {
  return { count: initialCount }
}

function Counter() {
  const [count, dispatch] = useReducer(
    countReducer,
    props.initialCount,
    getInitialState,
  )
  // ...
}
```

Reducer pvz:

```tsx
function game StateReducer(state: GameState, action: GameAction) {
  switch (action.type) {
    case 'SELECT_SQUARE':{
      const {index} = action
      const current Squares = state.history[state.currentStep]
      const winner = calculateWinner(current Squares)

      if (winner || currentSquares [index]) return state

      const { currentStep, history } = state
      const newHistory = history.slice(0, currentStep + 1)
      const nextValue = calculateNextValue(current Squares)
      const squares = history[current Step].with(index, nextValue)
      return {
        history: [...newHistory, squares],
        currentStep: newHistory.length,
      }
    case 'RESTART': {
      return defaultState
    }
    case 'SELECT_STEP': {
      const { step } = action
      return {
        ... state,
        currentStep: step,
      }
    }
    default: {
      break
    }
```

useReducer

# useRef - DOM Side-Effects

Gaunasi, kai norime dibrti už ReactJs (išorėja)

```tsx
function MyDiv() {
  return (
    <div
      ref={myDiv => {
        console.log(`here's my div`, myDiv)
        return function cleanup() {
          console.log(`my div is getting removed from the page`, myDiv)
        }
      }}
    >  
      Hey, this is my div!
</div>
```

* `<div>`  - sukurs React elementą, bet ne DOM
* `ref={()=>{}}` - kai elementas bus nupieštas DOMe, React paleis šią funkciją. Kiekvieno renderinimo metu bus vykdoma šita funkcija.

```tsx
function MyDiv() {
  const myDivRef = useRef<HTMLDivElement>(null)
  useEffect (() => {
    const myDiv = myDivRef.current
    // myDiv is the div DOM node!
    console.log(myDiv)
  }, [])
  return <div ref={myDivRef}>hi</div>
}
```

* `useRef` - gražins value
* `myDivRef.current` - susietas su DOM modeliu

## Pavyzdys

* `interface HTMLVanillaTiltElement extends HTML DivElement` - extensina div interfeisą, nes reikia papildomo lauko

```tsx
import { useState } from 'react'
import { createRoot } from 'react-dom/client'

import VanillaTilt from 'vanilla-tilt'

interface HTMLVanillaTiltElement extends HTML DivElement {
  vanillaTilt?: VanillaTilt
}

const vanillaTiltOptions {
  max: 25,
  speed: 400,
  glare: true,
  'max-glare': 0.5,
}

function Tilt({ children } { children: React. ReactNode }) {
  return (
    <div
    className="tilt-root"
    ref={(tiltNode: HTMLVanillaTiltElement | null) => {
      console.log({ tiltNode })
      if (!tiltNode) return
      VanillaTilt.init(tiltNode, vanillaTiltOptions)
      return () => {
        console.log('cleanup')
        tiltNode.vanillaTilt?.destroy()
      }}
    >
      <div className="tilt-child">{children} </div>
    </div>
```

* `if (!tiltNode) return` - jeigi nėra tai graziname null
* `VanillaTilt` - elementas kuris gali Leakint memmory
* `tiltNode.vanillaTilt?.destroy()` cleaning

## useRef ir useEffect

- const tiltRef = useRef<HTMLVanillaTiltElement>(null) - init ref
- if (!tiltNode) return - out iš useEfect
- jeigu ref yra VanillaTilt.init(tiltNode, vanillaTiltOptions) init
- useEffect (() => {},[vanillaTiltOptions]) - pasiekitus paramsas per nauja init

```tsx
import { useState } from 'react'
import { createRoot } from 'react-dom/client'

import VanillaTilt from 'vanilla-tilt'

interface HTMLVanillaTiltElement extends HTML DivElement {
  vanillaTilt?: VanillaTilt
}

const tiltRef = useRef<HTMLVanillaTiltElement>(null)

const vanillaTiltOptions {
  max: 25,
  speed: 400,
  glare: true,
  'max-glare': 0.5,
}

function Tilt({ children } { children: React. ReactNode }) {
  useEffect (() => {
    const { current: tiltNode } = tiltRef
    if (!tiltNode) return
    VanillaTilt.init(tiltNode, vanillaTiltOptions)
    return () => tiltNode.vanillaTilt?.destroy()
}, [vanillaTiltOptions])

  return (
    <div
    className="tilt-root"
    ref={tiltRef}
    >
      <div className="tilt-child">{children} </div>
    </div>
```

Be depence kiekvien renderinimą 

```tsx
 useEffect (() => {
    const { current: tilt Node } = tiltRef
    if (!tiltNode) return
    VanillaTilt.init(tiltNode, vanillaTiltOptions)
    return () => tiltNode.vanillaTilt?.destroy()
})

```

`tiltRef` nereikie dependenco nes jis niekada nepasikeis

```tsx
 useEffect (() => {
    const { current: tilt Node } = tiltRef
    if (!tiltNode) return
    VanillaTilt.init(tiltNode, vanillaTiltOptions)
    return () => tiltNode.vanillaTilt?.destroy()
},
[vanillaTiltOptions, tiltRef]))
```

`React Hook useEffect has an unnecessary dependency:
tiltRef.current'. Either exclude it or remove the dependency array. Mutable values like 'tiltRef.current' aren't valid dependencies because mutating them doesn't re-render the component. eslint (react-hooks/exhaustive-deps)`

Esmė - mutacija be renderinimo

## Kai labai daug dependence

```tsx
useEffect(() => {
  const { current: tiltNode } = tiltRef
  if (!tiltNode) return
  const vanillaTiltOptions = {
    max,
    speed,
    glare,
    'max-glare': maxGlare,
  }
  VanillaTilt.init(tiltNode, vanillaTiltOptions)
  return () => tiltNode.vanillaTilt?.destroy()
  }, [glare, max, maxGlare, speed])
```
jeigu lb dauramsu reiia onbejta neufoti arba json stringify

useRef - DOM Side-Effects

# hook useState

useState hook sprendžia problema, dėl reactyvumo

- `useState(parametras)` parametras gali buti bet kas, objektas, funkcija ir t.t. Nurodomas default parametras.
- grąžina pirmu parametru `value` - reikšme
- grąžina antru parametru `setValue` mechanizmą pakeisti tai reikšmei

```
const [value, setValue] = useState(0)
```

Inputo kontrolė, naudojant onCahnge handler

```
onChange={event => {
  setValue(event.currentTarget.value)
}}

```

```tsx
const [count, setCount] = useState(0)

// then in a click event handler or something:
setCount (count + 1)

// but this is the exact same thing:
setCount (previousCount => previousCount + 1)
```

`setCount (previousCount => previousCount + 1)` - leidžia inkapsuliuoti ir leidžia išventi count pasikeitimo nelaiku

## Pavyzdys

Principai

State laikome taip

```
[
  'X', '0', 'X',
  'X', '0', '0',
  'X', 'X', '0'
]
```

```tsx
setCount(currentCount => {
  return currentCount + 1
})
```

```tsx
const newSquares = squares.with (index, 'X')
```

Realizacija

```
const defaultState = Array(9).fill(null)
...
const [squares, setSquares] = useState(defaultState)
...
setSquares(previousSquares => {
  const newSquares = previousSquares.with(index, nextValue)
  return newSquares
})
...
function restart() {
  setSquares(defaultState)
}
function renderSquare (i: number) {
  return (
    <button className="square" onClick={() => selectSquare(i)}>
      {squares[i]}
    </button>
  )
}
```

## Pavyzdys su localState

```tsx
const [squares, set Squares] = useState<Squares>(() => {
  const squares = localStorage.getItem(key)
  if (!squares) return defaultState
  try {
    return JSON.parse(squares)
  } catch {
    return defaultState
  }
})

useEffect (() => {
  localStorage.setItem(key, JSON.stringify(squares))
} [squares])
```

## State optimizavimo pvz

```tsx
const [count, setCount] = useState(0)
...
setCount(0) // <-- will not trigger a rerender if the state is still 0
```

```tsx
const [state, setState] useState({ count: 0 })
...
setState({ count: 0 }) // <-- will trigger a rerender
setState(previousState => ({
  count: previousState.count,
})) // <-- will trigger a rerender
setState(previousState => previousState) // <-- will not trigger a rerender
```

- `if (prevParams.toString() === searchParams.toString()) {` patikriname ar pasikeitė, kad išvengti renderinimo

```tsx
function setSearchParams(...args: Parameters<typeof setGlobalSearchParams>){
  console.log('setting search params')
  const searchParams = setGlobalSearchParams(...args)
  setSearchParamsState(prevParams => {  
    if (prevParams.toString() === searchParams.toString()) {
      return prevParams
    }
    return searchParams
  })
  return searchParams
}
```

hook useState

# Copy Mode

use vi keys in buffer
* :setw -g mode-keys vi

Enter copy mode
* ctrl+b [

Enter copy mode and scroll one page up
* ctrl+b PgUp

Quit mode
* q

Go to top line
* g

Go to bottom line
* G

Scroll up
* up

Scroll down
* down

Move cursor left
* h

Move cursor down
* j

Move cursor up
* k

Move cursor right
* l

Move cursor forward one word at a time
* w

Move cursor backward one word at a time
* b

Search forward
* /

Search backward
* ?

Next keyword occurance
* n

Previous keyword occurance
* N

Start selection
* spacebar

Clear selection
* esc

Copy selection
* enter

Paste contents of buffer_0
* ctrl+b ]

display buffer_0 contents
* :show-buffer

copy entire visible contents of pane to a buffer
* :capture-pane

Show all buffers
* :list-buffers

Show all buffers and paste selected
* :choose-buffer

Save buffer contents to buf.txt
* :save-buffer buf.txt

delete buffer_1
* delete-buffer -b 1

Copy Mode

# Misc

Enter command mode
* ctrl+b :

Set OPTION for all sessions
* :set -g OPTION

Set OPTION for all windows
* :setw -g OPTION

Enable mouse mode
* :set mouse on

# Help

List key bindings(shortcuts)
* tmux list-keys
* list-keys
* ctrl+b ?

Show every session, window, pane, etc...
* tmux info


# Enable mouse mode

Add this to your ```~/.tmux.conf```:

from v2.1 (**actual**)

```set -gq mouse on```

before v2.1

```
set -gq mode-mouse on
set -gq mouse-resize-pane on
set -gq mouse-select-pane on
set -gq mouse-select-window on
```

Restar tmux or ```source-file``` your new ```.tmux.conf```

Misc

# Panes

Toggle last active pane
* ctrl+b ;

Split the current pane with a vertical line to create a horizontal layout
* :split-window -h
* ctrl+b %

Split the current with a horizontal line to create a vertical layout
* :split-window -v
* ctrl+b "

Join two windows as panes (Merge window 2 to window 1 as panes)
* :join-pane -s 2 -t 1

Move pane from one window to another (Move pane 1 from window 2 to pane after 0 of window 1)
* :join-pane -s 2.1 -t 1.0

Move the current pane left
* ctrl+b {

Move the current pane right
* ctrl+b }

Switch to pane to the direction
* ctrl+b up
* ctrl+b down
* ctrl+b left
* ctrl+b right

Toggle synchronize-panes(send command to all panes)
* :setw synchronize-panes

Toggle between pane layouts
* ctrl+b spacebar

Switch to next pane
* ctrl+b o

Show pane numbers
* ctrl+b q

Switch/select pane by number
* ctrl+b 0 .. 9

Toggle pane zoom
* ctrl+b z

Convert pane into a window
* ctrl+b !

Resize current pane height(holding second key is optional)
* ctrl+b+up
* ctrl+b ctrl+up
* ctrl+b+down
* ctrl+b ctrl+down

Resize current pane width(holding second key is optional)
* ctrl+b+right
* ctrl+b ctrl+right
* ctrl+b+left
* ctrl+b ctrl+left

Close current pane
* ctrl+b x

Panes

# Sessions

Start a new session:
* tmux
* tmux new
* tmux new-session
* :new

Start a new session or attach to an existing session named mysession
* tmux new-session -A -s mysession

Start a new session with the name mysession
* tmux new -s mysession
* :new -s mysession

kill/delete the current session
* :kill-session

kill/delete session mysession
* tmux kill-ses -t mysession
* tmux kill-session -t mysession

kill/delete all sessions but the current
* tmux kill-session -a

kill/delete all sessions but mysession
* tmux kill-session -a -t mysession

Rename session
* ctrl+b $

Detach from session
* ctrl+b d

Detach others on the session (Maximize window by detach other clients)
* :attach -d

Show all sessions
* tmux ls
* tmux list-sessions
* ctrl+b s

Attach to last session
* tmux a
* tmux at
* tmux attach
* tmux attach-session

Attach to a session with the name mysession
* tmux a -t mysession
* tmux at -t mysession
* tmux attach -t mysession
tmux attach-session -t mysession

Session and Window Preview
ctrl+b w

Move to previous session
ctrl+b (

Move to next session
ctrl+b )

Sessions

# Windows

start a new session with the name mysession and window mywindow
* tmux new -s mysession -n mywindow

Create window
* ctrl+b c

Rename current window
* ctrl+b ,

Close current window
* ctrl+b &

List windows
* ctrl+b w

Previous window
* ctrl+b p

Next window
* ctrl+b n

Switch/select window by number
* ctrl+b 0..9

Toggle last active window
* ctrl+b l

Reorder window, swap window number 2(src) and 1(dst)
* :swap-window -s 2 -t 1

Move current window to the left by one position
* :swap-window -t -1

Move window from source to target
* :move-window -s src_ses:win -t target_ses:win
* :movew -s foo:0 -t bar:9
* :movew -s 0:0 -t 1:9

Reposition window in the current session
* :move-window -s src_session:src_window
* :movew -s 0:9

Renumber windows to remove gap in the sequence
* :move-window -r
* :movew -r

Windows

Klasės pavyzdys:

```
class Typescript {
 version: string
 constructor(version: string) {
  this.version = version
 }
 info(name: string) {
  return `[${name}]: Typescript version is ${this.version}`
 }
}

const ts = new Typescript('15')
console.log(ts.info('TS15'))
```

Standartinis: 

`readonly` - reikšme galima keisti tik per konstruktorių

```
class Car {
 readonly model: string
 readonly numberOfWheels: number = 4

 constructor(theModel: string) {
  this.model = theModel
 }
}
```
 
Trumpesnis analogiškas variantas:

```
class Car {
 readonly numberOfWheel : number = 4
 constructor(readonly model: string) {}
}
```

Klasė:

```
class Animal {
 protected voice: string = ''
 public color: string = 'black'
 constructor() {
  this.go()
 }

 private go() {
  console.log('Go')
 }
}
```

`private` - tiesiogiai keisti neleidžiama, bet leidžiama per modifikatorius (get, set), tik klasė kurioje aprašytas. vs codas neišmes pasiūlymo apie tokio kitnamojo egzistavimą

`public` - galima keisti tiesiogiai

`protected` - tik klasės ir vaiku klasės viduje (pakeisti tik per funkciją), protected gali buti funcijos

```
class Cat extends Animal {
 public setVoice(voice: string): void {
  this.voice = voice
 }
}


const cat = new Cat()
cat.setVoice('test')
console.log(cat.color)
```

Abstrakti klasė - nuo jų kiti paveldi (metodu ir parametrus) - nekompiluojami

```
abstract class Component {
 abstract render(): void
 abstract info(): string
}

class AppComponent extends Component {
 render(): void {
  console.log('Component on render')
 }

 info(): string {
  return 'This is info'
 }
}
```

Rezultatas:

```
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };

    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };

})();

var Component = /** @class */ (function () {
    function Component() {
    }

    return Component;

}());

var AppComponent = /** @class */ (function (_super) {
    __extends(AppComponent, _super);
    function AppComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }

    AppComponent.prototype.render = function () {
        console.log('Component on render');
    };

    AppComponent.prototype.info = function () {
        return 'This is info';
    };

    return AppComponent;

}(Component));
```

Jeigu nenorime butinai inicializuoti klasėje

```
class Point {
  x!: number;
  y!: number;
}
```

```
class Point {
  x: number
  y: number

  constructor(x: number, y: number){
    this.x = x
    this.y = y
  }

  a(name?: string){
  }
}

class D3Point extends Point (
  z: number
  constructor(x: number, y: number, z: number){
  super (x, y)
  this.z = z
  }
}

const point = new D3Point(1,1,1) - visi kint
```

```
class StaticTest = {
  static c = 'sdf'
}

const d = StaticTest.c
```

Abstrakčios klasės - neleidžia sukurti instance, bet leidžia extendinti

```
abstract class Test {
  myMethod() {
  }
}
```

`new Test()` -> negalima

``` 
class Testas extends Test {
}
```
 
`new Testas()` -> ok

Implementacija

```
interface C {
  test: () => void
}

class D implements C {
  test() {
}
}
```

tikrins ar klasės turi metoda

kai norima isitikinti kad klases turi tam tikra metoda (butina sekantiems veiksmam)

class

TS leidžia sukurti savo tipus, greičiau kaip alias. 

- geriau naudoti interface
- tinka kai reikai naudoti "string | number"
- literalai

```
type Login = string
const login: Login = 'admin'
```

```
type ID = string | number
const id1: ID = 123
const id2: ID = '1111'
```

```
type SomeType = string | null | undefined
type stringOrNumber = string | number
```

& leidžia papildyti jau esamą

```
type Point = {
  x: number,
  y: number
}

type 3DPoint = Point & {
  z: number
}
```

customType

duomenų tipai nurodomi prieš `=` po `:`

const isFetching: _boolean_ = true

const isFetching: _boolean_ = false


const int: _number_ = 42

const float: _number_ = 4.2

const num: _number_ = 3e10


const message: _string_ = 'TypeScript'

Masyvas iš numerių:

const numberArray: _number[]_ = [1, 1, 2, 3, 5, 8, 13]

Analogas. _Array_ - globali klasė, <...> - nurodo iš ko sudaryta. Tokia forma yra generic.

const numberArray2: _Array<number>_ = [1, 1, 2, 3, 5, 8, 13]

const words: _string[]_ = ['php', 'js']

Masyvas iš skirtingų tipas:

const contact: _[string, number]_ = ['price', 251]

let variable = 42

...

variable = 'string'

bus klaida, nes TS prisiminė, kad buvo number, o bandome priskirti string

todėl, galima nurodyti, kad bus bet koks

let variable: _any_ = 42

## Auto type

Jeigu nerodysime typo tai TS pats nustatys pagal priskirtą reikšmę

let b = 'tekstas' 

ts nustatys kad b yra string tipo

## Neprivalomas

const a : {lat: string, long?:string} = { lat:"1132132132"} 

? =  | undefined

nebūtinas / neprivalomas duomuo

## Safety

safety: 

```
function printIt(id: number | string) {
  if(typeof id === 'number'){
    console.log(id.toString())
  }
}
```

patikriname ar masyvas

```
function getSum(a: number | number[]){
  if(Array.isArray(a)){
  }
}
```

## Masyvas

Masyvas objektų 

```
 advantages: {
        title: string;
        description: string;
    }[];
```

dataTypes

`enum` - išvardinami galimi variantai

- default tures reikesmes index (Simple = 0, Standart = 1, Premium = 2)

```
enum Membership {
 Simple,
 Standard,
 Premium
}
```
 
```
const membership = Membership.Standard
console.log(membership)
const membershipReverse = Membership[2]
console.log(membershipReverse)
```
 
Jeigu nurodysime nuo kurio skaičiaus prasideda numeracija - toliau bus auto:

```
enum Membership {
 Simple = 1,
 Standard, //bus 2
 Premium // bus 3
}
```

```
enum SocialMedia {
 VK = 'VK',
 FACEBOOK = 'FACEBOOK',
 INSTAGRAM = 'INSTAGRAM'
}

const social = SocialMedia.INSTAGRAM
console.log(social)
```

giterogeniniai enum

```
enum Decision {
Yes = 1,
No = 'NO'
}
```

```
enum D {
a = calcEnum()
}

function calcEnum() {
return 2
}
```
 
skaiciuoti tik number

```
function runEnum(obj: {Up: string}){
}

runEnum(Direction)
```

```
enum Test {
A
}

let test = Test.A
let nameA = Test[test]
```

runtime enum tampa funcijomis

```
enum Direction {
Up = 'UP'
...
}
```

tampa

```
var Direction

function (Direction) {
Direction["Up"] = "UP"
.....
....
}
```

```
const enum ConstEnum {
A,B
}

let c = ConstEnum.A
 
```

konvertuojant bus var c = 0

```
enum Dice {
One = 1
Two
}

function ruDice(dice: Dice) {
switch(dice) {
case Dice.One:
return 'vienas'
....

default:
const a: never = dice
}
}
```

Typescript error This condition will always return 'true' since the types have no overlap
 
```
....
   let tcStatus = TCStatusType.init as TCStatusType
....

 if (tcStatus !== TCStatusType.error) {
```

enum

Prie funkcijos parametrų nurodome ko tikimės. void - funkcija negražins nieko

```
function doSomething(name: string): void{
 console.log(name)
}

doSomething('text')
```

- kuri gauną klaidą ir nebaigia
- kuri pastoviai dirba ir nebaigia

```
function throwError(message: string): never{
 for (let i = 0; i < 10; i++){
  if(i === 5) {
   throw new Error(message)
  }
 }
}
```

kaip ir nebaigė, bet bus klaida.

klaida, never negali pasiekti pabaigos.

```
function throwError(message: string): never{
 for (let i = 0; i < 10; i++){
  if(i === 5) {
   throw new Error(message)
  }
 }
}
```

klaida:

```
function throwError(message: string): never{
 throw new Error(message)
}
```

amžinas:

```
function throwError(message: string): never{
 while(true){
 }
}
```

```
function add(a: number, b: number): number {
 return a + b
}
```

```
function toUpperCase(str: string): string {
 return str.trim().toUpperCase()
}
```

```
function multiple(a: string, b: number): string | number {
 return a + b
}
```

Interfeisus galima nurodyti iškviečiant funkciją

```
interface MyPosition {
 x: number | undefined
 y: number | undefined
}

interface MyPositionWithoutDefault extends MyPosition {
 default: string
}

function position(): MyPosition
function position(a: number): MyPositionWithoutDefault
function position(a: number, b: number): MyPosition

function position(a?: number, b?: number) {
 if (!a && !b) {
  return { x: undefined, y: undefined }
 }

 if (a && !b) {
  return {x: a, y: undefined, default: a.toString()}
 }

 return {x: a, y: b}
}

console.log('Empty: ', position())
console.log('One param: ', position(42))
console.log('Two params: ', position(10, 15))
```

```
const text = (a: number): number => {
  ....
}
```

function

```
const arrayOfNumbers: Array<number> = [1, 1, 2, 3, 5]
const arrayOfString: Array<string> = ['Hello', 'Labas']

//tipai nusistatys pagal turinį
function reverse<T>(array: T[]): T[] {
 return array.reverse()
}

reverse(arrayOfNumbers)
reverse(arrayOfString)
``` 

`reverse<number>('string')` -> bus klaida nes tipai skirtingi

leidzia nauoti funcijas arba objektus skirtingiems duomenu tipams

```
interface MyInterface {
  transform: <T, F> (a: T) => F
}
```

keli kintamieji keliu tipų

```
class Menu<T> {
value: T
}

const a = new Menu<number>()
```

`a.value` -> tik number

```
interface TimeStamp {
  stamp: number
}

fucntion logTimeStamp<T extends TimeStamp>(num: T): T{
  console.log(num.stamp)
  return num
}
```

generic

guards - padeda dirbti su tipais

``` 
function strip(x : string | number) {
 if (typeof x === 'number') {
  return x.toFixed(2)
 }

 return x.trim()
}


class MyResponse {
 header = 'response header'
 result = 'response result'
}

class MyError {
 header = 'error header'
 message = 'error message'
}

function handle(res: MyResponse | MyError) {
 if (res instanceof MyResponse) {
  return {
   info: res.header + res.result
  }
 } else {
  return {
   info: res.header + res.message
  }
 }
}
```

```
type AlertType = 'success' | 'danger' | 'warning'

function setAlertType(AlertType) {
 // ...
}

setAlertType('success')
setAlertType('danger')
setAlertType('warning')
```

guards

`Interfeisai` - aprašo, koks bus kuriamas objektas, kokie laukai ir pnš. Kuriant objektą išmes patarimus. Rodis, kad nevisi laukai užpildyti. Rodis ko reikia.

- gali extendint
- rekomenduojama visur naudoti interface

`readonly` - tik skaitymui

? - nebūtinas

```
interface Rect {
  readonly id: string
  color?: string
  size : {
    width: number
    height: number
  }
}
```

```
const rect1: Rect = {
 id: '1234',
 size: {
  width: 20,
  height: 30
 },
 color: '#ccc'
}
```

Neprivalomus parametrus galima nurodyti ir vėliau

```
const rect2: Rect = {
 id: '12345',
 size: {
  width: 10,
  height: 5
 }
}
```

rect2.color = 'black'

Jeigu masyvas arba objektas, tai galime keisti vidinius duomenis, bet pakeisti ne.

Galime ir taip:

`const rect3 = {} as Rect`

Arba old stylium

`const rect4 = <Rect>{}`

Praplečiame jau turimą interfeisą:

```
interface RectWithArea extends Rect {
 getArea: () => number
}

const rect5: RectWithArea = {
 id: '123',
 size: {
  width: 20,
  height: 20
 },

 getArea(): number {
  return this.size.width * this.size.height
 }

}
```

Sutarta interfeisus vadinti pradedant I - interface

``` 
interface IClock {
 time: Date
 setTime(date: Date): void
}
```

realizuojamas interfeisas.

klasė Clock turi implementuoti  IClock interfeisą.

```
class Clock implements IClock {
 time: Date = new Date()
 setTime(date: Date): void {
  this.time = date
 }
```

Jei bus objektas ir daug dinaminių raktų

``` 
interface Styles {
 border: string
}

const css = {
 border: '1px solid black',
 marginTop: '2px',
 borderRadius: '5px'
}
```

neefektyvu butu vardinti visus css.

sprendimas : 

```
interface Styles {
 [key: string]: string
}
```
 
```
const css: Styles = {
 border: '1px solid black',
 marginTop: '2px',
 borderRadius: '5px'
}
```

```
interface Test {
a: number
}

interface Test {
b: number
}
```
 
interface SuperTest extends Test { -> bus abu pasiekti ir a ir b

`point as IDCPoint;` - nors pointas yra IPoint, bet ID3Poit extendino IPoint todel galiam ir tiap prilyginti

```
const c = (point: IPoint) => {
const d: ID3Point = point as IDCPoint;
}
```

`constr myCanvas = document.GetElementById('canvas')`  ---> myCanvas HTMLElement

`constr myCanvas = document.GetElementById('canvas')`  as HTMLCanvasElement -> myCanvas HTMLCanvasElement

interface

https://www.typescriptlang.org/ - saitas

Tinka sunkioms ir didelėms programoms. 

TS naudojimas tik kuriant, nes 'kompiliuojant' jis bus paverstas į JS. 

Padeda surasti galimas klaidas kuriant. Palengvina sudėtingų programų kūrimą. Lengviau refaktorinti - susiorientuoti pagal tipus. Lengviau dirbti komandoje - visi rašo skirtingai kodą, bet pagal tipizaciją lengviau susigaudyti. 

TS paremtas modeliais. Tai dar vienas sluoksnis.

Sukūrė Microsift

Esmė tipizacija JS kalbos.

`*.ts` - tai TypeScript failo trumpinys

https://www.npmjs.com/package/typescript - ts npm

## Diegimas:

`npm install -g typescript`

įdiegt `tsc` - ts console

tsc - typescript compoler

## Komanda:

`tsc ts1.ts`

Sukompiliuos `ts` į `js`

Pvz: ts:

```
const str: string = "Hello"
console.log(str)
```
 
Rezultatas js:

```
var str = "Hello";
console.log(str);
```

Paleisti:

`node.js ts1.js`

Typescript konfigūracija

Sukurs tsconfig.json

`tsc --init `

paleidus 

`tsc `

naudodamas konfigą visus ts padaris js

parametras

`onImplicitAny` - deklaruojant funcija nereikalaus nurodyti funcijų perduotu duomenų tipų - t.y. bus nurodytas any

`strictPropertyInitialization` - tikrinti klases paramteru initializacija

intro

Tik nurodytas turinys

```
let c : 'test' = 'test
type action = 'up' | 'down'
type world = 'world'
type Greeting = `hello ${world}`
```

literall

```
interface Person {
 name: string
 age: number
}
```

paims key

```
type PersonKeys = keyof Person // 'name' | 'age'
```

Leistinos reikšmės tik keyl

```
et key: PersonKeys = 'name'
key = 'age'
```

Negalima reikšmė:

```
key = 'job'
```

```
type User = {
 _id: number
 name: string
 email: string
 createdAt: Date
}
```

Kas lieka:

```
type UserKeysNoMeta1 = Exclude<keyof User, '_id' | 'createdAt'> // kas lieka: 'name' | 'email'
```

Kas išvardinta

```
type UserKeysNoMeta2 = Pick<User, 'name' | 'email'> // tik 'name' | 'email'
```

``` 
let u1: UserKeysNoMeta1 = 'name'
```

klaida

```
ul = '_id'
```

operators

Naujas typas kito typo pagrindu

```
type Point = {x: number, y:number}
type P = keyof Point
```

Funkcijos grazinamo objecto typas iš funcijos

```
function MyF() {
  return {a:1}
}

type K = ReturnType<typeof MyF>
```

razultate:
`K tipas {a: number}`

jeigu strėlinė funkcija, tai nereikia konvertuoti funkcijos

```
function MyFType = () =>  {
  return {a:number}
}
type K = ReturnType<MyFType >
```

Jeigu norime gauti typa masyvo elemento

```
const MyArray = [
  {name: 'MyName', age: 30}
]

type Person = typeof MyArray[number]
type Age = typeof MyArray[number]['age']
```

```
type MessageOf<T> = T extends {message: unknown} ? T['message'] : never
```

tikriname ar T (generic) extendina nurodyta salyga, jeigu taip tai imame T['message'], jeigu ne - never

```
interface Email {
  message: string
}
 
interface Cat {
  sound: string
}

type EmailMessageContent = MessageOf<Email> -> string
type CatMessageContent = MessageOf<Cat> -> never
```

```
interface Test {
  [key: string]: number
}
```

kai neribotas kiekis elementu

```
type OptionFlags<Type> = {
  [Property in keyof Type]: boolean
}
``` 

naujas type ims elementų key iš Type ir tures boolean reikšmes

Publikuota dokumentacija

nextjs

nvim

reactjs

reactjs/patterns

tmux

typescript