Initial migration to NextJS #268
Conversation
technoph1le
requested review from
psychlone77,
saminjay and
Mathys-Gasnier
as code owners
package.json
Outdated
| "prismjs": "^1.29.0", | ||
| "react": "^18.3.1", | ||
| "react-dom": "^18.3.1", | ||
| "react-router-dom": "^7.1.1", | ||
| "react-syntax-highlighter": "^15.6.1" | ||
| "react-syntax-highlighter": "^5.8.0" |
There was a problem hiding this comment.
why did we rollback the react syntax highlighter version ?
There was a problem hiding this comment.
Interesting. It was done with npm audit fix. I guess, it was meant to be 15.8.0, but that is weird 🤔
There was a problem hiding this comment.
There is a reported vulnerability in the latest prismjs package version GHSA-x7hr-w5r2-h6wg. The npm audit fix sometimes recommends downgrading to avoid the vulnerability. I would recommend to keep the packages on their latest versions until a patch for prismjs is released.
Not removing anything. Just importing all back one by one. :) |
WalkthroughThis pull request removes outdated configuration, workflow, and legacy documentation files while introducing a new Next.js–based structure. Key updates include new API routes for snippet retrieval and search, consolidated JSON data for snippets and language relationships, refactored UI components and context state management, and updated dependencies and TypeScript settings. The migration phase eliminates legacy utilities, tests, and routing components to streamline the overall codebase. Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant API
participant FileSystem
Client->>API: GET /api/snippets/[language]/[category]/[snippetTitle]
API->>FileSystem: Check for language file
alt File exists
FileSystem-->>API: Return JSON data
API->>API: Parse and locate snippet
API-->>Client: Return snippet JSON
else File missing
API-->>Client: 404 Error
end
sequenceDiagram
participant Client
participant API
participant FileSystem
Client->>API: GET /api/snippets/search?q=search_term
API->>FileSystem: Read all snippet files
API->>API: Filter snippets matching query
API-->>Client: Return matching snippets JSON
Possibly related issues
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 32
🔭 Outside diff range comments (4)
src/hooks/useSnippets.tsx (3)
26-30:⚠️ Potential issueFix variable references and property access
The code references an undefined
categoryvariable and uses the property.nameon an object that likely has.categoryNameinstead.Update the references to use the correct variables and properties:
// If the category is the default category, return all snippets for the given language. const snippets = - slugify(category) === slugify(defaultCategoryName) + slugify(selectedCategory.categoryName) === slugify(defaultCategoryName) ? data.flatMap((item) => item.snippets) - : data.find((item) => item.name === category)?.snippets ?? []; + : data.find((item) => slugify(item.categoryName) === slugify(selectedCategory.categoryName))?.snippets ?? [];
32-45:⚠️ Potential issueFix undefined QueryParams reference
The code uses
QueryParamswhich is now commented out in the imports.Reintroduce the QueryParams import or replace with direct string values:
+import { QueryParams } from "@/utils/enums"; // Uncomment and fix the path // Rest of code... - if (!searchParams.has(QueryParams.SEARCH)) { + if (!searchParams.has("search")) { // Or restore the QueryParams import return snippets; } return snippets.filter((item) => { const searchTerm = ( - searchParams.get(QueryParams.SEARCH) || "" + searchParams.get("search") || "" // Or restore the QueryParams import ).toLowerCase(); // Rest of code...
46-46:⚠️ Potential issueUpdate the dependency array in useMemo
The dependency array references the old
categoryvariable that no longer exists.Update the dependency array to use the new context variables:
- }, [category, data, searchParams]); + }, [selectedCategory, data, searchParams]);src/components/LanguageSelector.tsx (1)
41-41:⚠️ Potential issueProperty name inconsistency
Line 41 uses
lang.namewhile line 33 useslang.languageName.-: [{ languageName: lang.name }] +: [{ languageName: lang.languageName }]
🧹 Nitpick comments (25)
snippets/javascript/function-utilities/throttle-function.md (1)
8-26: Review of Throttle Function ImplementationThe throttle function is implemented correctly using arrow functions and closures. One minor improvement is to explicitly initialize the
inThrottlevariable tofalse(e.g.,let inThrottle = false;) rather than leaving it undefined. This helps with code clarity and ensures that the variable’s boolean intent is immediately obvious.Below is a suggested diff for this improvement:
const throttle = (func, limit) => { - let inThrottle; + let inThrottle = false; return (...args) => { if (!inThrottle) { func(...args); inThrottle = true; setTimeout(() => (inThrottle = false), limit); } }; };Additionally, consider adding a brief inline comment on the setTimeout mechanism to guide readers about the throttling reset behavior.
.gitignore (1)
27-32: Debug Log Files:
The patterns here address logs from npm, yarn, and pnpm. While these entries are comprehensive, consider verifying if there are any additional debug output files (perhaps from new tools in the Next.js ecosystem) that should also be ignored.eslint.config.mjs (1)
1-16: ESLint configuration properly set up for Next.jsThe configuration correctly uses the modern flat config format and properly extends Next.js specific configurations.
Consider adding some common rules that might be beneficial for the project:
const eslintConfig = [ ...compat.extends("next/core-web-vitals", "next/typescript"), + { + rules: { + // Add custom rules here + "react-hooks/exhaustive-deps": "warn", + "jsx-a11y/alt-text": "error", + }, + }, ];next.config.ts (1)
1-7: Basic Next.js configuration structure establishedThe configuration file provides a basic structure for Next.js configuration.
Consider adding common Next.js configurations that might be beneficial for the project:
const nextConfig: NextConfig = { - /* config options here */ + reactStrictMode: true, + images: { + domains: ['your-domain.com'], + }, + experimental: { + serverActions: true, + }, };src/app/docs/page.tsx (1)
1-15: Good use of the Next.js Image componentThis implementation correctly uses the Next.js Image component which provides automatic optimization. The placeholder message and preview image provide a good foundation for the future documentation page.
Consider adding some styling classes to the h1 element and container to ensure proper spacing and responsive behavior. Also, you might want to add a more detailed explanation about when documentation will be available.
src/components/Sidebar.tsx (1)
1-2: Import path inconsistencyThere's an inconsistency in the import paths - one uses "@/components/" while the commented import uses "@components/".
Maintain consistent import paths throughout the codebase by updating the commented import to match the "@/components/" pattern:
import CategoryList from "@/components/CategoryList"; -// import LanguageSelector from "@components/LanguageSelector"; +// import LanguageSelector from "@/components/LanguageSelector";src/app/api/snippets/route.ts (1)
5-20: Consider implementing caching for better performanceReading from the filesystem on every request can be inefficient, especially as your snippet collection grows. Consider implementing a caching mechanism to improve performance.
You could use Next.js's built-in caching mechanisms or implement a simple in-memory cache:
// At the module level let snippetsCache: Snippet[] | null = null; let lastCacheTime = 0; const CACHE_TTL = 60 * 60 * 1000; // 1 hour in milliseconds export async function GET() { // Check if cache is valid if (snippetsCache && (Date.now() - lastCacheTime < CACHE_TTL)) { return NextResponse.json(snippetsCache); } // Continue with your existing code to fetch snippets // ... // Update cache snippetsCache = allSnippets; lastCacheTime = Date.now(); return NextResponse.json(allSnippets); }🧰 Tools
🪛 ESLint
[error] 11-11: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
src/app/api/snippets/[language]/route.ts (1)
6-23: Consider extracting common file reading logicThere's duplicate logic between this file and other API routes for reading JSON files from the consolidated directory. Consider extracting this to a shared utility function.
// Create a new file: src/utils/snippetUtils.ts import fs from "fs"; import path from "path"; export interface Snippet { title: string; code: string; language: string; category: string; // Add other properties } /** * Reads and parses a JSON file from the consolidated directory * @param filename The name of the JSON file to read * @returns The parsed JSON data * @throws Error if the file doesn't exist or can't be parsed */ export async function readJsonFile<T>(filename: string): Promise<T> { const filePath = path.join(process.cwd(), "consolidated", filename); const content = await fs.promises.readFile(filePath, "utf8"); return JSON.parse(content) as T; } /** * Checks if a file exists in the consolidated directory * @param filename The name of the file to check * @returns True if the file exists, false otherwise */ export async function fileExists(filename: string): Promise<boolean> { const filePath = path.join(process.cwd(), "consolidated", filename); try { await fs.promises.access(filePath, fs.constants.F_OK); return true; } catch { return false; } }Then in your route handler:
import { fileExists, readJsonFile, Snippet } from "@/utils/snippetUtils"; export async function GET( req: Request, { params }: { params: { language: string } } ) { const { language } = params; const filename = `${slugify(language)}.json`; try { if (!(await fileExists(filename))) { return NextResponse.json({ error: "Language not found" }, { status: 404 }); } const data = await readJsonFile<Snippet[]>(filename); return NextResponse.json(data); } catch (error) { console.error(`Error fetching snippets for language ${language}:`, error); return NextResponse.json({ error: "Failed to fetch snippets" }, { status: 500 }); } }consolidated/_relationships.json (2)
1-8: Consider adding more languages and frameworksThe current structure only includes JavaScript and Python with a few sub-languages. As QuickSnip grows, you might want to expand this to include more languages and frameworks.
Consider adding more common languages and frameworks:
{ "JavaScript": { - "subLanguages": ["React"] + "subLanguages": ["React", "Vue", "Angular", "Node.js", "Express", "Next.js"] }, "Python": { - "subLanguages": ["FastAPI", "Tkinter"] + "subLanguages": ["FastAPI", "Django", "Flask", "Tkinter", "PyTorch", "TensorFlow"] }, + "Java": { + "subLanguages": ["Spring", "Android", "Hibernate"] + }, + "C#": { + "subLanguages": [".NET Core", "ASP.NET", "WPF", "Xamarin"] + }, + "Ruby": { + "subLanguages": ["Rails", "Sinatra"] + }, + "Go": { + "subLanguages": ["Gin", "Echo"] + }, + "TypeScript": { + "subLanguages": ["Angular", "React", "Vue"] + } }
1-8: Add a TypeScript interface for the relationships structureTo improve type safety when working with this data, consider creating a TypeScript interface that defines the expected structure.
Create a new file
src/types/relationships.ts:export interface LanguageRelationships { [language: string]: { subLanguages: string[]; }; } // Example usage: // import { readJsonFile } from "@/utils/snippetUtils"; // import { LanguageRelationships } from "@/types/relationships"; // // const relationships = await readJsonFile<LanguageRelationships>("_relationships.json");src/components/Header.tsx (2)
5-7: Clean up commented importsThere are several commented-out imports in the file. Since this is a migration, it would be helpful to either remove them completely or add comments explaining the migration status of these features.
import Link from "next/link"; import { GitHubIcon } from "./Icons"; import LinkButton from "./LinkButton"; import Logo from "./Logo"; -// import SearchInput from "./SearchInput"; import ThemeToggle from "./ThemeToggle"; -// import useGitHubStars from "@hooks/useGitHubStars";Or if you're planning to reinstate these features later:
import Link from "next/link"; import { GitHubIcon } from "./Icons"; import LinkButton from "./LinkButton"; import Logo from "./Logo"; -// import SearchInput from "./SearchInput"; +// TODO: Reinstate search functionality after migration +// import SearchInput from "./SearchInput"; import ThemeToggle from "./ThemeToggle"; -// import useGitHubStars from "@hooks/useGitHubStars"; +// TODO: Reinstate GitHub stars counter after migration +// import useGitHubStars from "@hooks/useGitHubStars";
10-10: Clean up commented code in component bodySimilar to the imports, there are commented-out lines in the component body. Consider either removing them completely or adding explanatory comments.
const Header = () => { - // const { starsAmount, loading, error } = useGitHubStars(); + // TODO: Reinstate GitHub stars counter after migration + // const { starsAmount, loading, error } = useGitHubStars(); return ( // ...src/hooks/useCategories.tsx (1)
11-13: Consider adding fallback handling for the API endpoint.The current implementation doesn't handle cases where
selectedLanguagemight be empty or undefined, which could lead to an invalid API endpoint being constructed.const { data, loading, error } = useFetch<CategoriesType>( - `/api/snippets/${selectedLanguage}` + selectedLanguage ? `/api/snippets/${selectedLanguage}` : `/api/snippets/default` );src/app/api/snippets/search/route.ts (4)
16-19: Consider using async file operations.The synchronous file operations (
readdirSync) could block the event loop for larger directories. Consider using the async versions for better performance.- const files = fs - .readdirSync(snippetsPath) - .filter((file) => file !== "relationships.json"); + const files = (await fs.promises.readdir(snippetsPath)) + .filter((file) => file !== "relationships.json");
21-21: Replace with const and define a specific type.The variable is never reassigned and using
any[]reduces type safety.- let matchingSnippets: any[] = []; + interface MatchingSnippet { + language: string; + category: string; + title: string; + description: string; + tags: string[]; + code: string; + } + const matchingSnippets: MatchingSnippet[] = [];🧰 Tools
🪛 ESLint
[error] 21-21: 'matchingSnippets' is never reassigned. Use 'const' instead.
(prefer-const)
[error] 21-21: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
27-45: Consider optimizing the search implementation.The current implementation makes multiple lowercase conversions for each snippet. Consider pre-processing the query once and potentially using more efficient search algorithms for larger datasets.
+ // Pre-process the query once + const lowerCaseQuery = query.toLowerCase(); for (const file of files) { // ... for (const category of data.categories) { for (const snippet of category.snippets) { if ( - snippet.title.toLowerCase().includes(query) || - snippet.description.toLowerCase().includes(query) || - snippet.tags.some((tag: string) => - tag.toLowerCase().includes(query) - ) || - snippet.code.toLowerCase().includes(query) + snippet.title.toLowerCase().includes(lowerCaseQuery) || + snippet.description.toLowerCase().includes(lowerCaseQuery) || + snippet.tags.some((tag: string) => + tag.toLowerCase().includes(lowerCaseQuery) + ) || + snippet.code.toLowerCase().includes(lowerCaseQuery) ) {
47-48: Consider implementing pagination for large result sets.If the number of snippets becomes large, returning all matching snippets at once could impact performance. Consider implementing pagination.
- return NextResponse.json(matchingSnippets); + // Add pagination parameters + const page = parseInt(searchParams.get("page") || "1"); + const limit = parseInt(searchParams.get("limit") || "20"); + const startIndex = (page - 1) * limit; + const endIndex = page * limit; + + // Create pagination metadata + const paginatedResults = { + total: matchingSnippets.length, + page, + limit, + results: matchingSnippets.slice(startIndex, endIndex) + }; + + return NextResponse.json(paginatedResults);src/hooks/useLanguages.ts (1)
11-21: Add safety checks for object properties.The code assumes the data structure always contains
languageNameandlanguageIcon, but there's no check for missing properties.// Extract unique languages from the fetched snippets const fetchedLanguages: LanguageInfo[] = data ? Array.from( new Map( - data.map(({ languageName, languageIcon }) => [ + data.map((item) => { + // Ensure properties exist with defaults if missing + const languageName = item.languageName || "Unknown"; + const languageIcon = item.languageIcon || "default-icon"; + return [ languageName, { languageName, languageIcon }, - ]) + ]; + }) ).values() ) : [];src/app/layout.tsx (2)
6-8: Consider adding a fallback font family.While importing the Google font, it's good practice to specify fallback fonts in case the primary font fails to load.
const sourceSans3 = Source_Sans_3({ subsets: ["latin"], + fallback: ["system-ui", "Arial", "sans-serif"], });
22-26: Add viewport meta tag for responsiveness.Including a viewport meta tag is important for responsive design, especially for mobile devices.
return ( <AppProvider> <html lang="en"> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + </head> <body className={`${sourceSans3.className}`}>{children}</body> </html> </AppProvider>src/app/api/snippets/[language]/[category]/[snippetTitle]/route.ts (1)
1-21: Good implementation of the Next.js API routeThe implementation follows Next.js API route patterns correctly with proper parameter extraction. However, I notice a few areas for improvement.
Consider extracting the hardcoded "consolidated" directory path to a constant or configuration file to improve maintainability. Also, consider adding error handling for the file system operations.
+import { SNIPPETS_DIR } from "@/utils/constants"; // Add this file if it doesn't exist + export async function GET( req: Request, { params, }: { params: { language: string; category: string; snippetTitle: string } } ) { const { language, category, snippetTitle } = params; const filePath = path.join( process.cwd(), - "consolidated", + SNIPPETS_DIR, `${slugify(language)}.json` );src/app/api/snippets/[language]/[category]/route.ts (1)
1-19: Good implementation of the Next.js API routeThe implementation follows Next.js API route patterns correctly. However, there's potential for code reuse with other similar API routes.
Consider extracting the common functionality for finding language JSON files into a utility function to reduce duplication across API routes:
+import { getLanguageData } from "@/utils/snippetUtils"; // Create this utility + export async function GET( req: Request, { params }: { params: { language: string; category: string } } ) { const { language, category } = params; - const filePath = path.join( - process.cwd(), - "consolidated", - `${slugify(language)}.json` - ); - - if (!fs.existsSync(filePath)) { - return NextResponse.json({ error: "Language not found" }, { status: 404 }); - } - - const data = JSON.parse(fs.readFileSync(filePath, "utf8")); + + const { data, error } = await getLanguageData(language); + if (error) { + return NextResponse.json({ error }, { status: 404 }); + }src/hooks/useSnippets.tsx (1)
6-8: Review commented-out importsThere are imports that have been commented out, which suggests incomplete migration or dead code.
Either remove these commented-out imports completely or restore them if they're still needed:
-// import { QueryParams } from "@utils/enums"; -// import { getLanguageFileName } from "@utils/languageUtils";src/components/SubLanguageSelector.tsx (1)
89-91: Code formatting consistencyThe formatting of template literals has been changed to use line breaks, which is fine for readability, but ensure this style is consistent throughout the codebase.
package.json (1)
18-25: Missing typical Next.js dependenciesSome common Next.js dependencies are missing, such as tailwind CSS (if you're using it) and other utilities commonly used with Next.js projects.
Consider adding these commonly used dependencies if relevant to your project:
"devDependencies": { "@eslint/eslintrc": "^3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@types/react-syntax-highlighter": "^15.5.13", "eslint": "^9", "eslint-config-next": "15.2.2", + "autoprefixer": "^10.4.14", + "postcss": "^8.4.24", + "tailwindcss": "^3.3.2", "typescript": "^5" }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (28)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/favicon.icois excluded by!**/*.icopublic/favicon/android-chrome-192x192.pngis excluded by!**/*.pngpublic/favicon/android-chrome-512x512.pngis excluded by!**/*.pngpublic/favicon/apple-touch-icon.pngis excluded by!**/*.pngpublic/favicon/favicon-16x16.pngis excluded by!**/*.pngpublic/favicon/favicon-32x32.pngis excluded by!**/*.pngpublic/fonts/SourceSans3-Italic-VariableFont_wght.woff2is excluded by!**/*.woff2public/fonts/SourceSans3-VariableFont_wght.woff2is excluded by!**/*.woff2public/icons/bash.svgis excluded by!**/*.svgpublic/icons/c.svgis excluded by!**/*.svgpublic/icons/cpp.svgis excluded by!**/*.svgpublic/icons/csharp.svgis excluded by!**/*.svgpublic/icons/css.svgis excluded by!**/*.svgpublic/icons/haskell.svgis excluded by!**/*.svgpublic/icons/html.svgis excluded by!**/*.svgpublic/icons/java.svgis excluded by!**/*.svgpublic/icons/javascript--react.svgis excluded by!**/*.svgpublic/icons/javascript.svgis excluded by!**/*.svgpublic/icons/python--fastapi.svgis excluded by!**/*.svgpublic/icons/python--tkinter.svgis excluded by!**/*.svgpublic/icons/python.svgis excluded by!**/*.svgpublic/icons/regex.svgis excluded by!**/*.svgpublic/icons/ruby.svgis excluded by!**/*.svgpublic/icons/rust.svgis excluded by!**/*.svgpublic/icons/scss.svgis excluded by!**/*.svgpublic/icons/typescript.svgis excluded by!**/*.svgpublic/preview.pngis excluded by!**/*.png
📒 Files selected for processing (79)
.gitattributes(0 hunks).github/pull_request_template.md(1 hunks).github/workflows/check-snippets.yml(0 hunks).github/workflows/pre-commit-checks.yml(0 hunks).gitignore(1 hunks).husky/pre-commit(0 hunks).prettierignore(0 hunks).prettierrc(0 hunks)CODE_OF_CONDUCT.md(0 hunks)CONTRIBUTING.md(0 hunks)LICENSE(0 hunks)README.md(0 hunks)VISION.md(0 hunks)consolidated/_relationships.json(1 hunks)consolidated/javascript.json(1 hunks)consolidated/react.json(1 hunks)cspell-dict.txt(0 hunks)cspell.json(0 hunks)eslint.config.js(0 hunks)eslint.config.mjs(1 hunks)index.html(0 hunks)next.config.ts(1 hunks)package.json(1 hunks)public/_redirects(0 hunks)public/site.webmanifest(0 hunks)snippets/javascript/function-utilities/throttle-function.md(1 hunks)src/AppRouter.tsx(0 hunks)src/app/api/route.ts(1 hunks)src/app/api/snippets/[language]/[category]/[snippetTitle]/route.ts(1 hunks)src/app/api/snippets/[language]/[category]/route.ts(1 hunks)src/app/api/snippets/[language]/route.ts(1 hunks)src/app/api/snippets/route.ts(1 hunks)src/app/api/snippets/search/route.ts(1 hunks)src/app/docs/page.tsx(1 hunks)src/app/layout.tsx(1 hunks)src/app/page.tsx(1 hunks)src/components/App.tsx(0 hunks)src/components/CategoryList.tsx(2 hunks)src/components/CodePreview.tsx(2 hunks)src/components/Container.tsx(1 hunks)src/components/CopyToClipboard.tsx(0 hunks)src/components/CopyURLButton.tsx(0 hunks)src/components/Header.tsx(2 hunks)src/components/LanguageSelector.tsx(5 hunks)src/components/SearchInput.tsx(0 hunks)src/components/Sidebar.tsx(1 hunks)src/components/SnippetList.tsx(0 hunks)src/components/SnippetModal.tsx(0 hunks)src/components/SubLanguageSelector.tsx(4 hunks)src/components/ThemeToggle.tsx(1 hunks)src/contexts/AppContext.tsx(2 hunks)src/hooks/useCategories.ts(0 hunks)src/hooks/useCategories.tsx(1 hunks)src/hooks/useGitHubStars.ts(0 hunks)src/hooks/useLanguages.ts(1 hunks)src/hooks/useSnippets.tsx(2 hunks)src/layouts/Sidebar.tsx(0 hunks)src/main.tsx(0 hunks)src/types/index.ts(2 hunks)src/utils/configureUserSelection.ts(0 hunks)src/utils/consts.ts(1 hunks)src/utils/enums.ts(0 hunks)src/utils/languageUtils.ts(0 hunks)src/utils/objectUtils.ts(0 hunks)src/utils/raise.ts(0 hunks)src/vite-env.d.ts(0 hunks)tests/configureUserSelection.test.ts(0 hunks)tests/languageUtils.test.ts(0 hunks)tests/objectUtils.test.ts(0 hunks)tests/raise.test.ts(0 hunks)tests/setup.ts(0 hunks)tests/slugify.test.ts(0 hunks)tsconfig.app.json(0 hunks)tsconfig.json(1 hunks)tsconfig.node.json(0 hunks)utils/checkSnippetFormatting.ts(0 hunks)utils/consolidateSnippets.ts(0 hunks)utils/snippetParser.ts(0 hunks)vite.config.ts(0 hunks)
💤 Files with no reviewable changes (46)
- src/main.tsx
- tests/setup.ts
- .gitattributes
- .prettierignore
- src/layouts/Sidebar.tsx
- cspell.json
- public/site.webmanifest
- src/components/App.tsx
- src/utils/enums.ts
- index.html
- public/_redirects
- cspell-dict.txt
- README.md
- src/vite-env.d.ts
- utils/checkSnippetFormatting.ts
- tsconfig.app.json
- tsconfig.node.json
- LICENSE
- src/utils/objectUtils.ts
- .github/workflows/pre-commit-checks.yml
- src/components/CopyURLButton.tsx
- src/hooks/useCategories.ts
- .husky/pre-commit
- src/components/SnippetList.tsx
- src/hooks/useGitHubStars.ts
- utils/consolidateSnippets.ts
- eslint.config.js
- src/utils/raise.ts
- tests/languageUtils.test.ts
- CONTRIBUTING.md
- tests/raise.test.ts
- src/components/SnippetModal.tsx
- src/AppRouter.tsx
- .github/workflows/check-snippets.yml
- VISION.md
- src/components/CopyToClipboard.tsx
- src/components/SearchInput.tsx
- vite.config.ts
- tests/configureUserSelection.test.ts
- tests/slugify.test.ts
- CODE_OF_CONDUCT.md
- tests/objectUtils.test.ts
- utils/snippetParser.ts
- src/utils/configureUserSelection.ts
- src/utils/languageUtils.ts
- .prettierrc
🧰 Additional context used
🧬 Code Definitions (8)
src/hooks/useCategories.tsx (3)
src/contexts/AppContext.tsx (1)
useAppContext(43-49)src/hooks/useFetch.ts (1)
useFetch(3-28)src/types/index.ts (1)
CategoriesType(10-14)
src/app/layout.tsx (1)
src/contexts/AppContext.tsx (1)
AppProvider(8-41)
src/hooks/useSnippets.tsx (3)
src/contexts/AppContext.tsx (1)
useAppContext(43-49)src/hooks/useFetch.ts (1)
useFetch(3-28)src/types/index.ts (1)
CategoryType(16-19)
src/components/CategoryList.tsx (3)
src/contexts/AppContext.tsx (1)
useAppContext(43-49)src/utils/slugify.ts (1)
slugify(1-11)src/hooks/useCategories.tsx (1)
useCategories(8-20)
src/hooks/useLanguages.ts (1)
src/hooks/useFetch.ts (1)
useFetch(3-28)
src/contexts/AppContext.tsx (1)
src/types/index.ts (4)
AppState(41-52)LanguageType(1-8)CategoryType(16-19)SnippetType(21-29)
src/components/SubLanguageSelector.tsx (1)
src/contexts/AppContext.tsx (1)
useAppContext(43-49)
src/components/LanguageSelector.tsx (2)
src/contexts/AppContext.tsx (1)
useAppContext(43-49)src/utils/slugify.ts (1)
slugify(1-11)
🪛 ESLint
src/app/api/snippets/route.ts
[error] 11-11: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
src/app/api/snippets/[language]/[category]/[snippetTitle]/route.ts
[error] 25-25: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
[error] 33-33: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
src/app/api/snippets/search/route.ts
[error] 21-21: 'matchingSnippets' is never reassigned. Use 'const' instead.
(prefer-const)
[error] 21-21: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
src/app/api/snippets/[language]/[category]/route.ts
[error] 23-23: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
src/hooks/useLanguages.ts
[error] 9-9: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
src/components/SubLanguageSelector.tsx
[error] 26-26: 'selectedLanguage' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
[error] 26-26: 'selectedCategory' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
src/components/LanguageSelector.tsx
[error] 24-24: 'selectedLanguage' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
[error] 24-24: 'selectedCategory' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🔇 Additional comments (47)
.github/pull_request_template.md (2)
11-11: Clarify Contribution Types for Snippets
The updated label clearly indicates that the contributor should mark the PR if they are submitting a new snippet or updating an existing one. This change enhances clarity in the contribution process.
12-12: Simplify the "Code Improvement" Option
Updating the label from "Improvement to an existing snippet" to "Code improvement" streamlines the option and broadens its applicability, making it more intuitive for contributors.snippets/javascript/function-utilities/throttle-function.md (1)
1-7: Review of Front Matter MetadataThe front matter is well defined with a clear title, description, author, and tags. This information will help users quickly understand the purpose of the file.
.gitignore (9)
1-2: Informative Header Comment:
The header provides a clear reference to GitHub’s guide on ignored files, which is useful for developers unfamiliar with these patterns.
3-12: Dependencies Section:
This section correctly ignores directories and files related to Node.js and Yarn dependencies. The exceptions (lines 8–11) ensure that critical Yarn subdirectories (patches, plugins, releases, and versions) are retained. This helps manage dependencies effectively in a Next.js environment.
13-14: Testing Artifacts:
Ignoring the/coveragedirectory is appropriate for preventing test output files from being committed. This keeps the repository clean and avoids unnecessary bloat.
16-18: Next.js Build Artifacts:
The entries/next/and/out/effectively ignore Next.js build outputs and exported static files. This is essential to prevent build artifacts from polluting the source control.
20-22: Production Build Directory:
Skipping the/builddirectory ensures that production build files, which are generated, do not get committed. This aligns well with best practices for managing generated content.
23-26: Miscellaneous Files:
Ignoring system-specific files like.DS_Storeand potential sensitive files matching*.pemis a prudent decision. This minimizes the risk of accidental commits of irrelevant or sensitive files.
33-35: Environment Files:
Excluding.env*files is crucial to avoid committing sensitive environment variables. Just ensure that deployment systems and development environments are set up to manage these variables securely.
36-38: Vercel Configuration:
Ignoring the.verceldirectory is appropriate if these configurations are environment-specific. This helps keep local configuration data out of the repository.
39-42: TypeScript Build Artifacts:
The exclusion of*.tsbuildinfoandnext-env.d.tsis standard practice to prevent generated TypeScript artifacts from being tracked. This maintains a cleaner codebase and reduces potential merge conflicts.src/utils/consts.ts (1)
1-1: Import path correctly updated for Next.jsThe import path has been updated from
@typesto@/types, which aligns with Next.js import conventions where@/refers to imports from the root of the src directory.src/components/ThemeToggle.tsx (1)
1-2: "use client" directive correctly addedThe "use client" directive is necessary for this component as it uses browser APIs like
localStorageanddocumentwhich are only available in the client environment. This aligns with Next.js component model where components are server components by default.src/app/page.tsx (1)
1-9: Well-structured home page componentThis is a clean implementation of the Next.js home page component. The file follows Next.js conventions with the default export serving as the page component.
src/app/api/route.ts (1)
1-9: Simple API route implementationThis is a correctly implemented API route using Next.js conventions. The response structure provides a pointer to the documentation.
Please verify that the URL "https://quicksnip.dev/docs" is correct and will be available when this code is deployed. Based on the docs page implementation which states "Will be implemented in the future," this URL might not be active yet.
src/components/Sidebar.tsx (1)
4-11: Clean sidebar component implementationThe sidebar component is well-structured and follows React best practices.
consolidated/_relationships.json (1)
1-8: The relationships structure is well-organizedThis JSON structure provides a clean way to manage language relationships. The hierarchical organization makes it easy to understand and extend.
src/components/Header.tsx (2)
16-17: Good job using Next.js Link componentThe transition from client-side routing to Next.js's Link component is correctly implemented. This is a key part of the migration to Next.js.
27-34: Consider UX impact of removing featuresThe GitHub stars counter has been commented out. While this might be temporary during migration, consider the UX impact of removing features that users might expect.
Are there plans to reinstate the GitHub stars counter and search functionality after the migration? If not, you might want to update the UI design to account for these changes.
src/hooks/useCategories.tsx (2)
1-20: Custom hook implementation looks clean and well-structured.The
useCategorieshook is well-implemented, making good use of React patterns withuseMemoand proper dependency tracking. It correctly fetches categories based on the selected language and processes the data efficiently.
15-17: Good use of useMemo to optimize derived state.Using
useMemohere is appropriate as it prevents unnecessary recalculations of the categories array when the component re-renders for reasons unrelated to the data changing.consolidated/react.json (1)
1-20: File structure follows the expected schema properly.The new JSON file correctly implements the structure expected by the application for language snippets, with appropriate metadata and categorization.
src/components/CodePreview.tsx (1)
8-8: Updated import path correctly follows Next.js convention.Changing from
@utils/slugifyto@/utils/slugifyaligns with Next.js path conventions, where@/refers to the src directory.src/components/Container.tsx (3)
1-4: Import statements simplified for better clarity.The direct imports from local components improve code readability and follow Next.js conventions.
6-6: Simplified component definition removes unnecessary type annotations.Removing the
FC<ContainerProps>type annotation and empty interface simplifies the code without losing any functionality.
14-14:✅ Verification successful
Static category title loses dynamic behavior.
Replacing dynamic category title from context with a static "Select a category" text removes important contextual information for users. The title should reflect the currently selected category to provide proper navigation context.
-<h2 className="section-title">Select a category</h2> +<h2 className="section-title"> + {selectedCategory ? selectedCategory : "Select a category"} +</h2>You'll need to add back the context consumption:
+import { useAppContext } from "@/contexts/AppContext"; const Container = () => { + const { selectedCategory } = useAppContext(); return ( // ...
🏁 Script executed:
#!/bin/bash # Check how selectedCategory is used in the AppContext echo "Checking AppContext implementation:" rg -A 10 "selectedCategory" src/contexts/AppContext.tsxLength of output: 667
Action Required: Restore Dynamic Category Title in Container.tsx
The current implementation uses a static header, which removes essential context from the AppContext. To ensure the title reflects the currently selected category, please update the code as follows:
- In Container.tsx:
- Replace the static header:
-<h2 className="section-title">Select a category</h2> +<h2 className="section-title"> + {selectedCategory ? selectedCategory : "Select a category"} +</h2>- Import and consume the context:
+import { useAppContext } from "@/contexts/AppContext"; const Container = () => { + const { selectedCategory } = useAppContext(); return ( // ...The verification confirms that
selectedCategoryis properly declared within AppContext and available for use. This change will restore the dynamic behavior as it ensures the title reflects the actual category selection.src/app/api/snippets/search/route.ts (1)
9-14: Good validation for missing query parameter.Proper error handling with a clear error message and appropriate 400 status code.
src/components/CategoryList.tsx (3)
1-1: LGTM: "use client" directive correctly placed.Correctly identifies this as a client component for Next.js, allowing the component to use client-side features like hooks and event handlers.
27-41: LGTM: Active category button highlighting.The component correctly identifies and highlights the active category by comparing slugified names.
43-57: Clean implementation of the category list.The component efficiently handles loading and error states, and properly maps over the categories to render list items.
src/hooks/useLanguages.ts (1)
3-6: Good type definition for language information.The
LanguageInfotype clearly defines the structure of language data.src/app/layout.tsx (2)
1-4: LGTM: Good imports for Next.js app.Correctly imports the necessary components and styles for a Next.js application root layout.
10-14: LGTM: Comprehensive metadata.The metadata includes a descriptive title and detailed description, which is good for SEO.
tsconfig.json (1)
1-27: Well-configured TypeScript settings for Next.jsThe TypeScript configuration is properly set up for a Next.js application with appropriate compiler options, including path aliases, JSX support, and module resolution.
src/components/LanguageSelector.tsx (1)
19-19:❌ Incorrect review comment
Next.js router imported but implementation incomplete
The component imports
useRouterfrom next/router but this API is deprecated in newer Next.js versions. Consider using the App Router withuseRouterfrom 'next/navigation' instead.
🌐 Web query:
Is next/router deprecated in Next.js 13+?💡 Result:
Next.js 13 introduced a new App Router alongside the existing Pages Router, leading to changes in routing conventions. The original
next/router(used in the Pages Router) is not fully deprecated but has been replaced in the App Router with updated hooks fromnext/navigation. Here's a breakdown:Key Changes
New App Router Hooks
The App Router (appdirectory) uses these replacements:
useRouter→ Imported fromnext/navigation(notnext/router) [1][3].usePathname→ Replacesrouter.pathname[1][3].useSearchParams→ Replacesrouter.queryfor URL parameters [1][3].Example usage in Client Components:
'use client' import { useRouter, usePathname, useSearchParams } from 'next/navigation'; export default function Example() { const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); // ... }Pages Router Compatibility
next/routerremains valid for applications using the Pages Router (pagesdirectory) [7][9].- Features like
router.events(e.g., route change tracking) are unavailable in the App Router and require workarounds like combiningusePathnameanduseSearchParams[5].Migration Guidance
- To share components between routers, use
next/compat/routerfor backward compatibility [1].- Codemods like
next-image-to-legacy-imagehelp transition existing code [1].Summary
- Not deprecated:
next/routerstill functions in the Pages Router, which Next.js maintains for backward compatibility [9].- App Router changes: New projects using the
appdirectory must adoptnext/navigationhooks. Critical differences include the removal ofpathname,query, and event listeners from the newuseRouter[1][3].- Hybrid approach: Apps can mix
pagesandappdirectories during incremental upgrades [1][2].For existing Pages Router projects, no immediate changes are required. New features and performance optimizations are focused on the App Router, making it the recommended choice for future development [7][10].
Citations:
- 1: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration
- 2: https://dev.to/zenstack/fun-with-nextjs-13-new-routing-system-5gmk
- 3: https://nextjs.org/docs/app/api-reference/functions/use-router
- 4: https://nextjs.org/docs/app/building-your-application/routing
- 5: [Next 13] router.events removed? vercel/next.js#42016
- 6: https://blog.logrocket.com/next-js-13-app-router/
- 7: https://nextjs.org/docs/pages
- 8: https://www.youtube.com/watch?v=vwg4Wrk-kWE
- 9: The Future of Next.js Pages Router vercel/next.js#56655
- 10: https://nextjs.org/docs/app
Clarify how to use Next.js routing based on your project’s structure
After verifying, note that importing
useRouterfrom"next/router"remains valid for projects using the Pages Router in Next.js 13. Although Next.js has introduced a new App Router—where routing hooks are imported from"next/navigation"—the legacynext/routerAPI is not fully deprecated but is instead maintained for backward compatibility.
If you’re using the Pages Router:
Continue usinguseRouterfrom"next/router".If you’re migrating to the App Router:
Update the import to use hooks from"next/navigation", as they offer improved functionality for client components.Please check your project’s routing strategy and update accordingly.
Likely an incorrect or invalid review comment.
consolidated/javascript.json (1)
1-34: New JavaScript snippets file is well-structuredThe new JavaScript snippets file follows a clear and organized structure with language metadata, categories, and well-documented code snippets.
This structure will make it easier to manage and expand the snippet collection as the project grows.
src/contexts/AppContext.tsx (6)
1-1: Next.js directive correctly implementedThe "use client" directive is correctly placed at the top of the file, ensuring this component can be used in client-side rendering contexts in Next.js.
3-4: Imports updated correctlyThe imports have been updated to use the Next.js path alias pattern (
@/) and only include the necessary dependencies.
6-6: Context creation updated with proper typingThe context is now created with a more appropriate default value of
nulland proper type checking.
11-19: State variables renamed for clarityThe state variables have been renamed to be more descriptive (
selectedLanguage,selectedCategory,selectedSnippet) which improves code readability.
27-35: Context value properly structuredThe context value appropriately includes all the state variables and their setters, with proper type assertion.
43-49: Improved error handling in hookThe
useAppContexthook now includes proper error handling to prevent usage outside of anAppProvider, which is a good practice.src/types/index.ts (2)
10-14: Appropriate addition of CategoriesTypeThe addition of the
CategoriesTypeinterface nicely organizes language data with its categories, improving type safety and code clarity.
17-17: Consistent naming with the rename from 'name' to 'categoryName'Renaming from
nametocategoryNameimproves clarity by being more specific about what the property represents.package.json (2)
6-9: Scripts updated appropriately for Next.jsThe scripts section has been properly updated with the standard Next.js commands, which is appropriate for the migration.
15-15:❓ Verification inconclusive
Verify the React Syntax Highlighter version
There was a past discussion about downgrading react-syntax-highlighter due to an
npm audit fix. Consider reviewing if the current version (15.6.1) is appropriate for security and compatibility with the new stack.
🏁 Script executed:
#!/bin/bash # Check for security advisories in react-syntax-highlighter echo "Checking for known vulnerabilities in react-syntax-highlighter:" npm audit --json | jq '.vulnerabilities | select(. != null) | .["react-syntax-highlighter"]' # Check compatibility with React version echo "Checking peer dependencies of react-syntax-highlighter:" npm info react-syntax-highlighter peerDependenciesLength of output: 763
Action Required: Verify React Syntax Highlighter Version for Security & Compatibility
- File: package.json (Line 15)
- Current version:
"react-syntax-highlighter": "^15.6.1"- Security Audit Findings:
- A moderate severity vulnerability was detected in react-syntax-highlighter (affecting versions ≥6.0.0).
- A fix is available that downgrades the package to version
"5.8.0". Note that this change is semver-major and may impact functionality.- Compatibility Check:
- The peer dependency on React (
>= 0.14.0) is satisfied with the current configuration.Please review whether the downgrade to version 5.8.0 is a viable option given its potential for breaking changes, or if the current version should be maintained with an appropriate risk mitigation strategy.
| .readdirSync(snippetsPath) | ||
| .filter((file) => file !== "_relationships.json"); // Exclude relationships.json; | ||
|
|
||
| let allSnippets: any[] = []; |
There was a problem hiding this comment.
Define proper types instead of using 'any'
Using any[] type reduces type safety and was flagged by ESLint. Define a proper interface for your snippets to improve type checking and documentation.
- let allSnippets: any[] = [];
+ interface Snippet {
+ title: string;
+ code: string;
+ language: string;
+ category: string;
+ // Add other relevant properties
+ }
+
+ let allSnippets: Snippet[] = [];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| let allSnippets: any[] = []; | |
| interface Snippet { | |
| title: string; | |
| code: string; | |
| language: string; | |
| category: string; | |
| // Add other relevant properties | |
| } | |
| let allSnippets: Snippet[] = []; |
🧰 Tools
🪛 ESLint
[error] 11-11: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
| export async function GET() { | ||
| const snippetsPath = path.join(process.cwd(), "consolidated"); | ||
| const files = fs | ||
| .readdirSync(snippetsPath) | ||
| .filter((file) => file !== "_relationships.json"); // Exclude relationships.json; | ||
|
|
||
| let allSnippets: any[] = []; | ||
|
|
||
| for (const file of files) { | ||
| const filePath = path.join(snippetsPath, file); | ||
| const data = JSON.parse(fs.readFileSync(filePath, "utf8")); | ||
| allSnippets = allSnippets.concat(data); | ||
| } | ||
|
|
||
| return NextResponse.json(allSnippets); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use async file operations and add error handling
The current implementation uses synchronous file operations (readdirSync, readFileSync) which can block the Node.js event loop during API requests. For a production-ready API endpoint, consider using async alternatives.
export async function GET() {
const snippetsPath = path.join(process.cwd(), "consolidated");
- const files = fs
- .readdirSync(snippetsPath)
- .filter((file) => file !== "_relationships.json"); // Exclude relationships.json;
+ try {
+ const files = await fs.promises.readdir(snippetsPath);
+ const filteredFiles = files.filter((file) => file !== "_relationships.json"); // Exclude relationships.json
- let allSnippets: any[] = [];
+ let allSnippets = [];
- for (const file of files) {
- const filePath = path.join(snippetsPath, file);
- const data = JSON.parse(fs.readFileSync(filePath, "utf8"));
- allSnippets = allSnippets.concat(data);
- }
+ const snippetPromises = filteredFiles.map(async (file) => {
+ const filePath = path.join(snippetsPath, file);
+ const content = await fs.promises.readFile(filePath, "utf8");
+ return JSON.parse(content);
+ });
+
+ const snippetArrays = await Promise.all(snippetPromises);
+ const allSnippets = snippetArrays.flat();
- return NextResponse.json(allSnippets);
+ return NextResponse.json(allSnippets);
+ } catch (error) {
+ console.error("Error fetching snippets:", error);
+ return NextResponse.json({ error: "Failed to fetch snippets" }, { status: 500 });
+ }
}Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 ESLint
[error] 11-11: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
| export async function GET( | ||
| req: Request, | ||
| { params }: { params: { language: string } } | ||
| ) { | ||
| const { language } = params; | ||
| const filePath = path.join( | ||
| process.cwd(), | ||
| "consolidated", | ||
| `${slugify(language)}.json` | ||
| ); | ||
|
|
||
| if (!fs.existsSync(filePath)) { | ||
| return NextResponse.json({ error: "Language not found" }, { status: 404 }); | ||
| } | ||
|
|
||
| const data = JSON.parse(fs.readFileSync(filePath, "utf8")); | ||
| return NextResponse.json(data); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use async file operations and improve error handling
Similar to the main snippets route, this implementation uses synchronous file operations which can block the Node.js event loop. Additionally, the error handling could be more comprehensive.
export async function GET(
req: Request,
{ params }: { params: { language: string } }
) {
const { language } = params;
const filePath = path.join(
process.cwd(),
"consolidated",
`${slugify(language)}.json`
);
- if (!fs.existsSync(filePath)) {
- return NextResponse.json({ error: "Language not found" }, { status: 404 });
- }
-
- const data = JSON.parse(fs.readFileSync(filePath, "utf8"));
- return NextResponse.json(data);
+ try {
+ // Check if file exists using fs.promises.access
+ try {
+ await fs.promises.access(filePath, fs.constants.F_OK);
+ } catch (error) {
+ return NextResponse.json({ error: "Language not found" }, { status: 404 });
+ }
+
+ const content = await fs.promises.readFile(filePath, "utf8");
+ const data = JSON.parse(content);
+ return NextResponse.json(data);
+ } catch (error) {
+ console.error(`Error fetching snippets for language ${language}:`, error);
+ return NextResponse.json({ error: "Failed to fetch snippets" }, { status: 500 });
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export async function GET( | |
| req: Request, | |
| { params }: { params: { language: string } } | |
| ) { | |
| const { language } = params; | |
| const filePath = path.join( | |
| process.cwd(), | |
| "consolidated", | |
| `${slugify(language)}.json` | |
| ); | |
| if (!fs.existsSync(filePath)) { | |
| return NextResponse.json({ error: "Language not found" }, { status: 404 }); | |
| } | |
| const data = JSON.parse(fs.readFileSync(filePath, "utf8")); | |
| return NextResponse.json(data); | |
| } | |
| export async function GET( | |
| req: Request, | |
| { params }: { params: { language: string } } | |
| ) { | |
| const { language } = params; | |
| const filePath = path.join( | |
| process.cwd(), | |
| "consolidated", | |
| `${slugify(language)}.json` | |
| ); | |
| try { | |
| // Check if file exists using fs.promises.access | |
| try { | |
| await fs.promises.access(filePath, fs.constants.F_OK); | |
| } catch (error) { | |
| return NextResponse.json({ error: "Language not found" }, { status: 404 }); | |
| } | |
| const content = await fs.promises.readFile(filePath, "utf8"); | |
| const data = JSON.parse(content); | |
| return NextResponse.json(data); | |
| } catch (error) { | |
| console.error(`Error fetching snippets for language ${language}:`, error); | |
| return NextResponse.json({ error: "Failed to fetch snippets" }, { status: 500 }); | |
| } | |
| } |
| "author": "ACR1209", | ||
| "tags": ["printing", "hello-world"], | ||
| "contributors": [], | ||
| "code": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n return (\n <div>\n <h1>Hello, World!</h1>\n </div>\n );\n};\n\nReactDOM.render(<App />, document.getElementById('root'));\n", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Update React rendering code to use modern API.
The code snippet uses the deprecated ReactDOM.render() method which has been replaced in React 18 with createRoot.
-"code": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n return (\n <div>\n <h1>Hello, World!</h1>\n </div>\n );\n};\n\nReactDOM.render(<App />, document.getElementById('root'));\n",
+"code": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst App = () => {\n return (\n <div>\n <h1>Hello, World!</h1>\n </div>\n );\n};\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render(<App />);\n",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "code": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n return (\n <div>\n <h1>Hello, World!</h1>\n </div>\n );\n};\n\nReactDOM.render(<App />, document.getElementById('root'));\n", | |
| "code": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst App = () => {\n return (\n <div>\n <h1>Hello, World!</h1>\n </div>\n );\n};\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render(<App />);\n", |
| // import CopyToClipboard from "./CopyToClipboard"; | ||
| // import CopyURLButton from "./CopyURLButton"; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Removal of copy functionality impacts user experience.
Commenting out the CopyToClipboard and CopyURLButton components removes essential functionality that users expect when viewing code snippets. Users won't be able to easily copy code examples, which significantly degrades the user experience.
-// import CopyToClipboard from "./CopyToClipboard";
-// import CopyURLButton from "./CopyURLButton";
+import CopyToClipboard from "./CopyToClipboard";
+import CopyURLButton from "./CopyURLButton";
// And in the component:
<div className="code-preview__buttons">
- {/* <CopyToClipboard text={code} />
- <CopyURLButton /> */}
+ <CopyToClipboard text={code} />
+ <CopyURLButton />
</div>If these components aren't yet migrated to Next.js, this should be prioritized as a critical task in the migration process.
Also applies to: 45-46
🏁 Script executed:
#!/bin/bash
# Check if the CopyToClipboard and CopyURLButton components exist in the new structure
echo "Checking for clipboard components in the codebase:"
fd -e tsx -e ts "Copy(ToClipboard|URLButton)" src/ --exec echo "Found: {}"Length of output: 187
Critical: Clipboard Functionality Missing in CodePreview
Our investigation indicates that the CopyToClipboard and CopyURLButton components are not present in the current codebase. Removing these components means that users cannot copy code snippets—a key interaction that significantly impacts the user experience. If these components have not yet been migrated to Next.js, please prioritize their porting or reimplementation. Review the following locations and diff snippet:
- File:
src/components/CodePreview.tsx(Lines 10-11 and 45-46)- Action: Reintegrate or implement the clipboard functionality.
- Suggested Diff:
-// import CopyToClipboard from "./CopyToClipboard"; -// import CopyURLButton from "./CopyURLButton"; +import CopyToClipboard from "./CopyToClipboard"; +import CopyURLButton from "./CopyURLButton"; // Further down in the component: <div className="code-preview__buttons"> - {/* <CopyToClipboard text={code} /> - <CopyURLButton /> */} + <CopyToClipboard text={code} /> + <CopyURLButton /> </div>
Please confirm whether this functionality should be maintained in the migration or if an alternative approach has been planned.
| selectedCategory: CategoryType; | ||
| setSelectedCategory: React.Dispatch< | ||
| React.SetStateAction<CategoryType | null> | ||
| >; |
There was a problem hiding this comment.
Type inconsistency between selectedCategory and its setter
The selectedCategory is defined as non-nullable (CategoryType), but its setter accepts CategoryType | null. This inconsistency could lead to runtime errors if null values are introduced.
- selectedCategory: CategoryType;
+ selectedCategory: CategoryType | null;
setSelectedCategory: React.Dispatch<
React.SetStateAction<CategoryType | null>
>;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| selectedCategory: CategoryType; | |
| setSelectedCategory: React.Dispatch< | |
| React.SetStateAction<CategoryType | null> | |
| >; | |
| selectedCategory: CategoryType | null; | |
| setSelectedCategory: React.Dispatch< | |
| React.SetStateAction<CategoryType | null> | |
| >; |
| export type AppState = { | ||
| language: LanguageType; | ||
| subLanguage: LanguageType["name"]; | ||
| category: string; | ||
| snippet: SnippetType | null; | ||
| setSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>; | ||
| selectedLanguage: LanguageType; | ||
| setSelectedLanguage: React.Dispatch<React.SetStateAction<SnippetType | null>>; | ||
| selectedCategory: CategoryType; | ||
| setSelectedCategory: React.Dispatch< | ||
| React.SetStateAction<CategoryType | null> | ||
| >; | ||
| selectedSnippet: SnippetType | null; | ||
| setSelectedSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>; | ||
| searchText: string; | ||
| setSearchText: React.Dispatch<React.SetStateAction<string>>; | ||
| }; |
There was a problem hiding this comment.
Missing React import
The file uses React types (React.Dispatch, React.SetStateAction) but doesn't import React. Add an import statement to ensure type availability.
+ import { type Dispatch, type SetStateAction } from 'react';
export type LanguageType = {
// ...existing code
};
// Later in the file:
export type AppState = {
selectedLanguage: LanguageType;
- setSelectedLanguage: React.Dispatch<React.SetStateAction<SnippetType | null>>;
+ setSelectedLanguage: Dispatch<SetStateAction<LanguageType | null>>;
// ...other changes as needed
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export type AppState = { | |
| language: LanguageType; | |
| subLanguage: LanguageType["name"]; | |
| category: string; | |
| snippet: SnippetType | null; | |
| setSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>; | |
| selectedLanguage: LanguageType; | |
| setSelectedLanguage: React.Dispatch<React.SetStateAction<SnippetType | null>>; | |
| selectedCategory: CategoryType; | |
| setSelectedCategory: React.Dispatch< | |
| React.SetStateAction<CategoryType | null> | |
| >; | |
| selectedSnippet: SnippetType | null; | |
| setSelectedSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>; | |
| searchText: string; | |
| setSearchText: React.Dispatch<React.SetStateAction<string>>; | |
| }; | |
| import { type Dispatch, type SetStateAction } from 'react'; | |
| export type LanguageType = { | |
| // ...existing code | |
| }; | |
| export type AppState = { | |
| selectedLanguage: LanguageType; | |
| setSelectedLanguage: Dispatch<SetStateAction<LanguageType | null>>; | |
| selectedCategory: CategoryType; | |
| setSelectedCategory: React.Dispatch<React.SetStateAction<CategoryType | null>>; | |
| selectedSnippet: SnippetType | null; | |
| setSelectedSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>; | |
| searchText: string; | |
| setSearchText: React.Dispatch<React.SetStateAction<string>>; | |
| }; |
| "next": "15.2.2", | ||
| "react": "^19.0.0", | ||
| "react-dom": "^19.0.0", |
There was a problem hiding this comment.
Future versions of Next.js and React
The package specifies Next.js 15.2.2 and React 19.0.0, which don't exist yet. The current stable versions are Next.js 14.x and React 18.x. This could cause installation failures.
- "next": "15.2.2",
- "react": "^19.0.0",
- "react-dom": "^19.0.0",
+ "next": "14.1.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "next": "15.2.2", | |
| "react": "^19.0.0", | |
| "react-dom": "^19.0.0", | |
| "next": "14.1.0", | |
| "react": "^18.2.0", | |
| "react-dom": "^18.2.0", |
| "vite-tsconfig-paths": "^5.1.4", | ||
| "vitest": "^2.1.8" | ||
| "eslint": "^9", | ||
| "eslint-config-next": "15.2.2", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Align eslint-config-next version with next version
The eslint-config-next version should match the next version for compatibility.
- "eslint-config-next": "15.2.2",
+ "eslint-config-next": "14.1.0",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "eslint-config-next": "15.2.2", | |
| "eslint-config-next": "14.1.0", |
| "vite": "^5.4.8", | ||
| "vite-tsconfig-paths": "^5.1.4", | ||
| "vitest": "^2.1.8" | ||
| "eslint": "^9", |
There was a problem hiding this comment.
Future ESLint version
ESLint 9 doesn't exist yet. The current stable version is ESLint 8.x.
- "eslint": "^9",
+ "eslint": "^8.57.0",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "eslint": "^9", | |
| "eslint": "^8.57.0", |
Description
We are migrating to NextJS before implementing the authentication and database storage system for each users. It will help us in the long term as QuickSnip starts to evolve.
Type of Change
Checklist
This is the initial draft, we will be making a lot of changes here. And, initial commit can have quite some errors until we fully and successfully migrate.
Related Issues
Closes #
Additional Context
Used this resource as a guide for migration from React Vite to NextJS: https://nextjs.org/docs/app/building-your-application/upgrading/from-vite
Screenshots (Optional)
Click to view screenshots
Summary by CodeRabbit
New Features
Chores