Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add basic search functionality #34

Closed
wants to merge 7 commits into from
Closed

Add basic search functionality #34

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7c572c2
Add basic search functionality
GreenMan36 Dec 30, 2024
3474894
Move browser router to app.tsx
GreenMan36 Dec 30, 2024
b91a02f
Consolidated snippet and search snippet list
GreenMan36 Dec 30, 2024
6a44981
Add description to snippetlist and limit title & desc to 1 line
GreenMan36 Dec 30, 2024
53be0bd
Remove straggler issue template file
GreenMan36 Dec 30, 2024
7031525
Refactor useSnippets with feedback and more
GreenMan36 Dec 31, 2024
5edc1b1
Add less history spammy but scuffed search
GreenMan36 Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Routes, Route } from "react-router-dom";
import { Routes, Route, BrowserRouter } from "react-router-dom";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react-router-dom is not used anywhere in the project, it was just added in package.json. So I think, it will be better to use the latest version.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure where you're seeing it being added to the package.json. react-router-dom was part of the initial commit.
If you wish to have the dependencies updated, I recommend making a new PR for it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you update it in your PR ?

Copy link
Collaborator

@saminjay saminjay Dec 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was added in the initial commit, but its not being used anywhere. Its just there.
Since you are using it in this PR, you can just make it like its being added for the first time and update it to the latest version.

import Header from "./layouts/Header";
import Banner from "./layouts/Banner";
import Footer from "./layouts/Footer";
Expand All @@ -8,15 +8,17 @@ import SearchPage from "./pages/SearchPage.tsx";
const App = () => {
return (
<div className="container flow">
<Header />
<Banner />
<main className="main">
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/search" element={<SearchPage />} />
</Routes>
</main>
<Footer />
<BrowserRouter>
<Header />
<Banner />
<main className="main">
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/search" element={<SearchPage />} />
</Routes>
</main>
<Footer />
</BrowserRouter>
</div>
);
};
Expand Down
64 changes: 0 additions & 64 deletions src/components/SearchSnippetList.tsx
View file
Open in desktop
Mathys-Gasnier marked this conversation as resolved.
Outdated Show resolved Hide resolved

This file was deleted.

27 changes: 16 additions & 11 deletions src/components/SnippetList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import { useState } from "react";
import { useState, useMemo } from "react";
import { SnippetType } from "../types";
import { useAppContext } from "../contexts/AppContext";
import { useSnippets } from "../hooks/useSnippets";

import SnippetModal from "./SnippetModal";
import { LeftAngleArrowIcon } from "./Icons";

const SnippetList = () => {
const SnippetList = ({ query }: { query?: string | null }) => {
const { language, snippet, setSnippet } = useAppContext();
const { fetchedSnippets } = useSnippets();
const { fetchedSnippets, loading } = useSnippets();
const [isModalOpen, setIsModalOpen] = useState(false);

if (!fetchedSnippets)
return (
<div>
<LeftAngleArrowIcon />
</div>
const filteredSnippets = useMemo(() => {
if (!query) return fetchedSnippets;
return fetchedSnippets.filter((snippet) =>
snippet.title.toLowerCase().includes(query.toLowerCase())
);
}, [fetchedSnippets, query]);

if (loading) return <div>Loading...</div>;
if (!filteredSnippets || filteredSnippets.length === 0)
return <div>No results found for "{query}"</div>;

const handleOpenModal = (activeSnippet: SnippetType) => {
setIsModalOpen(true);
Expand All @@ -31,7 +34,7 @@ const SnippetList = () => {
return (
<>
<ul role="list" className="snippets">
{fetchedSnippets.map((snippet, idx) => (
{filteredSnippets.map((snippet, idx) => (
<li key={idx}>
<button
className="snippet | flow"
Expand All @@ -41,8 +44,10 @@ const SnippetList = () => {
<div className="snippet__preview">
<img src={language.icon} alt={language.lang} />
</div>

<h3 className="snippet__title">{snippet.title}</h3>
{query && (
Mathys-Gasnier marked this conversation as resolved.
Show resolved Hide resolved
<p className="snippet__description">{snippet.description}</p>
)}
</button>
</li>
))}
Expand Down
9 changes: 3 additions & 6 deletions src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@ import { createRoot } from "react-dom/client";
import "./styles/main.css";
import App from "./App";
import { AppProvider } from "./contexts/AppContext";
import { BrowserRouter } from "react-router-dom";

createRoot(document.getElementById("root")!).render(
<StrictMode>
<BrowserRouter>
<AppProvider>
<App />
</AppProvider>
</BrowserRouter>
<AppProvider>
<App />
</AppProvider>
</StrictMode>
);
4 changes: 2 additions & 2 deletions src/pages/SearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useSearchParams } from "react-router-dom";
import SearchSnippetList from "../components/SearchSnippetList";
import SnippetList from "../components/SnippetList";
import Sidebar from "../layouts/Sidebar";

const SearchPage = () => {
Expand All @@ -11,7 +11,7 @@ const SearchPage = () => {
<Sidebar />
<section className="flow">
<h2 className="section-title">Search Results for: {query}</h2>
<SearchSnippetList query={query} />
<SnippetList query={query} />
</section>
</>
);
Expand Down