Skip to content

144_Search function not found and translation page #162

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

Open
ArturLabenskyy wants to merge 6 commits into
base: main
Choose a base branch
from
Open

144_Search function not found and translation page #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
761fe54
search functionality work in progress
ArturLabenskyy Jun 22, 2023
fc48d40
commit before branch change
ArturLabenskyy Jun 25, 2023
68aa4b9
commit before pull
ArturLabenskyy Jun 25, 2023
d080cb7
search functionality done
ArturLabenskyy Jun 25, 2023
7530bb1
commit before branch change
ArturLabenskyy Jun 25, 2023
a70f57e
not-found and translate page search functionality
ArturLabenskyy Jun 25, 2023
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
30 changes: 15 additions & 15 deletions client/src/api/searchsliceApi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import store from '../Redux/store';
import store from "../Redux/store";

const searchsliceapi = createApi({
reducerPath: "searchsliceapi",
baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:5000/api/v1" }),
endpoints: (builder) => ({
search: builder.mutation({
query: (searchTerm) => {
const state = store.getState();
const targetLanguage = state.languageSelect;
return {
url: "/search",
method: "POST",
body: { searchTerm, targetLanguage },
};
},
reducerPath: "searchsliceapi",
baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:5000/api/v1" }),
endpoints: (builder) => ({
search: builder.mutation({
query: (searchTerm) => {
const state = store.getState();
const targetLanguage = state.languageSelect;
return {
url: "/search",
method: "POST",
body: { searchTerm, targetLanguage },
};
},
}),
}),
}),
});

export const { useSearchMutation } = searchsliceapi;
Expand Down
54 changes: 41 additions & 13 deletions client/src/components/SearchBar/SearchBar.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,44 @@
import { useState } from 'react'
import { useState } from "react";
import { useDispatch } from "react-redux";
import { setResults } from "../../Redux/searchResultsSlice";
import { useSearchMutation } from "../../api/searchsliceApi";
import { useNavigate } from "react-router-dom";

import Wrapped from './SearchBar.styled'
import Wrapped from "./SearchBar.styled";

const SearchBar = () => {
const [inputText, setInputText] = useState('')
const [isInputError, setInputError] = useState(false)
const [inputText, setInputText] = useState("");
const [inputError, setInputError] = useState("");
const [searchMutation] = useSearchMutation();
const dispatch = useDispatch();
const navigate = useNavigate();

const inputHandler = (e) => {
setInputText(e.target.value)
}
setInputText(e.target.value);
};

const sendSearchRequest = async () => {
if (!inputText) {
setInputError("Please insert text in English, Hebrew, or Arabic");
return;
}

try {
const results = await searchMutation(inputText);
if (
results.data.artists.length === 0 &&
results.data.songs.length === 0
) {
navigate("/not-found");
} else {
dispatch(setResults(results.data));
setInputError("");
navigate("/results");
}
} catch (error) {
console.error("Search error:", error);
}
};

return (
<Wrapped>
Expand All @@ -18,7 +48,7 @@ const SearchBar = () => {
className="search-input"
onChange={(e) => inputHandler(e)}
/>
<button className="search-button">
<button className="search-button" onClick={sendSearchRequest}>
<svg
width="18"
height="18"
Expand All @@ -34,11 +64,9 @@ const SearchBar = () => {
</svg>
</button>
</div>
<p className="error-message">
Please insert text in English, Hebrew or Arabic
</p>
{inputError && <p className="error-message">{inputError}</p>}
</Wrapped>
)
}
);
};

export default SearchBar
export default SearchBar;
186 changes: 119 additions & 67 deletions client/src/pages/SearchResults/SearchResults.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,128 @@ import ResultsCard from "../../components/ResultsCard/ResultsCard";
import FE from "../../components/Layout/FlexElments";
import SC from "./SearchRes.style";
import { useSelector } from "react-redux";
import { useTranslation } from 'react-i18next';
import { useTranslation } from "react-i18next";

const SearchResults = ({ songs, artists }) => {
const searchResults = useSelector((state) => state.searchResults.results);
const foundSongs = searchResults?.songs;
const foundArtists = searchResults?.artists;
const { t } = useTranslation();
return (
<FE.Col style={{ height: "100dvh" }}>
<FE.CenterCol>
<Header />
<Tagline />
</FE.CenterCol>
<FE.CenterCol style={{ flexGrow: 0.5 }}>
<HomeSearchBar />
</FE.CenterCol>
<FE.CenterCol style={{ flexGrow: 6 }}>
<SC.Title>Artists</SC.Title>
{artists &&
artists.map((artist) => {
return (
<ResultsCard
key={artist.id}
img={artist.img}
titles={artist.titles}
/>
);
})}
<SC.Title>Songs</SC.Title>
{songs &&
songs.map((song) => {
return (
<ResultsCard
key={song.id}
img={song.img}
languages={{
target: song.languages.target,
origin: song.languages.origin,
}}
titles={song.titles}
/>
);
})}
</FE.CenterCol>
</FE.Col>
);
const searchResults = useSelector((state) => state.searchResults.results);
const foundSongs = searchResults?.songs;
const foundArtists = searchResults?.artists;
const { t } = useTranslation();

return (
<FE.Col style={{ height: "100dvh" }}>
<FE.CenterCol>
<Header />
<Tagline />
</FE.CenterCol>
<FE.CenterCol style={{ flexGrow: 1 }}>
<HomeSearchBar />
</FE.CenterCol>
<FE.CenterCol style={{ flexGrow: 6 }}>;
{
foundArtists.length > 0 && <div>
<SC.Title>{t("Artists")}</SC.Title>
{foundArtists &&
foundArtists.map((artist) => {
const titles = [];
for (const lang in artist.name) {
if (Object.hasOwnProperty.call(artist.name, lang)) {
const langName = artist.name[lang];
titles.push(langName);
}
}
return (
<ResultsCard
key={artist.id}
imgURL={artist.imgURL}
titles={titles}
/>
);
})}
</div>
}
{
foundSongs.length > 0 && <div style={{ width: "100%" }}>
<SC.Title>{t("Songs")}</SC.Title>
{foundSongs &&
foundSongs.map((song) => {
const titles = [];
for (const lang in song.name) {
if (Object.hasOwnProperty.call(song.name, lang)) {
const langName = song.name[lang];
titles.push(langName);
}
}
return (
<ResultsCard
key={song.id}
imgURL={song.imgURL}
languages={{
origin: song.originalLang,
target: song.originalLang === 'AR' ? "HE" : "AR",
}}
titles={titles}
/>
);
})}

</div>
}
</FE.CenterCol >
</FE.Col >
);
return (
<FE.Col style={{ height: "100dvh" }}>
<FE.CenterCol>
<Header />
<Tagline />
</FE.CenterCol>
<FE.CenterCol style={{ flexGrow: 1 }}>
<HomeSearchBar />
</FE.CenterCol>
<FE.CenterCol style={{ flexGrow: 6 }}>
;
{foundArtists.length > 0 && (
<div>
<SC.Title>{t("Artists")}</SC.Title>
{foundArtists &&
foundArtists.map((artist) => {
const titles = [];
for (const lang in artist.name) {
if (
Object.hasOwnProperty.call(
artist.name,
lang
)
) {
const langName = artist.name[lang];
titles.push(langName);
}
}
return (
<ResultsCard
key={artist.id}
imgURL={artist.imgURL}
titles={titles}
/>
);
})}
</div>
)}
{foundSongs.length > 0 && (
<div style={{ width: "100%" }}>
<SC.Title>{t("Songs")}</SC.Title>
{foundSongs &&
foundSongs.map((song) => {
const titles = [];
for (const lang in song.name) {
if (
Object.hasOwnProperty.call(
song.name,
lang
)
) {
const langName = song.name[lang];
titles.push(langName);
}
}
return (
<ResultsCard
key={song.id}
imgURL={song.imgURL}
languages={{
origin: song.originalLang,
target:
song.originalLang === "AR"
? "HE"
: "AR",
}}
titles={titles}
/>
);
})}
</div>
)}
</FE.CenterCol>
</FE.Col>
);
};

export default SearchResults;
40 changes: 20 additions & 20 deletions server/config/db.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
import mongoose from "mongoose";

const connectDB = async () => {
if (
process.env.NODE_ENV !== "production" &&
process.env.NODE_ENV !== "development"
) {
throw new Error("Invalid NODE_ENV specified");
}
try {
const mongoURI =
process.env.NODE_ENV === "production"
? process.env.MONGO_URI_PROD
: process.env.MONGO_URI_DEV;
if (
process.env.NODE_ENV !== "production" &&
process.env.NODE_ENV !== "development"
) {
throw new Error("Invalid NODE_ENV specified");
}
try {
const mongoURI =
process.env.NODE_ENV === "production"
? process.env.MONGO_URI_PROD
: process.env.MONGO_URI_DEV;

const conn = await mongoose.connect(mongoURI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
console.log(`Mongo Connected: ${conn.connection.host}`);
} catch (error) {
console.error(`${error}`);
}
const conn = await mongoose.connect(mongoURI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
console.log(`Mongo Connected: ${conn.connection.host}`);
} catch (error) {
console.error(`${error}`);
}
};

const closeDBConnection = () => {
mongoose.connection.close();
mongoose.connection.close();
};

export { connectDB, closeDBConnection };