Changes between Version 1 and Version 2 of UseCaseImplementations

Timestamp:

02/03/24 18:43:44 (10 months ago)

Author:

211012

Comment:

--

UseCaseImplementations

@@ -60 +60 @@
 - catch сегментот се извршува кога одговорот на барањето е со статус 4ХХ, односно грешка, па во овој случај корисникот се пренасочува до страница со грешка
 - finally сегментот се извршува во секој случај, односно означува дека комуникацијата е завршена, вратен е одговор од серверот, па тука се поставува знаменцето isLoading назад на false
+
+==== usePost
+{{{#!javascript
+import axios from "../../axios";
+
+const useCreate = () => {
+
+    const createEntity = async (url, entity, getData) => {
+        console.log(entity)
+        await axios
+            .post(url, null, {
+                params: entity,
+            })
+            .then((res) => {
+                getData(prev => ++prev)
+            })
+            .catch((err) => {
+                console.log(err);
+            })
+            .finally(() => {
+            });
+    }
+
+    return {
+        createEntity
+    };
+
+}
+
+export default useCreate;
+}}}
+Овој Hook го користиме за POST барања кон серверската страна. Од него постојат неколку модифицирани верзии во зависоност од тоа дали парамтерите се испраќаат во телото на барањето, како URL параметри или како променливи во патеката, но во основа се работи за иста имплементација. За разлика од useGet, тука, URL-то се испраќа како аргумент на функцијата, заедно со податоците кои треба да се испратат како параметри и состојбата на зависната променлива за која зборувавме во претходната компонент. Откако ќе се испрати POST, se враќа Promise со кој соодветно се справуваме на горенаведениот начин, со единствна разлика што во then сегментот, кога статусот означува успех, ја менуваме состојбата на зависната променлива за да се ререндерираат зависните компоненти.
+==== useFormData
+{{{#!javascript
+import { useState } from 'react';
+
+const useFormData = (editData) => {
+  const [formData, setData] = useState({ ...editData });
+
+  const onFormChange = (e) => {
+    setData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const onCheckBoxChange = (e) => {
+    setData((prevData) => ({
+        ...prevData,
+        [e.target.name]: !prevData[e.target.name],
+    }));
+  }
+
+  const setFormData = (newData) => {
+    setData({...newData});
+  }
+  return {
+    formData,
+    onFormChange,
+    onCheckBoxChange,
+    setFormData
+  };
+};
+
+export default useFormData;
+}}}
+Во секој формулар каде што имаме кориснички влез потребно е да се справиме со него и да го проследиме до серверот во утврдената форма. Ова може да се постигне на стариот добар начин, со користење на концептот useState од React и посебна состојба за секое од input полињата. За да го поедноставиме ова, успешно имплементиравме општа функција за справување со корисничкиот влез која работи на следниот начин. Наместо посебни состојби за секое поле, чуваме состојба на еден објект, каде клучот е соодветно name атрибутот на полето, а вредноста е неговиот value. За процесирање на текстуалните полиња, при промена на вредноста одговорна е функцијата onFormChange, каде се менува состојбата на записот од објектот кој е засегнат според name атрибутот. Оваа функција се извршува на секој onChange настан испален од било која input компонента. onCheckBoxChange е ништо повеќе од специјална имплементација на onFormChange функцијата за checkbox input. Како и во претходно наведените Hook-и, и тука, референци до функциите и состојбите кои треба да бидат пристапени од другите компоненти се враќаат од функцијата.