8000 fix: build errors · jeffsieu/typescript-from-zero@aea5399 · GitHub
[go: up one dir, main page]
Skip to content

Commit aea5399

Browse files
jeffsieujeffsieu
committed
fix: build errors
1 parent 4b83137 commit aea5399

File tree

3 files changed

+63
-61
lines changed

3 files changed

+63
-61
lines changed

‎src/components/CodeEditor/CopyToClipboardButton.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useState, useRef } from "react";
2+
3+
type CopyToClipboardButtonProps = { value: string };
4+
5+
export default function CopyToClipboardButton({
6+
value,
7+
}: CopyToClipboardButtonProps) {
8+
const [clipboardTick, setClipboardTick] = useState(false);
9+
const clipboardTimeoutRef = useRef<NodeJS.Timeout | null>(null);
10+
11+
const handleCopyToClipboard = () => {
12+
navigator.clipboard.writeText(value);
13+
setClipboardTick(true);
14+
15+
if (clipboardTimeoutRef.current) {
16+
clearTimeout(clipboardTimeoutRef.current);
17+
}
18+
19+
clipboardTimeoutRef.current = setTimeout(() => {
20+
setClipboardTick(false);
21+
}, 1000);
22+
};
23+
24+
return (
25+
<button
26+
className="button button--secondary button--outline"
27+
onClick={handleCopyToClipboard}
28+
>
29+
{clipboardTick ? "✔ Copied" : "Copy"}
30+
</button>
31+
);
32+
}

‎src/components/CodeEditor/index.tsx

Lines changed: 15 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,32 @@ import { useEffect, useState, useRef } from "react";
55
import clsx from "clsx";
66
import TypeScriptSandboxEditor from "./TypeScriptSandboxEditor";
77
import styles from "./styles.module.css";
8-
9-
function useSavedCode(key: string, defaultValue: string) {
10-
const [code, setCode] = useLocalStorage(key, defaultValue);
11-
12-
return {
13-
code,
14-
setCode,
15-
};
16-
}
17-
18-
function useShouldSaveCode() {
19-
const [shouldAutosaveCode, setShouldAutosaveCode] = useLocalStorage(
20-
"shouldAutosaveCode",
21-
true
22-
);
23-
24-
return [shouldAutosaveCode, setShouldAutosaveCode] as const;
25-
}
8+
import BrowserOnly from "@docusaurus/BrowserOnly";
9+
import CopyToClipboardButton from "./CopyToClipboardButton";
2610

2711
type CodeEditorProps = {
2812
codeKey: string;
2913
defaultValue: string;
3014
solution: string;
3115
};
3216

