fix: Naprawiono bład w formularzu (#120)

Co-authored-by: Michał Miszczyszyn <mmiszy@users.noreply.github.com> Co-authored-by: Adam Siekierski <a@siekierski.ml>
typeofweb-org · Jan 7, 2021 · bbf171c · bbf171c
1 parent 05992f8
commit bbf171c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/components/UpdateBlogSection/UpdateBlogForm.tsx b/components/UpdateBlogSection/UpdateBlogForm.tsx
@@ -28,6 +28,10 @@ export const UpdateBlogForm = memo<Props>(({ blogId }) => {
   const [isValid, setIsValid] = useState(false);
   const formRef = useRef<HTMLFormElement | null>(null);
 
+  useEffect(() => {
+    setIsValid(formRef.current?.checkValidity() ?? false);
+  }, [fields]);
+
   useEffect(() => {
     if (queryStatus === 'success' && blog) {
       setFields(blog);
@@ -36,7 +40,6 @@ export const UpdateBlogForm = memo<Props>(({ blogId }) => {
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(({ currentTarget }) => {
     setFields((fields) => ({ ...fields, [currentTarget.name]: currentTarget.value }));
-    setIsValid(formRef.current?.checkValidity() ?? false);
   }, []);
 
   const handleInputCheckboxChange: ChangeEventHandler<HTMLInputElement> = useCallback(

diff --git a/components/UpdateBlogSection/updateBlogForm.module.scss b/components/UpdateBlogSection/updateBlogForm.module.scss
@@ -41,6 +41,11 @@
     display: flex;
     margin-right: 0.75rem;
   }
+
+  &:read-only {
+    background-color: var(--reddish-white);
+    border: 1px solid var(--reddish-white);
+  }
 }
 
 .submitButton {

diff --git a/global.scss b/global.scss
@@ -9,6 +9,7 @@
   --gray-text: #757575;
   --gray-dark-border: #999999;
   --white: #ffffff;
+  --reddish-white: #faf9f8;
   --black: #000000;
   --black-lighter: #{lighten(#000000, 20%)};
   --error-color: #f16262;