React: Spread operators (…) aplikācijas kods Restorānam

Spread operators ir viens no stilīgākajiem JavaScript valodas papildinājumiem. Paldies Spread operatoram, ko attēlo trīs punkti (…). Parastās darbības, kurām iepriekš bija nepieciešams nedaudz vairāk koda, piemēram, objekta vai masīva klonēšana, tagad ir daudz vienkāršākas. Tātad šajā rakstā jūs uzzināsiet, kā izmantot izkliedes, jeb Spread operatoru un objektus, kā izplatīt vietējos rekvizītus DOM komponentiem. Kā izstrādāt elastīgus komponentus un brīdinājumus, izmantojot izkliedes operatoru.

Iedomāsimies, ka veidojam vienkāršu papildinājumu kāda restorāna React aplikācijai un mūsu uzdevums ir piešķirt iespēju klientam mainīt savu pasūtījumu ar noteiktu izvēlni un iespējām. Tātad aplikācijas izstrādē izmantosim jau iepriekš pieminēto Spread operatoru piešķirot šai lietotnei papildus interaktivitāti.

Kā React izmanto Spread operatoru?

React izmanto spred operatoru ( … ), lai ātri kopētu esošā masīva vai objekta daļu vai visu saturu citā masīvā vai objektā Spred operatoru bieži izmanto kombinācijā ar destrukturizāciju. Piemēram, varat izmantot spred operatoru, lai apvienotu divus objektus 

React kontekstā spred operatoru var izmantot, lai izplatītu propertiju objektu uz elementu React komponentē, padarot vieglāku propertiju nodošanu bērnu komponentēm 

Tātad sāksim ar vienkāršas React aplikācijas piemēru, kas ļauj mainīt klientam pasūtījumu restorānā:

import React, { useState } from 'react';

const App = () => {
const [order, setOrder] = useState({
mainCourse: 'Steiks',
sideDish: 'Kartupeļu biezenis',
drink: 'Ūdens'
});

const updateOrder = () => {
setOrder({
...order,
drink: 'Alus'
});
}

return (
<div>
<h1>Pasūtījums</h1>
<p>Galvenais ēdiens: {order.mainCourse}</p>
<p>Blakus ēdiens: {order.sideDish}</p>
<p>Dzēriens: {order.drink}</p>
<button onClick={updateOrder}>Mainīt dzērienu</button>
</div>
);
}

export default App;

Šajā piemērā mēs izmantojam spread operatoru, lai atjauninātu order stāvokli ar jaunu drink vērtību. Lietotājs var noklikšķināt uz pogas “Mainīt dzērienu”, lai mainītu pasūtījuma dzērienu no “Ūdens” uz “Alus”.

Papildināsim aplikāciju ar papildus iespēju pievienojot tai “dropdown” izvēlni, kuru izmantojot klients varēs izvēlēties mainīt savu pasūtījumu uz vairākām no piedāvātajām versijām:

import React, { useState } from 'react';

const App = () => {
const [order, setOrder] = useState({
mainCourse: 'Steiks',
sideDish: 'Kartupeļu biezenis',
drink: 'Ūdens'
});

const drinks = ['Ūdens', 'Alus', 'Sula', 'Vīns'];

const updateOrder = (event) => {
setOrder({
...order,
drink: event.target.value
});
}

return (
<div>
<h1>Pasūtījums</h1>
<p>Galvenais ēdiens: {order.mainCourse}</p>
<p>Blakus ēdiens: {order.sideDish}</p>
<p>Dzēriens:
<select value={order.drink} onChange={updateOrder}>
{drinks.map(drink => (
<option key={drink} value={drink}>{drink}</option>
))}
</select>
</p>
</div>
);
}

export default App;

Šajā uzlabotajā piemērā mēs esam pievienojuši dropdown izvēlni ar dažādiem dzērienu variantiem. Lietotājs var izvēlēties dzērienu no dropdown izvēlnes un tas automātiski atjauninās pasūtījuma stāvokli ar jauno drink vērtību.

Tālāk pievienosim pogu ar kuru iespējams apstiprināt pasūtījuma maiņu, lai saņemtu no klienta apzinātu apstiprinājumu un uzlabot aplikācijas lietošanas pieredzi, kā arī novērstu nevajadzīgas nejaušības.

import React, { useState } from 'react';

const App = () => {
const [order, setOrder] = useState({
mainCourse: 'Steiks',
sideDish: 'Kartupeļu biezenis',
drink: 'Ūdens'
});

const [selectedDrink, setSelectedDrink] = useState(order.drink);

const drinks = ['Ūdens', 'Alus', 'Sula', 'Vīns'];

const handleDrinkChange = (event) => {
setSelectedDrink(event.target.value);
}

const updateOrder = () => {
setOrder({
...order,
drink: selectedDrink
});
}

return (
<div>
<h1>Pasūtījums</h1>
<p>Galvenais ēdiens: {order.mainCourse}</p>
<p>Blakus ēdiens: {order.sideDish}</p>
<p>Dzēriens:
<select value={selectedDrink} onChange={handleDrinkChange}>
{drinks.map(drink => (
<option key={drink} value={drink}>{drink}</option>
))}
</select>
</p>
<button onClick={updateOrder}>Apstiprināt pasūtījuma maiņu</button>
</div>
);
}