33-
export default function CodeEditor({
17+
function BrowserCodeEditor({
3418
codeKey,
3519
defaultValue,
3620
solution,
3721
}: CodeEditorProps) {
3822
const monaco = useMonaco();
23+
const [shouldAutosaveCode, setShouldAutosaveCode] = useLocalStorage(
24+
"shouldAutosaveCode",
25+
true
26+
);
27+
const [code, setCode] = useLocalStorage(codeKey, defaultValue);
28+
3929
const [shouldShowDiff, setShouldShowDiff] = useState(false);
40-
const { code, setCode } = useSavedCode(codeKey, defaultValue);
4130
const [shouldShowSolution, setShouldShowSolution] = useState(false);
4231
const [value, setValue] = useState(code);
43-
const [shouldAutosaveCode, setShouldAutosaveCode] = useShouldSaveCode();
44-
const { colorMode } = useColorMode();
45-
const [clipboardTick, setClipboardTick] = useState(false);
46-
const clipboardTimeoutRef = useRef<NodeJS.Timeout | null>(null);
4732

33+
const { colorMode } = useColorMode();
4834
const theme = colorMode === "dark" ? "vs-dark" : "light";
4935

5036
const handleCodeChange = (newValue: string | undefined) => {
@@ -54,26 +40,12 @@ export default function CodeEditor({
5440
setValue(newValue || "");
5541
};
5642

57-
const handleCopyToClipboard = () => {
58-
navigator.clipboard.writeText(value);
59-
setClipboardTick(true);
60-
61-
if (clipboardTimeoutRef.current) {
62-
clearTimeout(clipboardTimeoutRef.current);
63-
}
64-
65-
clipboardTimeoutRef.current = setTimeout(() => {
66-
setClipboardTick(false);
67-
}, 1000);
68-
};
69-
7043
useEffect(() => {
7144
if (shouldShowSolution) {
7245
return;
7346
}
7447

7548
if (shouldAutosaveCode) {
76-
console.log("Autosaving code...", value);
7749
setCode(value);
7850
}
7951
}, [value, shouldAutosaveCode, setCode, shouldShowSolution]);
@@ -83,9 +55,6 @@ export default function CodeEditor({
8355
return;
8456
}
8557

86-
// Show inlay hints
87-
// monaco.languages.registerInlayHintsProvider("typescript", )
88-
8958
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
9059
noSemanticValidation: false,
9160
noSyntaxValidation: false,
@@ -123,12 +92,7 @@ export default function CodeEditor({
12392
>
12493
Reset
12594
</button>
126-
<button
127-
className="button button--secondary button--outline"
128-
onClick={handleCopyToClipboard}
129-
>
130-
{clipboardTick ? "✔ Copied" : "Copy"}
131-
</button>
95+
<CopyToClipboardButton value={value} />
13296
</div>
13397
<div style={{ display: "flex", gap: "1rem" }}>
13498
{shouldShowSolution && (
@@ -205,3 +169,7 @@ export default function CodeEditor({
205169
</div>
206170
);
207171
}
172+
173+
export default function CodeEditor(props: CodeEditorProps) {
174+
return <BrowserOnly>{() => <BrowserCodeEditor {...props} />}</BrowserOnly>;
175+
}

‎src/pages/index.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import type {ReactNode} from 'react';
2-
import clsx from 'clsx';
3-
import Link from '@docusaurus/Link';
4-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5-
import Layout from '@theme/Layout';
6-
import HomepageFeatures from '@site/src/components/HomepageFeatures';
7-
import Heading from '@theme/Heading';
1+
import type { ReactNode } from "react";
2+
import clsx from "clsx";
3+
import Link from "@docusaurus/Link";
4+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
5+
import Layout from "@theme/Layout";
6+
import HomepageFeatures from "@site/src/components/HomepageFeatures";
7+
import Heading from "@theme/Heading";
88

9-
import styles from './index.module.css';
9+
import styles from "./index.module.css";
1010

1111
function HomepageHeader() {
12-
const {siteConfig} = useDocusaurusContext();
12+
const { siteConfig } = useDocusaurusContext();
1313
return (
14-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
14+
<header className={clsx("hero hero--primary", styles.heroBanner)}>
1515
<div className="container">
1616
<Heading as="h1" className="hero__title">
1717
{siteConfig.title}
@@ -20,8 +20,9 @@ function HomepageHeader() {
2020
<div className={styles.buttons}>
2121
<Link
2222
className="button button--secondary button--lg"
23-
to="/docs/intro">
24-
Docusaurus Tutorial - 5min ⏱️
23+
to="/docs/basics/introduction-to-typescript/"
24+
>
25+
Start my journey
2526
</Link>
2627
</div>
2728
</div>
@@ -30,11 +31,12 @@ function HomepageHeader() {
3031
}
3132

3233
export default function Home(): ReactNode {
33-
const {siteConfig} = useDocusaurusContext();
34+
const { siteConfig } = useDocusaurusContext();
3435
return (
3536
<Layout
3637
title={`Hello from ${siteConfig.title}`}
37-
description="Description will go into a meta tag in <head />">
38+
description="Description will go into a meta tag in <head />"
39+
>
3840
<HomepageHeader />
3941
<main>
4042
<HomepageFeatures />

0 commit comments

Comments
 (0)
0