Skip to content

Commit f842a51

Browse files
technoph1letechnoph1le
committed
Refactored code and removed unused parts
1 parent ecbd3ee commit f842a51

File tree

18 files changed

+102
-149
lines changed

18 files changed

+102
-149
lines changed

‎src/App.tsx

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
import Footer from "./layouts/Footer";
1+
import { useAppContext } from "./contexts/AppContext";
2+
23
import Header from "./layouts/Header";
34
import Banner from "./layouts/Banner";
4-
import LanguageSelector from "./components/LanguageSelector";
5-
import CategoryList from "./components/CategoryList";
6-
import { useAppContext } from "./contexts/AppContext";
5+
import Sidebar from "./layouts/Sidebar";
6+
import Footer from "./layouts/Footer";
7+
78
import SnippetList from "./components/SnippetList";
89

910
const App = () => {
1011
const { category } = useAppContext();
1112

1213
return (
13-
<>
14-
<div className="container flow" data-flow-space="xl">
15-
<Header />
16-
<Banner />
17-
<main className="main">
18-
<aside className="sidebar flow">
19-
<LanguageSelector />
20-
<CategoryList />
21-
</aside>
22-
<section className="flow">
23-
<h2 className="section-title">{category}</h2>
24-
<SnippetList />
25-
</section>
26-
</main>
27-
<Footer />
28-
</div>
29-
</>
14+
<div className="container flow" data-flow-space="xl">
15+
<Header />
16+
<Banner />
17+
<main className="main">
18+
<Sidebar />
19+
<section className="flow">
20+
<h2 className="section-title">{category}</h2>
21+
<SnippetList />
22+
</section>
23+
</main>
24+
<Footer />
25+
</div>
3026
);
3127
};
3228

‎src/components/Button.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { MouseEventHandler, ReactNode } from "react";
22

