Skip to content

Commit 3327984

Browse files
technoph1letechnoph1le
committed
Did some routing stuff
1 parent 9eb58ac commit 3327984

File tree

7 files changed

+175
-102
lines changed

7 files changed

+175
-102
lines changed

‎public/data/javascript.json‎

Lines changed: 33 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,33 @@
1-
{
2-
"language": "JavaScript",
3-
"categories": [
4-
{
5-
"categoryName": "DOM Manipulation",
6-
"snippets": [
7-
{
8-
"title": "Add a class to an element",
9-
"description": "Add a CSS class to a DOM element.",
10-
"code": "document.getElementById('myElement').classList.add('myClass');",
11-
"tags": ["dom", "class", "javascript"],
12-
"author": "@technoph1le",
13-
"dateAdded": "2024-10-23"
14-
},
15-
{
16-
"title": "Remove a class from an element",
17-
"description": "Remove a CSS class from a DOM element.",
18-
"code": "document.getElementById('myElement').classList.remove('myClass');",
19-
"tags": ["dom", "class", "javascript"],
20-
"author": "@technoph1le",
21-
"dateAdded": "2024-10-22"
22-
}
23-
]
24-
},
25-
{
26-
"categoryName": "API Requests",
27-
"snippets": [
28-
{
29-
"title": "Fetch data from API",
30-
"description": "Use the Fetch API to retrieve data.",
31-
"code": "fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data));",
32-
"tags": ["api", "fetch", "javascript"],
33-
"author": "@technoph1le",
34-
"dateAdded": "2024-10-23"
35-
}
36-
]
37-
}
38-
]
39-
}
1+
[
2+
{
3+
"categoryName": "DOM Manipulation",
4+
"snippets": [
5+
{
6+
"title": "Add a class to an element",
7+
"description": "Add a CSS class to a DOM element.",
8+
"code": "document.getElementById('myElement').classList.add('myClass');",
9+
"tags": ["dom", "class", "javascript"],
10+
"author": "@technoph1le"
11+
},
12+
{
13+
"title": "Remove a class from an element",
14+
"description": "Remove a CSS class from a DOM element.",
15+
"code": "document.getElementById('myElement').classList.remove('myClass');",
16+
"tags": ["dom", "class", "javascript"],
17+
"author": "@technoph1le"
18+
}
19+
]
20+
},
21+
{
22+
"categoryName": "API Requests",
23+
"snippets": [
24+
{
25+
"title": "Fetch data from API",
26+
"description": "Use the Fetch API to retrieve data.",
27+
"code": "fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data));",
28+
"tags": ["api", "fetch", "javascript"],
29+
"author": "@technoph1le"
30+
}
31+
]
32+
}
33+
]

‎public/data/python.json‎

Lines changed: 40 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,40 @@
1-
{
2-
"language": "Python",
3-
"categories": [
4-
{
5-
"categoryName": "File Handling",
6-
"snippets": [
7-
{
8-
"title": "Read a File",
9-
"description": "Reads the entire content of a file.",
10-
"code": "with open('file.txt', 'r') as file:\n content = file.read()\n print(content)",
11-
"tags": ["file", "read", "python"],
12-
"author": "@technoph1le",
13-
"dateAdded": "2024-10-23"
14-
},
15-
{
16-
"title": "Write to a File",
17-
"description": "Writes a string to a file.",
18-
"code": "with open('file.txt', 'w') as file:\n file.write('Hello, World!')",
19-
"tags": ["file", "write", "python"],
20-
"author": "@technoph1le",
21-
"dateAdded": "2024-10-23"
22-
}
23-
]
24-
},
25-
{
26-
"categoryName": "Data Structures",
27-
"snippets": [
28-
{
29-
"title": "Reverse a List",
30-
"description": "Reverses a list using slicing.",
31-
"code": "my_list = [1, 2, 3, 4, 5]\nreversed_list = my_list[::-1]\nprint(reversed_list)",
32-
"tags": ["list", "reverse", "python"],
33-
"author": "@technoph1le",
34-
"dateAdded": "2024-10-23"
35-
},
36-
{
37-
"title": "Dictionary Comprehension",
38-
"description": "Creates a dictionary with squares of numbers.",
39-
"code": "squares = {x: x*x for x in range(6)}\nprint(squares)",
40-
"tags": ["dictionary", "comprehension", "python"],
41-
"author": "@technoph1le",
42-
"dateAdded": "2024-10-23"
43-
}
44-
]
45-
}
46-
]
47-
}
1+
[
2+
{
3+
"categoryName": "File Handling",
4+
"snippets": [
5+
{
6+
"title": "Read a File",
7+
"description": "Reads the entire content of a file.",
8+
"code": "with open('file.txt', 'r') as file:\n content = file.read()\n print(content)",
9+
"tags": ["file", "read", "python"],
10+
"author": "@technoph1le"
11+
},
12+
{
13+
"title": "Write to a File",
14+
"description": "Writes a string to a file.",
15+
"code": "with open('file.txt', 'w') as file:\n file.write('Hello, World!')",
16+
"tags": ["file", "write", "python"],
17+
"author": "@technoph1le"
18+
}
19+
]
20+
},
21+
{
22+
"categoryName": "Data Structures",
23+
"snippets": [
24+
{
25+
"title": "Reverse a List",
26+
"description": "Reverses a list using slicing.",
27+
"code": "my_list = [1, 2, 3, 4, 5]\nreversed_list = my_list[::-1]\nprint(reversed_list)",
28+
"tags": ["list", "reverse", "python"],
29+
"author": "@technoph1le"
30+
},
31+
{
32+
"title": "Dictionary Comprehension",
33+
"description": "Creates a dictionary with squares of numbers.",
34+
"code": "squares = {x: x*x for x in range(6)}\nprint(squares)",
35+
"tags": ["dictionary", "comprehension", "python"],
36+
"author": "@technoph1le"
37+
}
38+
]
39+
}
40+
]

