Skip to content

Commit d1ef0ff

Browse files
fezcodefezcode
committed
refactor: stories
add dashboard
1 parent 0354ba8 commit d1ef0ff

68 files changed

Lines changed: 1447 additions & 759 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎public/posts/react-hooks-comparison.txt‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,45 @@ const handleClick = useCallback(() => {
7070
* `useCallback` caches the **function itself**.
7171

7272
> `useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`.
73+
74+
## Real World Example: Language Switching
75+
76+
A common question is: "Why use `useEffect` for fetching data when `useState` holds it?"
77+
78+
Let's say we have a Language Switcher (EN/TR).
79+
80+
### The Wrong Way (Trying to use useState for fetching)
81+
82+
```javascript
83+
// This won't work because fetch is async and returns a Promise, not the data immediately.
84+
const [books] = useState(fetch(`/stories/books_${language}.piml`));
85+
```
86+
87+
### The Right Way (useEffect + useState)
88+
89+
1. **State** holds the *result* (the parsed books).
90+
2. **Effect** handles the *process* (fetching when language changes).
91+
92+
```javascript
93+
const { language } = useContext(DndContext); // "en" or "tr"
94+
const [books, setBooks] = useState([]); // Holds the data
95+
96+
// Run this side effect whenever 'language' changes
97+
useEffect(() => {
98+
const fetchData = async () => {
99+
// 1. Fetch the file based on the dynamic language variable
100+
const response = await fetch(`/stories/books_${language}.piml`);
101+
102+
// 2. Parse the result
103+
const text = await response.text();
104+
const data = parsePiml(text);
105+
106+
// 3. Update state (triggers re-render)
107+
setBooks(data.books);
108+
};
109+
110+
fetchData();
111+
}, [language]); // <--- The dependency that triggers the re-fetch
112+
```
113+
114+
This pattern ensures that every time the user clicks "TR", the effect re-runs, fetches the Turkish content, updates the state, and the UI refreshes automatically.

‎public/rss.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
<link>https://fezcode.com</link>
1010
</image>
1111
<generator>RSS for Node</generator>
12-
<lastBuildDate>Sun, 11 Jan 2026 03:24:42 GMT</lastBuildDate>
12+
<lastBuildDate>Sun, 11 Jan 2026 16:25:52 GMT</lastBuildDate>
1313
<atom:link href="https://fezcode.com/rss.xml" rel="self" type="application/rss+xml"/>
14-
<pubDate>Sun, 11 Jan 2026 03:24:42 GMT</pubDate>
14+
<pubDate>Sun, 11 Jan 2026 16:25:52 GMT</pubDate>
1515
<copyright><![CDATA[2026 Ahmed Samil Bulbul]]></copyright>
1616
<language><![CDATA[en]]></language>
1717
<managingEditor><![CDATA[samil.bulbul@gmail.com (Ahmed Samil Bulbul)]]></managingEditor>

‎public/sidebar.piml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262
(id) isStatusOpen
6363
(label) System
6464
(content)
65+
> (item)
66+
(label) Dashboard
67+
(to) /dashboard
68+
(icon) TerminalWindowIcon
6569
> (item)
6670
(label) History
6771
(to) /timeline

0 commit comments

Comments
 (0)