3+
// TODO: separate LinkButton from Button for clarity
4+
35
type ButtonProps = {
46
as?: "button" | "link";
57
href?: string;

‎src/components/CodePreview.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
22
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
33

4-
type CodePreviewProps = {
5-
language?: string;
4+
type Props = {
5+
language: string;
66
children: string;
77
};
88

9-
const CodePreview = ({ language, children }: CodePreviewProps) => {
10-
if (!language) {
11-
language = "markdown"; // for fallback
12-
}
13-
9+
const CodePreview = ({ language = "markdown", children }: Props) => {
1410
return (
1511
<SyntaxHighlighter
1612
language={language}

‎src/components/CopyToClipboard.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { useState } from "react";
2-
import { useAppContext } from "../contexts/AppContext";
32
import Button from "./Button";
43
import { CopyIcon } from "./Icons";
54

6-
const CopyToClipboard = ({ ...props }) => {
7-
const { snippet } = useAppContext();
8-
const [isCopied, setIsCopied] = useState(false);
5+
type Props = {
6+
text: string;
7+
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
98

10-
const snippetCode = snippet ? snippet.code : "";
9+
const CopyToClipboard = ({ text, ...props }: Props) => {
10+
const [isCopied, setIsCopied] = useState(false);
1111

12-
const copySnippetCode = () => {
12+
const copyText = () => {
1313
navigator.clipboard
14-
.writeText(snippetCode)
14+
.writeText(text)
1515
.then(() => {
1616
setIsCopied(true);
1717
setTimeout(() => setIsCopied(false), 2000);
@@ -20,7 +20,7 @@ const CopyToClipboard = ({ ...props }) => {
2020
};
2121

2222
return (
23-
<Button isIcon={true} onClick={copySnippetCode} {...props}>
23+
<Button isIcon={true} onClick={copyText} {...props}>
2424
{isCopied ? "Copied!" : <CopyIcon />}
2525
</Button>
2626
);

‎src/components/LanguageSelector.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,18 @@ const LanguageSelector = () => {
2525
}
2626

2727
return (
28-
<>
29-
<select
30-
id="languages"
31-
className="language-selector"
32-
onChange={handleLanguageChange}
33-
defaultValue="CSS"
34-
>
35-
{fetchedLanguages.map((language, idx) => (
36-
<option key={idx} value={language.lang}>
37-
{language.lang}
38-
</option>
39-
))}
40-
</select>
41-
</>
28+
<select
29+
id="languages"
30+
className="language-selector"
31+
onChange={handleLanguageChange}
32+
defaultValue="CSS"
33+
>
34+
{fetchedLanguages.map((language, idx) => (
35+
<option key={idx} value={language.lang}>
36+
{language.lang}
37+
</option>
38+
))}
39+
</select>
4240
);
4341
};
4442

‎src/components/SnippetList.tsx

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import { useState } from "react";
22
import { SnippetType } from "../types";
33
import { useAppContext } from "../contexts/AppContext";
44
import { useSnippets } from "../hooks/useSnippets";
5-
import slugify from "../utils/slugify";
65

76
import Button from "./Button";
8-
import CodePreview from "./CodePreview";
97
import SnippetModal from "./SnippetModal";
10-
import CopyToClipboard from "./CopyToClipboard";
11-
import { CloseIcon, ExpandIcon } from "./Icons";
8+
import { ExpandIcon } from "./Icons";
129

1310
const SnippetList = () => {
1411
const { language, setSnippet } = useAppContext();
@@ -33,9 +30,6 @@ const SnippetList = () => {
3330
<li key={idx} className="snippet">
3431
<div className="snippet__preview">
3532
<img src={language.icon} alt={language.lang} />
36-
{/* <Button isIcon={true} className="snippet__copy">
37-
<CopyIcon />
38-
</Button> */}
3933
</div>
4034

4135
<div className="snippet__content">
@@ -45,36 +39,11 @@ const SnippetList = () => {
4539
</Button>
4640
</div>
4741
{isModalOpen && (
48-
<SnippetModal>
49-
<div className="modal | flow" data-flow-space="lg">
50-
<div className="modal__header">
51-
<h2 className="section-title">{snippet.title}</h2>
52-
<Button isIcon={true} onClick={handleCloseModal}>
53-
<CloseIcon />
54-
</Button>
55-
</div>
56-
<div className="code-preview">
57-
<CopyToClipboard className="modal__copy" />
58-
<CodePreview language={slugify(language.lang)}>
59-
{snippet.code}
60-
</CodePreview>
61-
</div>
62-
<p>
63-
<b>Description: </b>
64-
{snippet.description}
65-
</p>
66-
<p>
67-
Contributed by <b>{snippet.author}</b>
68-
</p>
69-
<ul role="list" className="modal__tags">
70-
{snippet.tags.map((tag) => (
71-
<li key={tag} className="modal__tag">
72-
{tag}
73-
</li>
74-
))}
75-
</ul>
76-
</div>
77-
</SnippetModal>
42+
<SnippetModal
43+
snippet={snippet}
44+
handleCloseModal={handleCloseModal}
45+
language={language.lang}
46+
/>
7847
)}
7948
</li>
8049
))}

‎src/components/SnippetModal.tsx

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,55 @@
11
import React from "react";
22
import ReactDOM from "react-dom";
3+
import Button from "./Button";
4+
import { CloseIcon } from "./Icons";
5+
import CopyToClipboard from "./CopyToClipboard";
6+
import CodePreview from "./CodePreview";
7+
import { SnippetType } from "../types";
8+
import slugify from "../utils/slugify";
39

410
type Props = {
5-
children: React.ReactNode;
11+
snippet: SnippetType;
12+
language: string;
13+
handleCloseModal: () => void;
614
};
715

8-
const SnippetModal: React.FC<Props> = ({ children }) => {
16+
const SnippetModal: React.FC<Props> = ({
17+
snippet,
18+
language,
19+
handleCloseModal,
20+
}) => {
921
const modalRoot = document.getElementById("modal-root");
1022
if (!modalRoot) return null;
1123

1224
return ReactDOM.createPortal(
13-
<div className="modal-overlay">{children}</div>,
25+
<div className="modal-overlay">
26+
<div className="modal | flow" data-flow-space="lg">
27+
<div className="modal__header">
28+
<h2 className="section-title">{snippet.title}</h2>
29+
<Button isIcon={true} onClick={handleCloseModal}>
30+
<CloseIcon />
31+
</Button>
32+
</div>
33+
<div className="code-preview">
34+
<CopyToClipboard text={snippet.code} className="modal__copy" />
35+
<CodePreview language={slugify(language)}>{snippet.code}</CodePreview>
36+
</div>
37+
<p>
38+
<b>Description: </b>
39+
{snippet.description}
40+
</p>
41+
<p>
42+
Contributed by <b>{snippet.author}</b>
43+
</p>
44+
<ul role="list" className="modal__tags">
45+
{snippet.tags.map((tag) => (
46+
<li key={tag} className="modal__tag">
47+
{tag}
48+
</li>
49+
))}
50+
</ul>
51+
</div>
52+
</div>,
1453
modalRoot
1554
);
1655
};

‎src/contexts/AppContext.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const defaultLanguage: LanguageType = {
99

1010
const defaultCategory: string = "DOM Manipulation";
1111

12+
// TODO: add custom loading and error handling
1213
const defaultState: AppState = {
1314
language: defaultLanguage,
1415
setLanguage: () => {},

‎src/hooks/useCategories.tsx renamed to ‎src/hooks/useCategories.ts

File renamed without changes.

‎src/hooks/useLanguages.tsx renamed to ‎src/hooks/useLanguages.ts

File renamed without changes.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy