Initialising workspace...
workspace — VS Code
index.ts
api/client.ts
utils/format.ts
README.md
Search
Explorer
📁
src
📄
index.ts
📄
types.ts
📄
hooks.ts
📁
api
📄
client.ts
📄
endpoints.ts
📁
utils
📄
format.ts
📄
validators.ts
📄
package.json
📄
tsconfig.json
📄
README.md
1
// UserDashboard — main entry point
2
import
{
useState
,
useEffect
,
useCallback
}
from
'react'
;
3
import
{
fetchData
,
postData
}
from
'./api/client'
;
4
import
{
formatDate
,
formatCurrency
}
from
'./utils/format'
;
5
import type
{
UserProfile
,
ApiResponse
}
from
'./types'
;
6
7
const
BASE_URL
=
'https://api.example.com/v2'
;
8
const
TIMEOUT_MS
=
5000
;
9
10
interface
DashboardState
{
11
user
:
UserProfile
|
null
;
12
loading
:
boolean
;
13
error
:
string
|
null
;
14
lastUpdated
:
Date
|
null
;
15
}
16
17
export const
UserDashboard
= () => {
18
const
[
state
,
setState
] =
useState
<
DashboardState
>({
19
user
:
null
,
loading
:
true
,
error
:
null
,
lastUpdated
:
null
,
20
});
21
22
const
loadUser
=
useCallback
(
async
() => {
23
try
{
24
const
res
=
await
fetchData
(
`${BASE_URL}/profile`
);
25
setState
(
prev
=> ({ ...
prev
,
user
:
res
.
data
,
loading
:
false
}));
26
}
catch
(
err
) {
27
setState
(
prev
=> ({ ...
prev
,
loading
:
false
,
error
:
'Failed to load'
}));
28
}
29
}, []);
30
31
useEffect
(() => {
loadUser
(); }, [
loadUser
]);
32
33
return
<
Dashboard
user
={
state
.
user
} />;
34
};
35
36
export default
UserDashboard
;
⎇ main
TypeScript
UTF-8
Ln 34, Col 2
Spaces: 2
preview.ts
⧉
⊡
✕
1
// preview renderer
2
export const
render
= (
id
:
string
) => {
3
return
<
Preview
src
={
id
} />;
4
};
Keyboard Shortcuts
✕
Player
Load video
Search box
Enter
Open / reopen player
Ctrl
Shift
O
Hide / show video
Esc
Panic kill
Ctrl
Shift
X
Playback
Pause / Resume
Space
Mute
M
Volume up
↑
Volume down
↓
Seek forward 10s
→
Seek backward 10s
←
Security
Toggle master lock
Ctrl
Shift
L
1
export interface
UserProfile
{
2
id
:
number
;
3
name
:
string
;
4
email
:
string
;
5
role
:
'admin'
|
'user'
;
6
createdAt
:
Date
;
7
}
1
import
{
useState
,
useCallback
}
from
'react'
;
2
3
export function
useToggle
(
initialValue
:
boolean
) {
4
const
[
value
,
setValue
] =
useState
(
initialValue
);
5
const
toggle
=
useCallback
(() =>
setValue
(
prev
=> !
prev
), []);
6
return
[
value
,
toggle
];
7
}
1
export async function
fetchData
<
T
>(
path
:
string
) {
2
const
response
=
await
fetch
(
'https://api.example.com/v2'
+
path
);
3
if
(!
response
.
ok
)
throw new
Error
(
response
.
statusText
);
4
return
response
.
json
();
5
}
1
export function
formatDate
(
date
:
Date
|
null
) {
2
return
date
?
date
.
toLocaleDateString
() :
'—'
;
3
}
4
5
export function
formatCurrency
(
amount
:
number
) {
6
return
new
Intl
.
NumberFormat
(
'en-US'
, {
style
:
'currency'
,
currency
:
'USD'
}).
format
(
amount
);
7
}