export default App;

Šajā uzlabotajā piemērā mēs esam pievienojuši pēcapstrādes stāvokli selectedDrink, lai saglabātu lietotāja izvēlēto dzērienu no dropdown izvēlnes. Mēs arī esam pievienojuši pogu “Apstiprināt pasūtījuma maiņu”, kas atjauninās pasūtījuma stāvokli ar jauno drink vērtību, kad lietotājs noklikšķina uz tās.

Tālāk varam papildināt mūsu aplikāciju ar vēl kādu uzlabojumu – lai nodrošinātos no tā, ka klients maina un apstiprina pasūtījumus vairākas reizes pēc kārtas radot apjukumu un neērtības restorāna personālam. Tātad tagad pēc pogas “Apstiprināt pasūtījuma maiņu” nospiešanas  dropdown izvēlne un apstiprinajuma poga kļūst neaktīvas un pasūtījums skaitās kā pieņemts un galīgs. Turklāt klientam tiek parādīts paziņojums par apstiprināto pasūtījumu.

import React, { useState } from 'react';

const App = () => {
const [order, setOrder] = useState({
mainCourse: 'Steiks',
sideDish: 'Kartupeļu biezenis',
drink: 'Ūdens'
});

const [selectedDrink, setSelectedDrink] = useState(order.drink);
const [isOrderConfirmed, setIsOrderConfirmed] = useState(false);

const drinks = ['Ūdens', 'Alus', 'Sula', 'Vīns'];

const handleDrinkChange = (event) => {
setSelectedDrink(event.target.value);
}

const updateOrder = () => {
setOrder({
...order,
drink: selectedDrink
});
setIsOrderConfirmed(true);
}

return (
<div>
<h1>Pasūtījums</h1>
<p>Galvenais ēdiens: {order.mainCourse}</p>
<p>Blakus ēdiens: {order.sideDish}</p>
<p>Dzēriens:
<select value={selectedDrink} onChange={handleDrinkChange} disabled={isOrderConfirmed}>
{drinks.map(drink => (
<option key={drink} value={drink}>{drink}</option>
))}
</select>
</p>
<button onClick={updateOrder} disabled={isOrderConfirmed}>Apstiprināt pasūtījuma maiņu</button>
{isOrderConfirmed && <p>Jūsu pasūtījums ir apstiprināts. Izvēlētais dzēriens: {order.drink}</p>}
</div>
);
}

export default App;

Šajā uzlabotajā piemērā mēs esam pievienojuši pēcapstrādes stāvokli isOrderConfirmed, lai saglabātu pasūtījuma apstiprināšanas statusu. Kad lietotājs noklikšķina uz pogas “Apstiprināt pasūtījuma maiņu”, isOrderConfirmed stāvoklis tiek iestatīts uz true, kas deaktivizē dropdown izvēlni un pogu. Pasūtījuma sarakstā arī parādās teksts ar izvēlēto dzērienu.

Pievienosim aplikācijai pasūtījuma maiņas iespējas laika ierobežojumu, lai klientam tiktu ierobežots laiks pasūtījuma maiņai. Piemērā esmu izvēlējies 30 sekunžu ierobežojumu, ko protams iespējams arī palielināt pēc nepieciešamības. Tātad klientam dotais laiks pasūtījuma maiņai ir 30 sekundes un pēc šīm 30 sekundēm aplikācija deaktivizēs “dropdown” izvēlni un pasūtījuma apstiprinājuma pogu, bet spēkā paliks tas pasūtījums, kurš pašlaik attēlots. Kad paiet noteiktais laiks klientam arī tiek parādīts ziņojums par apstiprināto pasūtījumu.

import React, { useState, useEffect } from 'react';

const App = () => {
const [order, setOrder] = useState({
mainCourse: 'Steiks',
sideDish: 'Kartupeļu biezenis',
drink: 'Ūdens'
});

const [selectedDrink, setSelectedDrink] = useState(order.drink);
const [isOrderConfirmed, setIsOrderConfirmed] = useState(false);
const [timeLeft, setTimeLeft] = useState(30);

const drinks = ['Ūdens', 'Alus', 'Sula', 'Vīns'];

useEffect(() => {
if (timeLeft > 0) {
const timerId = setTimeout(() => {
setTimeLeft(timeLeft - 1);
}, 1000);
return () => clearTimeout(timerId);
} else {
setIsOrderConfirmed(true);
}
}, [timeLeft]);

const handleDrinkChange = (event) => {
setSelectedDrink(event.target.value);
}

const updateOrder = () => {
setOrder({
...order,
drink: selectedDrink
});
setIsOrderConfirmed(true);
}

return (
<div>
<h1>Pasūtījums</h1>
<p>Galvenais ēdiens: {order.mainCourse}</p>
<p>Blakus ēdiens: {order.sideDish}</p>
<p>Dzēriens:
<select value={selectedDrink} onChange={handleDrinkChange} disabled={isOrderConfirmed}>
{drinks.map(drink => (
<option key={drink} value={drink}>{drink}</option>
))}
</select>
</p>
<button onClick={updateOrder} disabled={isOrderConfirmed}>Apstiprināt pasūtījuma maiņu</button>
{!isOrderConfirmed && <p>Jums ir {timeLeft} sekundes, lai mainītu pasūtījumu.</p>}
{isOrderConfirmed && <p>Jūsu pasūtījums ir apstiprināts. Izvēlētais dzēriens: {order.drink}</p>}
</div>
);
}

