@samitouri / QOS-React-1
Code Commits Issues Pulls Sessions CI/CD
main
main
js 143 lines 7.05 KB
Raw
1 import {useState} from 'react';
2 import {flushSync} from 'react-dom';
3 import './App.css';
4
5 const text = `
6 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
7 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
8 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
9 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
10 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
11 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
12 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
13 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
14 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
15 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
16 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
17 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
18 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
19 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
20 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
21 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
22 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
23 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
24 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
25 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
26 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
27 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
28 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
29 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
30 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
31 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
32 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
33 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
34 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
35 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
36 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
37 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
38 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
39 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
40 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
41 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
42 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
43 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
44 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
45 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
46 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
47 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
48 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
49 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
50 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
51 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
52 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
53 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
54 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
55 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
56 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
57 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
58 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
59 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
60 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
61 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
62 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
63 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
64 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
65 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
66 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
67 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
68 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
69 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
70 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
71 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
72 `;
73
74 const loremIpsum = text + text;
75
76 function TextSymbol({char, highlight}) {
77 const randomColor = highlight
78 ? `#${Math.floor(Math.random() * 16777215).toString(16)}`
79 : 'transparent';
80 return (
81 <span className="text-symbol" style={{backgroundColor: randomColor}}>
82 {char}
83 <div className="hovercard">
84 <p>Character: {char}</p>
85 <p>Color: {randomColor}</p>
86 </div>
87 </span>
88 );
89 }
90
91 function TextLine({sentence, highlight, lineNumber}) {
92 const randomColor = highlight
93 ? `#${Math.floor(Math.random() * 16777215).toString(16)}`
94 : 'transparent';
95 return (
96 <div style={{backgroundColor: randomColor}}>
97 <span className="line-number">{lineNumber}</span>
98 {sentence.split('').map((char, index) => (
99 <TextSymbol key={index} char={char} highlight={highlight} />
100 ))}
101 </div>
102 );
103 }
104
105 function App() {
106 const [highlight, setHighlight] = useState(false);
107
108 const toggleHighlight = () => {
109 console.time('toggleHighlight');
110 flushSync(() => {
111 setHighlight(!highlight);
112 });
113 console.timeEnd('toggleHighlight');
114 };
115
116 return (
117 <div className="App">
118 <header className="App-header">Owner Stacks Stress Test</header>
119 <div className="page">
120 <div className={`content ${highlight ? 'highlight' : ''}`}>
121 {loremIpsum
122 .trim()
123 .split('\n')
124 .map((sentence, index) => (
125 <TextLine
126 key={index}
127 sentence={sentence.trim()}
128 highlight={highlight}
129 lineNumber={index + 1}
130 />
131 ))}
132 </div>
133 <div className="sidebar">
134 <button onClick={toggleHighlight}>
135 {highlight ? 'Remove Highlight' : 'Highlight Content'}
136 </button>
137 </div>
138 </div>
139 </div>
140 );
141 }
142
143 export default App;