Merge pull request #313 from AndreWohnsland/dev

Add virgin only search option to v2

Author: AndreWohnsland

web_client/README.md

@@ -1,50 +1,19 @@
-# React + TypeScript + Vite
+# CocktailBerry Web Client
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is the frontend for the CocktailBerry, using Vite, React, and TypeScript.
 
-Currently, two official plugins are available:
+## Getting Started
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+Install the dependencies (you could also use npm instead of yarn):
 
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+```bash
+yarn install
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+## Running the Development Server
 
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
+To start the development server, run:
 
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+```bash
+yarn dev
 ```

web_client/src/components/cocktail/CocktailList.tsx

@@ -17,7 +17,8 @@ const CocktailList: React.FC = () => {
   const { data: cocktails, error, isLoading } = useCocktails(true, config.MAKER_MAX_HAND_INGREDIENTS || 0);
   const [selectedCocktail, setSelectedCocktail] = useState<Cocktail | null>(null);
   const [singleIngredientOpen, setSingleIngredientOpen] = useState(false);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState<string | null>(null);
+  const [showOnlyVirginPossible, setShowOnlyVirginPossible] = useState(false);
   const { t } = useTranslation();
 
   if (isLoading) return <LoadingData />;
@@ -31,6 +32,10 @@ const CocktailList: React.FC = () => {
     setSelectedCocktail(null);
   };
 
+  const handleHideToggle = () => {
+    setShowOnlyVirginPossible(!showOnlyVirginPossible);
+  };
+
   let displayedCocktails = cocktails;
   if (search) {
     displayedCocktails = displayedCocktails?.filter(
@@ -39,10 +44,27 @@ const CocktailList: React.FC = () => {
         cocktail.ingredients.some((ingredient) => ingredient.name.toLowerCase().includes(search.toLowerCase())),
     );
   }
+  if (search !== null && showOnlyVirginPossible) {
+    displayedCocktails = displayedCocktails?.filter((cocktail) => cocktail.virgin_available);
+    displayedCocktails = displayedCocktails?.map((cocktail) => {
+      return { ...cocktail, only_virgin: true };
+    });
+  }
+
+  const virginToggleButton = (
+    <button
+      onClick={handleHideToggle}
+      className={`flex items-center justify-center p-2 !border pointer-events-auto ${
+        showOnlyVirginPossible ? 'button-secondary' : 'button-primary'
+      }`}
+    >
+      <MdNoDrinks size={20} />
+    </button>
+  );
 
   return (
     <div className='px-2 centered max-w-7xl'>
-      <SearchBar search={search} setSearch={setSearch}></SearchBar>
+      <SearchBar search={search} setSearch={setSearch} afterInput={virginToggleButton} />
       <div className='flex flex-wrap gap-3 justify-center items-center w-full mb-4'>
         {displayedCocktails
           ?.sort((a, b) => a.name.localeCompare(b.name))

web_client/src/components/common/SearchBar.tsx

@@ -3,19 +3,22 @@ import { useTranslation } from 'react-i18next';
 import { FaEraser, FaSearch } from 'react-icons/fa';
 
 interface SearchBarProps {
-  search: string;
-  setSearch: (value: string) => void;
+  search: string | null;
+  setSearch: (value: string | null) => void;
+  afterInput?: React.ReactNode;
 }
-
-const SearchBar: React.FC<SearchBarProps> = ({ search, setSearch }) => {
-  const [savedSearch, setSavedSearch] = React.useState(search);
+// note: the internal search should never be null, but we communicate to external component with null
+// if the search is hidden. This is to know externally if the search is shown or not, and should be applied.
+const SearchBar: React.FC<SearchBarProps> = ({ search, setSearch, afterInput }) => {
+  const [savedSearch, setSavedSearch] = React.useState<string>(search ?? '');
   const [showSearch, setShowSearch] = React.useState(false);
   const { t } = useTranslation();
 
   const handleHideToggle = () => {
+    // it is currently shown, so need to save the search value and hide it
     if (showSearch) {
-      setSavedSearch(search);
-      setSearch('');
+      setSavedSearch(search ?? '');
+      setSearch(null);
     } else {
       setSearch(savedSearch);
     }
@@ -28,7 +31,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ search, setSearch }) => {
       <input
         type='text'
         placeholder={t('search')}
-        value={search}
+        value={search ?? ''}
         onChange={(e) => setSearch(e.target.value)}
         className='input-base mr-1 w-full p-3 max-w-sm'
         hidden={!showSearch}
@@ -41,6 +44,11 @@ const SearchBar: React.FC<SearchBarProps> = ({ search, setSearch }) => {
           <FaEraser size={20} />
         </button>
       </div>
+      {afterInput && (
+        <div hidden={!showSearch} className='mr-1'>
+          {afterInput}
+        </div>
+      )}
       <button
         onClick={handleHideToggle}
         className='button-primary flex items-center justify-center p-2 !border pointer-events-auto'

web_client/src/components/ingredient/IngredientList.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 const IngredientList: React.FC = () => {
   const { data: ingredients, isLoading, error, refetch } = useIngredients();
   const [selectedIngredient, setSelectedIngredient] = useState<IngredientInput | null>(null);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState<string | null>(null);
   const { t } = useTranslation();
 
   if (isLoading) return <LoadingData />;

web_client/src/components/recipe/RecipeList.tsx

@@ -25,7 +25,7 @@ const RecipeList: React.FC = () => {
   const [selectedCocktail, setSelectedCocktail] = useState<CocktailInput | null>(null);
   const { data: ingredients, isLoading: ingredientsLoading, error: ingredientsError } = useIngredients();
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState<string | null>(null);
   const { t } = useTranslation();
 
   if (isLoading || ingredientsLoading) return <LoadingData />;