export default App;

Šajā uzlabotajā piemērā mēs esam pievienojuši pēcapstrādes stāvokli timeLeft, lai saglabātu atlikušo laiku pasūtījuma maiņai. Mēs izmantojam useEffect āķi, lai samazinātu timeLeft vērtību ik pēc sekundes un deaktivizētu dropdown izvēlni un pogu pēc tam, kad timeLeft sasniedz 0. Pasūtījuma sarakstā arī parādās teksts ar atlikušo laiku pasūtījuma maiņai.

Tas arī viss, atliek vien mūsu aplikācijai piešķirt nepieciešamo dizainu un papildus ineraktivitāte ir gatava.

lai piešķirtu aplikācijai raksta attēlā redzamo izskatu es uzlaboju kodu šādi piešķirot nepieciešamo klašu nosaukumus “className” kas nepieciešami, lai CSS atpazītu tās koda daļas kurām viņam piešķirt attiecīgo izskatu:

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [order, setOrder] = useState({
    mainCourse: 'Steiks',
    sideDish: 'Kartupeļu biezenis',
    drink: 'Ūdens'
  });

  const [selectedDrink, setSelectedDrink] = useState(order.drink);
  const [isOrderConfirmed, setIsOrderConfirmed] = useState(false);
  const [timeLeft, setTimeLeft] = useState(30);

  const drinks = ['Ūdens', 'Alus', 'Sula', 'Vīns'];

  useEffect(() => {
    if (timeLeft > 0) {
      const timerId = setTimeout(() => {
        setTimeLeft(timeLeft - 1);
      }, 1000);
      return () => clearTimeout(timerId);
    } else {
      setIsOrderConfirmed(true);
    }
  }, [timeLeft]);

  const handleDrinkChange = (event) => {
    setSelectedDrink(event.target.value);
  }

  const updateOrder = () => {
    setOrder({
      ...order,
      drink: selectedDrink
    });
    setIsOrderConfirmed(true);
  }

  return (
    <div className="container">
      <h1>Pasūtījums</h1>
      <p>Galvenais ēdiens: {order.mainCourse}</p>
      <p className="item">Blakus ēdiens: {order.sideDish}</p>
<p className="item">Dzēriens:
<select value={selectedDrink} onChange={handleDrinkChange} disabled={isOrderConfirmed}>
{drinks.map(drink => (
<option key={drink} value={drink}>{drink}</option>
))}
</select>
</p>
<button className="button" onClick={updateOrder} disabled={isOrderConfirmed}>Apstiprināt pasūtījuma maiņu</button>
{!isOrderConfirmed && <p>Jums ir {timeLeft} sekundes, lai mainītu pasūtījumu.</p>}
{isOrderConfirmed && <p className="item">Jūsu pasūtījums ir apstiprināts. Izvēlētais dzēriens: {order.drink}</p>}
</div>
);
}

export default App;

App.css kods:

.container {
  background-color: #FFDAB9; /* pasteļtoņa fons */
  border-radius: 45px; /* noapaļotie stūri */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); /* ēnojums */
  padding: 20px; /* polsterējums */
  display:grid;
  flex-direction: column;
  align-items: center;
  border: 3px solid #080404; /* borta līnija */
}

h1 {
  font-size: 2.5em;
  color: #CD5C5C; /* spilgtāks teksts */
  margin-bottom: 20px;
  text-shadow: 2px 2px #F4A460; /* teksta ēnojums */
}

p {
  font-size: 1.2em;
  color: #696969; /* pasteļtoņa teksts */
  margin-bottom: 10px;
  text-shadow: 1px 1px #F4A460; /* teksta ēnojums */
}

select {
  padding: 5px;
  border: none;
  border-radius: 5px;
  margin-left: 10px;
  font-size: 1.2em;
  color: #CD5C5C; /* spilgtāks teksts */
  background-color: #FFE4E1; /* pasteļtoņa fons */
}

button {
  padding: 10px 20px;
  background-color: #CD5C5C; /* spilgtāks poga */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.2em;
  margin-top: 20px;
  text-shadow: 1px 1px #F4A460; /* teksta ēnojums */
}

button:disabled {
  background-color: #D3D3D3; /* pasteļtoņa poga izslēgta stāvoklī */
  color: #A9A9A9;
}

Gala iznākums aplikācijai kad pasūtījums tiek izvēlēts un kad pasūtījums ir apstiprināts:

 

Loading

Noderīgs raksts? Dalies ar citiem: