-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
190 additions
and
34 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| ## Studi-Kasus Element Lifecycle. | ||
|
|
||
| untuk menghindari `Element Drilling` maupun `Redux` yang menyampah/tidak tertata dengan rapi | ||
| maupun bentuk data yang acak, disarankan untuk menggunakan Emitter jika `client component` tersebut | ||
| terpisah oleh server component | ||
|
|
||
| - Workflow | ||
| - Contoh Kode | ||
| ___ | ||
| ### workflow | ||
|
|
||
|  | ||
|  | ||
| ___ | ||
| ### Contoh Kode | ||
|
|
||
| #### Page File | ||
| ```tsx | ||
| # app/feature/page.tsx | ||
|
|
||
| export default function Page(){ | ||
|
|
||
| return ( | ||
| <> | ||
| <SE_Header /> | ||
| <SE_List /> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| #### Server Files | ||
|
|
||
| jika kita melakukan render beberapa client element pada server element, | ||
| CE_ tersebut tidak akan dapat berkomunikasi melalui direct-line maupun props drilling tanpa | ||
| melakukan refresh maupun mengupdate cookie (*jika menggunakan cookie*) | ||
| rekomendasi fetch data ditaruh pada `CE_List`, akan dijelaskan pada bagian Client Files | ||
|
|
||
| ```tsx | ||
| # app/feature/$element/server.header.tsx | ||
|
|
||
| export function SE_Header(){ | ||
| return ( | ||
| <div> | ||
| <CE_SearchBar/> | ||
| <div> | ||
| <CE_SaveButton/> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ```tsx | ||
| # app/feature/$element/server.datalist.tsx | ||
|
|
||
| export function SE_List(){ | ||
|
|
||
| const data = await APIS_Data(); | ||
|
|
||
| return ( | ||
| <div> | ||
| {data?( | ||
| <CE_List data={data} /> | ||
| ):(<></>)} | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| #### Client Files | ||
|
|
||
| jadi cara untuk mengupdate data jika komponen search | ||
| mengirim data seperti dibawah ini. | ||
| ```sh | ||
| <CE_SearchBar/> ::<--update-->:: <CE_List/> | ||
| ``` | ||
| dengan menggunakan `useEffect` atau `useMemo`. contoh dibawah ini | ||
| pada file `client.header.search.tsx` melakukan emit/mengirim data | ||
| dan pada file `client.datalist.tsx` melakukan listen data. | ||
| ```tsx | ||
| # app/feature/$element/client.header.search.tsx | ||
|
|
||
| export function CE_SearchBar(){ | ||
| const [searchText, setSearchText] = useState(''); | ||
|
|
||
| const updateSearch = (search:string)=>{ | ||
| setSearchText(search); | ||
| GlobalEmitter.emit(E_Somethn.SEARCH, search); | ||
| } | ||
|
|
||
| return ( | ||
| <></> | ||
| ) | ||
| } | ||
|
|
||
| ``` | ||
| ```tsx | ||
| # app/feature/$element/client.datalist.tsx | ||
|
|
||
| export function CE_List(prop:{data:I_Lists[]}){ | ||
|
|
||
| const [searchText, setSearchText] = useState(''); | ||
| const [data, setData] = useState<I_Lists[]>(data); | ||
|
|
||
| useEffect(()=>{ | ||
| GlobalEmitter.addListener(E_Somethn.SEARCH, (text:string)=>{ | ||
| setSearchText(text) | ||
| }) | ||
| return ()=>{ | ||
| GlobalEmitter.removeAllListener(E_Somethn.SEARCH) | ||
| } | ||
| },[]) | ||
|
|
||
| useEffect(()=>{ | ||
| CFN_DataFetch({ | ||
| search:searchText, | ||
| whileDone:(data:I_Lists[])=>{ | ||
| setData(data) | ||
| }, | ||
| whileError:()=>{ | ||
| // do something | ||
| } | ||
| }) | ||
|
|
||
| return ()=>{} | ||
| },[searchText]) | ||
|
|
||
| return( | ||
| <></> | ||
| ) | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| ## Next Action Workflow | ||
|
|
||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| ## Next Action Workflow | ||
|
|
||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,8 @@ | ||
| ## Data Workflow | ||
|
|
||
| ## test ini judul folder | ||
| beberapa data workflow yang harus dipatuhi untuk | ||
| pemanfaatan penuh feature yang diberikan | ||
|
|
||
| ```html | ||
| <h1>hello<span></span></h1> | ||
| ``` | ||
|
|
||
| | Name | Age | | ||
| |------|-----| | ||
| | John | 20 | | ||
|
|
||
| ```tsx | ||
| const hello = () => { | ||
| const ok = "yaaa"; | ||
|
|
||
| return ( | ||
| <h1>hello<span></span></h1> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| hello `test` | ||
| - **Fetching Data (Server/Client)** : penting untuk memahami flow pemanggilan dan flow pengembalian data. | ||
| - **Submit/Req Data** : penting untuk memahami flow pengiriman data. | ||
| - **Element Lifecycle** : point paling krusial untuk manajemen data teratur. |