From b5828134a9916fa6455a1c0c475fb15391dda934 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Mon, 8 May 2023 20:32:50 +1000
Subject: [PATCH] create form using states instead of formik

formik (or any other form framework) doesn't support setting field value programmatically. filter form uses 2 fields that are triggered by clicking a button, and that's the reason there's no other workaround. probably needs a rewrite
---
 .../src/pages/IndexPage/index.jsx             | 66 +++++++++----------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx
index 422118e..721f83d 100644
--- a/pairent_frontend_react/src/pages/IndexPage/index.jsx
+++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Scrollbar, Navigation } from 'swiper/core';
 import ISVGIcon from '../../components/UI/Icon/SVGIcon';
-import { Formik, Field, Form } from 'formik';
 
 import styled from 'styled-components';
 import 'swiper/css';
@@ -113,47 +112,44 @@ const FiltersForm = () => {
         per_month: false
     };
 
+    const [ state, setState ] = useState(def_form);
+
     const submitted = (a) => {
         console.log(a);
     }
 
     return (
-        <Formik
-            initialValues={def_form}
-            onSubmit={async (values) => {
-                console.log(values);
-            }}
-            >
-            <Form>
-                <Filters>
-                    <FilterText>Фильтры</FilterText>
-                    
-                    <PeriodFilter>
-                        <PeriodButton>
-                            <SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
-                            Посуточно
-                        </PeriodButton>
-                        <PeriodButton>
-                            <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
-                            Ежемесячно
-                        </PeriodButton>
-                        <ClearButton>
-                            <SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
-                            Сбросить
-                        </ClearButton>
-                    </PeriodFilter>
+        <Filters>
+            <FilterText>Фильтры</FilterText>
+            
+            <PeriodFilter>
+                <PeriodButton
+                    active={state.per_day}
+                    onClick={() => setState({per_day: !state.per_day})}>
+                    <SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
+                    Посуточно
+                </PeriodButton>
+                <PeriodButton
+                    active={state.per_month}
+                    onClick={() => setState({per_month: !state.per_month})}>
+                    <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
+                    Ежемесячно
+                </PeriodButton>
+                <ClearButton>
+                    <SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
+                    Сбросить
+                </ClearButton>
+            </PeriodFilter>
 
-                    <SearchBarFilter>
-                        asbvccxcz
-                    </SearchBarFilter>
+            <SearchBarFilter>
+                asbvccxcz
+            </SearchBarFilter>
 
-                    <SubmitBtn type='submit'>
-                        <SVGIcon src='/images/icons/search.svg' width='14' height='14' />
-                        Показать варианты
-                    </SubmitBtn>
-                </Filters>
-            </Form>
-        </Formik>
+            <SubmitBtn type='submit'>
+                <SVGIcon src='/images/icons/search.svg' width='14' height='14' />
+                Показать варианты
+            </SubmitBtn>
+        </Filters>
     );
 }