‎src/components/CategoryList.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import { useLoaderData, useParams } from "react-router-dom";
12
import { CategoryProps } from "../types";
23
import Category from "./Category";
34

45
const CategoryList = () => {
6+
const { language } = useParams();
7+
// const data = useLoaderData();
8+
59
const sampleData: CategoryProps[] = [
610
{
711
title: "DOM Manipulation",
@@ -21,11 +25,14 @@ const CategoryList = () => {
2125
];
2226

2327
return (
24-
<ul role="list" className="categories">
25-
{sampleData.map((category) => (
26-
<Category {...category} />
27-
))}
28-
</ul>
28+
<>
29+
<p>{language}</p>
30+
<ul role="list" className="categories">
31+
{sampleData.map((category) => (
32+
<Category key={category.title} {...category} />
33+
))}
34+
</ul>
35+
</>
2936
);
3037
};
3138

‎src/components/SnippetModal.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const SnippetModal = () => {
2+
return <p>Modal</p>;
3+
};
4+
5+
export default SnippetModal;

‎src/layouts/SnippetList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const SnippetList = () => {
2525
<h2 className="section-title">API Requests</h2>
2626
<ul role="list" className="snippets">
2727
{sampleData.map((snippet) => (
28-
<SnippetCard {...snippet} />
28+
<SnippetCard key={snippet.title} {...snippet} />
2929
))}
3030
</ul>
3131
</section>

‎src/main.tsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,43 @@ import { StrictMode } from "react";
22
import { createRoot } from "react-dom/client";
33
import "./styles/main.css";
44
import App from "./App";
5+
import { createBrowserRouter, RouterProvider } from "react-router-dom";
6+
import CategoryList from "./components/CategoryList";
7+
import SnippetList from "./layouts/SnippetList";
8+
import SnippetModal from "./components/SnippetModal";
9+
import { fetchCategories, fetchLanguages, fetchSnippets } from "./services/api";
10+
11+
const router = createBrowserRouter([
12+
{
13+
path: "/",
14+
element: <App />,
15+
loader: fetchLanguages,
16+
children: [
17+
{
18+
path: ":language",
19+
element: <CategoryList />,
20+
loader: fetchCategories,
21+
children: [
22+
{
23+
path: ":category",
24+
element: <SnippetList />,
25+
loader: fetchSnippets,
26+
children: [
27+
{
28+
path: ":snippet",
29+
element: <SnippetModal />,
30+
loader: fetchSnippets,
31+
},
32+
],
33+
},
34+
],
35+
},
36+
],
37+
},
38+
]);
539

640
createRoot(document.getElementById("root")!).render(
741
<StrictMode>
8-
<App />
42+
<RouterProvider router={router} />
943
</StrictMode>
1044
);

‎src/services/api.ts‎

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,53 @@
1-
// export const fetchLanguages = async () => {
2-
// try {
3-
// const res = await fetch("/data/index.json");
4-
// const data = await res.json();
1+
import slugify from "../utils/slugify";
52

6-
// return data.languages;
7-
// } catch (error) {
8-
// console.error("Error occured: ", error);
9-
// }
10-
// };
3+
export const fetchLanguages = async ({ params }: any) => {
4+
try {
5+
const res = await fetch(`/data/${params.language}.json`);
6+
if (!res.ok) {
7+
throw new Error("Failed to fetch languages");
8+
}
9+
10+
console.log(`/data/${params.language}.json`);
11+
console.log("data fetch");
12+
13+
const data = await res.json();
14+
console.log(data);
15+
16+
return data;
17+
} catch (error) {
18+
return new Error(`Error occured: ${error}`);
19+
}
20+
};
21+
22+
export const fetchCategories = async (params: any) => {
23+
try {
24+
const res = await fetch(`/data/${params.language}.json`);
25+
const data = await res.json();
26+
27+
const newData = data.map((category: any) => category.categoryName);
28+
29+
console.log(newData);
30+
return newData;
31+
} catch (error) {
32+
return new Error(`Error occured: ${error}`);
33+
}
34+
};
35+
36+
export const fetchSnippets = async (params: any) => {
37+
try {
38+
const res = await fetch(`/data/${params.language}.json`);
39+
const data = await res.json();
40+
41+
const categoryData = data.find(
42+
(cat: any) => slugify(cat.categoryName) === slugify(params.category)
43+
);
44+
return categoryData?.snippets.find(
45+
(snip: any) => slugify(snip.title) === params.snippet
46+
);
47+
} catch (error) {
48+
console.error("Error occured: ", error);
49+
}
50+
};
1151

1252
// export const getSnippetsByLanguage = async (language: string) => {
1353
// try {

0 commit comments

Comments
 (0)