19.2 - Add behaviours using React Hooks and React Context

src/App.js

@@ -1,8 +1,14 @@
 import React from 'react';
-import Panel from './components/Panel.js';
+
+import { Provider } from './components/EnterpriseContext';
+import Panel from './components/Panel';
 
 function App() {
-  return (<Panel />);
+  return (
+    <Provider>
+      <Panel />
+    </Provider>
+  );
 }
 
 export default App;

src/components/EnterpriseContext.js

@@ -0,0 +1,90 @@
+import React, { createContext, useState } from 'react';
+
+const EnterpriseContext = createContext();
+
+const EnterpriseProvider = ({ children }) => {
+  const [energyGauge, setEnergyGauge] = useState(0);
+  const [warpSpeed, setWarpSpeed] = useState(false);
+  const [weaponsLevel, setWeaponsLevel] = useState(0);
+  const [weaponsEnabled, setWeaponsEnabled] = useState(true);
+  const [shieldsOnline, setShieldsOnline] = useState(false);
+
+  const engageWarpSpeed = () => {
+    if (warpSpeed || shieldsOnline || weaponsEnabled || energyGauge > 2) return undefined;
+
+    setWarpSpeed(true);
+    setEnergyGauge((curretEnergyGauge) => curretEnergyGauge + 2);
+  };
+
+  const disengageWarpSpeed = () => {
+    if (!warpSpeed) return undefined;
+
+    setWarpSpeed(false);
+    setEnergyGauge((curretEnergyGauge) => curretEnergyGauge - 2);
+  };
+
+  const weaponsOffline = () => {
+    if (warpSpeed || !weaponsEnabled) return undefined;
+
+    setWeaponsEnabled(false);
+    setWeaponsLevel(0);
+    setEnergyGauge((curretEnergyGauge) => curretEnergyGauge - weaponsLevel);
+  };
+
+  const weaponsOnline = () => {
+    if (warpSpeed || weaponsEnabled) return undefined;
+
+    setWeaponsEnabled(true);
+  };
+
+  const increaseFirepower = () => {
+    if (warpSpeed || weaponsLevel === 3 || energyGauge === 4 || !weaponsEnabled)
+      return undefined;
+
+    setEnergyGauge((curretEnergyGauge) => curretEnergyGauge + 1);
+    setWeaponsLevel((currentWeaponsLevel) => currentWeaponsLevel + 1);
+  };
+
+  const decreaseFirepower = () => {
+    if (warpSpeed || weaponsLevel === 0 || energyGauge === 0 || !weaponsEnabled) return undefined;
+
+    setEnergyGauge((curretEnergyGauge) => curretEnergyGauge - 1);
+    setWeaponsLevel((currentWeaponsLevel) => currentWeaponsLevel - 1);
+  };
+
+  const raiseShields = () => {
+    if (warpSpeed || shieldsOnline || energyGauge > 2) return undefined;
+
+    setShieldsOnline(true);
+    setEnergyGauge((curretEnergyGauge) => curretEnergyGauge + 2);
+  };
+
+  const lowerShields = () => {
+    if (!shieldsOnline || energyGauge === 0) return undefined;
+
+    setEnergyGauge((curretEnergyGauge) => curretEnergyGauge - 2);
+    setShieldsOnline(false);
+  };
+
+  const context = {
+    energyGauge,
+    warpSpeed,
+    weaponsOffline,
+    weaponsOnline,
+    weaponsLevel,
+    weaponsEnabled,
+    shieldsOnline,
+    engageWarpSpeed,
+    disengageWarpSpeed,
+    increaseFirepower,
+    decreaseFirepower,
+    raiseShields,
+    lowerShields,
+  };
+
+  return (
+    <EnterpriseContext.Provider value={context}>{children}</EnterpriseContext.Provider>
+  );
+};
+
+export { EnterpriseContext, EnterpriseProvider as Provider };

src/components/Panel.js

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { EnterpriseContext } from './EnterpriseContext';
 import './Panel.css';
 
 import WarpDrive from './WarpDrive';
 import WeaponsBay from './WeaponsBay';
 import ShieldGenerator from './ShieldGenerator';
 
 function Panel() {
+  const { energyGauge } = useContext(EnterpriseContext);
+
   return (
     <div className="complete-panel">
-      <span className="energy-gauge">Energia em utilização: PLACEHOLDER</span>
+      <span className="energy-gauge">Energia em utilização: {energyGauge}</span>
       <div className="interactions-panel">
         <WarpDrive />
         <WeaponsBay />

src/components/ShieldGenerator.js

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { EnterpriseContext } from './EnterpriseContext';
 
 import './Panel.css';
 
 export default function ShieldGenerator() {
+  const { shieldsOnline, raiseShields, lowerShields } = useContext(EnterpriseContext);
+
   return (
     <div className="panel">
       <span>Escudos</span>
-      <div className={`alert-light`} />
-        <button onClick={() => alert('clicou')}>
-        {`PLACEHOLDER`} escudos
+      <div className={`alert-light ${shieldsOnline ? 'green-light' : 'red-light'}`} />
+      <button onClick={shieldsOnline ? lowerShields : raiseShields}>
+        {`${shieldsOnline ? 'Baixar' : 'Erguer'}`} escudos
       </button>
     </div>
   );

src/components/WarpDrive.js

@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { EnterpriseContext } from './EnterpriseContext';
 
 import './Panel.css';
 
 export default function WarpDrive() {
+  const { warpSpeed, engageWarpSpeed, disengageWarpSpeed } = useContext(
+    EnterpriseContext,
+  );
+
   return (
     <div className="panel">
       <span>Motor de Dobra</span>
-      <div className={`alert-light`} />
-        <button onClick={() => alert('clicou')}>
-        {`PLACEHOLDER`} velocidade de dobra
+      <div className={`alert-light ${warpSpeed ? 'green-light' : 'red-light'}`} />
+      <button onClick={warpSpeed ? disengageWarpSpeed : engageWarpSpeed}>
+        {`${warpSpeed ? 'Desengajar' : 'Engajar'}`} velocidade de dobra
       </button>
       <span>Armas e escudos devem estar desligados</span>
     </div>

src/components/WeaponsBay.js

@@ -1,18 +1,28 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { EnterpriseContext } from './EnterpriseContext';
 
 import './Panel.css';
 
 export default function WeaponsBay() {
+  const {
+    weaponsOffline,
+    weaponsOnline,
+    weaponsLevel,
+    weaponsEnabled,
+    increaseFirepower,
+    decreaseFirepower,
+  } = useContext(EnterpriseContext);
+
   return (
     <div className="panel">
       <span>Armas</span>
-      <div className={`alert-light`} />
-      <button onClick={() => alert('clicou')}>
-        {`PLACEHOLDER`} armas
+      <div className={`alert-light ${weaponsEnabled ? 'green-light' : 'red-light'}`} />
+      <button onClick={weaponsEnabled ? weaponsOffline : weaponsOnline}>
+        {`${weaponsEnabled ? 'Desabilitar' : 'Habilitar'}`} armas
       </button>
-      <span>Nível das armas: PLACEHOLDER</span>
-        <button onClick={() => alert('clicou')}>Aumentar poder de fogo</button>
-      <button onClick={() => alert('clicou')}>Diminuir poder de fogo</button>
+      <span>Nível das armas: {weaponsLevel}</span>
+      <button onClick={increaseFirepower}>Aumentar poder de fogo</button>
+      <button onClick={decreaseFirepower}>Diminuir poder de fogo</button>
       <span>Nível máximo: 3</span>
     </div>
   );