Skip to content

Commit 35601bd

Browse files
RVassiliRVassili
committed
clean up
1 parent 2302e8c commit 35601bd

20 files changed

Lines changed: 210 additions & 689 deletions

‎src/commons/ActionButton.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
11
import React from "react";
2-
import { useLog } from "./ExampleBloc";
32

43
export interface IProps {
54
label: string;
65
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
76
}
87

98
const ActionButton = ({ label, onClick }: IProps) => {
10-
const log = useLog();
11-
12-
return (
13-
<button
14-
onClick={e => {
15-
log(`ActionButton > "${label}"`);
16-
onClick(e);
17-
}}
18-
>
19-
{label}
20-
</button>
21-
);
9+
return <button onClick={onClick}>{label}</button>;
2210
};
2311

2412
export default ActionButton;

‎src/commons/ExampleBloc/index.tsx‎

Lines changed: 51 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,15 @@ export const useLog = () => {
2222
const context = useContext(LoggerContext)!;
2323
useEffect(() => {
2424
const renderDate = Date.now();
25-
context.logs.current = context.logs.current.map(tLog => {
26-
return !tLog.elapsedTime ? {
27-
...tLog,
28-
elapsedTime: renderDate - tLog.fireDate
29-
} : tLog;
25+
context.logs.current = context.logs.current.map((tLog) => {
26+
return !tLog.elapsedTime
27+
? {
28+
...tLog,
29+
elapsedTime: renderDate - tLog.fireDate,
30+
}
31+
: tLog;
3032
});
31-
context.observers.current.forEach(observer => observer());
33+
context.observers.current.forEach((observer) => observer());
3234
});
3335

3436
return context.action;
@@ -39,11 +41,13 @@ const useLogObserver = () => {
3941

4042
useEffect(() => {
4143
const callback = () => {
42-
setTrigger(t => t + 1);
43-
}
44+
setTrigger((t) => t + 1);
45+
};
4446
context.observers.current.push(callback);
4547
return () => {
46-
context.observers.current = context.observers.current.filter(observer => observer !== callback);
48+
context.observers.current = context.observers.current.filter(
49+
(observer) => observer !== callback
50+
);
4751
};
4852
}, [context]);
4953
return context.logs.current;
@@ -62,7 +66,7 @@ const Code = ({ code }: { code?: string | null }) => {
6266
position: "absolute",
6367
top: 10,
6468
bottom: 10,
65-
width: "100%"
69+
width: "100%",
6670
}}
6771
language="typescript"
6872
style={highlightStyle}
@@ -80,31 +84,22 @@ const Logs = ({ clear }: { clear: () => void }) => {
8084
<div
8185
style={{
8286
color: "#EEEEEE",
87+
height: "100%",
88+
margin: "2em 0em",
89+
border: "1px #EEE solid",
8390
overflow: "auto",
84-
position: "absolute",
85-
top: 10,
86-
bottom: 10,
87-
width: "100%",
88-
borderLeft: "1px #EEE solid"
91+
position: "relative",
8992
}}
9093
>
91-
<div
92-
style={{ position: "absolute", top: 5, right: 5, cursor: "pointer" }}
93-
onClick={clear}
94-
>
94+
<div style={{ position: "absolute", top: 5, right: 5, cursor: "pointer" }} onClick={clear}>
9595
🗑
9696
</div>
9797
{logs
9898
.map((log, i) => (
99-
<div
100-
key={i}
101-
style={{ margin: 10, borderBottom: "1px #EEE solid" }}
102-
>
99+
<div key={i} style={{ margin: 10, borderBottom: "1px #EEE solid" }}>
103100
[<span style={{ fontWeight: "bold" }}>{i}</span>] (
104-
<span style={{ fontStyle: "italic" }}>
105-
+{log.elapsedTime || "..."}ms
106-
</span>
107-
) {log.message}
101+
<span style={{ fontStyle: "italic" }}>+{log.elapsedTime || "..."}ms</span>){" "}
102+
{log.message}
108103
<pre>{JSON.stringify(log.mixed, null, 2)}</pre>
109104
</div>
110105
))
@@ -116,31 +111,22 @@ const Logs = ({ clear }: { clear: () => void }) => {
116111
const ComponentAndText = ({
117112
preface,
118113
explanation,
119-
children
114+
children,
120115
}: {
121116
children: React.ReactNode;
122117
preface?: React.ReactNode;
123118
explanation?: React.ReactNode;
124119
}) => {
125120
return (
126-
<div
127-
style={{
128-
overflow: "auto",
129-
position: "absolute",
130-
top: 0,
131-
bottom: 0,
132-
left: 0,
133-
right: 0
134-
}}
135-
>
121+
<div>
136122
{preface && <Preface>{preface}</Preface>}
137123
<div
138124
style={{
139125
padding: 10,
140-
margin: 10,
126+
margin: "0px 0px 10px 0px",
141127
backgroundColor: "##000",
142128
color: "#FFF",
143-
border: "1px solid #FFF"
129+
border: "1px solid #FFF",
144130
}}
145131
>
146132
{children}
@@ -153,7 +139,7 @@ const ComponentAndText = ({
153139
const Col = ({
154140
percentage,
155141
margin,
156-
children
142+
children,
157143
}: {
158144
percentage: number;
159145
margin: number;
@@ -163,7 +149,7 @@ const Col = ({
163149
<div
164150
style={{
165151
flex: `0 0 ${percentage}%`,
166-
position: "relative"
152+
position: "relative",
167153
}}
168154
>
169155
<div
@@ -172,7 +158,7 @@ const Col = ({
172158
top: 0,
173159
bottom: 0,
174160
left: margin,
175-
right: margin
161+
right: margin,
176162
}}
177163
>
178164
{children}
@@ -192,16 +178,7 @@ interface IProps {
192178
explanation?: React.ReactNode;
193179
}
194180

195-
const ExampleBloc = ({
196-
id,
197-
Component,
198-
title,
199-
prev,
200-
next,
201-
code,
202-
preface,
203-
explanation
204-
}: IProps) => {
181+
const ExampleBloc = ({ id, Component, title, prev, next, code, preface, explanation }: IProps) => {
205182
const logStorage = useRef<Log[]>([]);
206183
const logObservers = useRef<(() => void)[]>([]);
207184

@@ -211,7 +188,7 @@ const ExampleBloc = ({
211188
message: message,
212189
fireDate: Date.now(),
213190
elapsedTime: null,
214-
mixed: cloneDeep(mixed)
191+
mixed: cloneDeep(mixed),
215192
};
216193
logStorage.current.push(newLog);
217194
};
@@ -228,7 +205,7 @@ const ExampleBloc = ({
228205
backgroundColor: "#282c34",
229206
textAlign: "left",
230207
fontFamily:
231-
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
208+
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
232209
}}
233210
>
234211
<h3
@@ -238,7 +215,7 @@ const ExampleBloc = ({
238215
padding: 10,
239216
borderBottom: "1px solid #61dafb",
240217
display: "flex",
241-
justifyContent: "space-between"
218+
justifyContent: "space-between",
242219
}}
243220
>
244221
<a style={{ color: "#61dafb", textDecoration: "none" }} href={`#${id}`}>
@@ -250,20 +227,17 @@ const ExampleBloc = ({
250227
style={{
251228
color: "#61dafb",
252229
textDecoration: "none",
253-
margin: "0 10px"
230+
margin: "0 10px",
254231
}}
255232
href={`#${prev}`}
256233
>
257234
⇐
258-
</a>
235+
</a>
259236
)}
260237
{next && (
261-
<a
262-
style={{ color: "#61dafb", textDecoration: "none" }}
263-
href={`#${next}`}
264-
>
238+
<a style={{ color: "#61dafb", textDecoration: "none" }} href={`#${next}`}>
265239
⇒
266-
</a>
240+
</a>
267241
)}
268242
</div>
269243
</h3>
@@ -276,24 +250,26 @@ const ExampleBloc = ({
276250
top: 50,
277251
bottom: 0,
278252
left: 0,
279-
right: 0
253+
right: 0,
280254
}}
281255
>
282-
<Col percentage={40} margin={30}>
256+
<Col percentage={50} margin={30}>
283257
<Code code={code} />
284258
</Col>
285259

286-
<Col percentage={40} margin={30}>
287-
<ComponentAndText preface={preface} explanation={explanation}>
288-
<Component />
289-
</ComponentAndText>
290-
</Col>
260+
<Col percentage={50} margin={30}>
261+
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
262+
<ComponentAndText preface={preface} explanation={explanation}>
263+
<Component />
264+
</ComponentAndText>
291265

292-
<Col percentage={20} margin={30}>
293-
<Logs clear={() => {
294-
logStorage.current = [];
295-
logObservers.current.forEach(observer => observer());
296-
}} />
266+
<Logs
267+
clear={() => {
268+
logStorage.current = [];
269+
logObservers.current.forEach((observer) => observer());
270+
}}
271+
/>
272+
</div>
297273
</Col>
298274
</div>
299275
</section>

‎src/commons/Preface.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ const Preface = ({ children }: { children: React.ReactNode }) => {
44
return (
55
<div
66
style={{
7-
padding: 10,
8-
color: "#EEEEEE"
7+
padding: "10px 0px",
8+
color: "#EEEEEE",
99
}}
1010
>
1111
{children}

‎src/examples/use-context-1/ExampleUseContext101.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,6 @@ const Consumer = () => {
1919
if (context)
2020
return (
2121
<ul>
22-
<li>
23-
<ActionButton
24-
label="Do nothing state-wise"
25-
onClick={() => {
26-
/* NOOP */
27-
}}
28-
/>
29-
</li>
3022
<li>
3123
<ActionButton
3224
label="Increment"

‎src/examples/use-effect-1/ExampleUseEffect101.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,6 @@ const ExampleUseEffect101 = () => {
1919
<>
2020
<pre>{JSON.stringify(state, null, 2)}</pre>
2121
<ul>
22-
<li>
23-
<ActionButton
24-
label="Do nothing state-wise"
25-
onClick={() => {
26-
/* NOOP */
27-
}}
28-
/>
29-
</li>
3022
<li>
3123
<ActionButton
3224
label="Increment"

0 commit comments

Comments
 (0)