From 5c3c74b32e49adf630cdb496c3bff96d4e9a3cd5 Mon Sep 17 00:00:00 2001 From: Anika Raemer Date: Sun, 14 Sep 2025 14:24:35 +0200 Subject: [PATCH 1/2] fix search field behavior --- frontend/src/App.css | 10 +++++----- .../src/components/basics/SearchField.tsx | 20 +++++++++++-------- .../src/components/recipes/RecipeListItem.tsx | 2 +- .../src/components/recipes/RecipeListPage.tsx | 2 +- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 79dc4f9..0877dae 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -28,6 +28,10 @@ @apply font-semibold mb-2 mt-4; } + .label { + @apply text-gray-600 + } + /* buttons */ .primary-button { @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap @@ -41,15 +45,11 @@ @apply bg-gray-600 hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap } - /* input field */ + /* input fields like input and textarea */ .input-field { @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-600 transition-colors text-gray-600 focus:outline-none focus:border-blue-800; } - .text-area { - @apply border p-2 w-full mb-2 rounded placeholder-gray-400; - } - /* groups */ .button-group{ @apply flex gap-4 mt-4; diff --git a/frontend/src/components/basics/SearchField.tsx b/frontend/src/components/basics/SearchField.tsx index acce6a7..3f60b41 100644 --- a/frontend/src/components/basics/SearchField.tsx +++ b/frontend/src/components/basics/SearchField.tsx @@ -1,8 +1,9 @@ +import { useState } from "react"; + /** * Custom search field component including a clear search functionality */ type SearchFieldProps = { - searchString : string onSearchStringChanged: (searchString : string) => void } @@ -10,10 +11,13 @@ type SearchFieldProps = { * @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler * @returns Custom search field component */ -export default function SearchField({searchString, onSearchStringChanged} : SearchFieldProps){ - const setSearchString = (newSearchString : string) => { - searchString = newSearchString; - onSearchStringChanged(searchString) +export default function SearchField({onSearchStringChanged} : SearchFieldProps){ + const [currentSearchString, setCurrentSearchString] = useState("") + + const changeSearchString = (newSearchString : string) => { + console.log(newSearchString); + setCurrentSearchString(newSearchString); + onSearchStringChanged(newSearchString) } return ( @@ -26,15 +30,15 @@ export default function SearchField({searchString, onSearchStringChanged} : Sear className="input-field pl-10 pr-10" type="text" placeholder="Search" - value={searchString} - onChange={ e => setSearchString(e.target.value) } + value={currentSearchString} + onChange={ e => changeSearchString(e.target.value) } /> {/* Right icon: X Clears search string on click */} +
+ {/* Label: left-aligned on medium+ screens, full-width on small screens */} +
+ +
+ + {/* Search + Add button container: right-aligned on medium+ screens */} +
+
+ +
+ +
{/*Content - List of recipe cards */} @@ -74,3 +78,38 @@ export default function RecipeListPage() { ) } + + // /*Container spanning entire screen used to center content horizontally */ + //
+ // {/* Container defining the maximum width of the content */} + //
+ // {/* Header - remains in position when scrolling */} + //
+ //

Recipes

+ //
+ // {/* Number of recipes inlist */} + // + // {/* Search field */} + // + // {/* Add recipe button */} + // + //
+ //
+ // {/*Content - List of recipe cards */} + //
+ // {recipeList.map((recipe) => ( + // + // ))} + //
+ //
+ //
diff --git a/frontend/src/config/api.ts b/frontend/src/config/api.ts index ccbd753..c342688 100644 --- a/frontend/src/config/api.ts +++ b/frontend/src/config/api.ts @@ -1,4 +1,5 @@ /** * Backend URL */ -export const API_BASE_URL = "http://localhost:4000" \ No newline at end of file +//export const API_BASE_URL = "http://localhost:4000" +export const API_BASE_URL = "http://10.0.1.152:4000" diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index ea1889a..d4c343b 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,6 +1,13 @@ -import { defineConfig } from "vite" +import { defineConfig, loadEnv } from "vite" import react from "@vitejs/plugin-react" -export default defineConfig({ - plugins: [react()], +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd(), "") + return { + plugins: [react()], + server: { + host: env.VITE_HOST || "localhost", + port: Number(env.VITE_PORT) || 5173, + }, + } })