update

first-app/package-lock.json

@@ -8,9 +8,11 @@
       "name": "first-app",
       "version": "0.0.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^1.9.5",
         "antd": "^5.6.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-redux": "^8.1.1",
         "react-router-dom": "^6.13.0"
       },
       "devDependencies": {
@@ -1138,6 +1140,29 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
+      "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
+      "dependencies": {
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.3.tgz",
@@ -1146,6 +1171,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -1155,14 +1189,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
       "version": "18.2.13",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.13.tgz",
       "integrity": "sha512-vJ+zElvi/Zn9cVXB5slX2xL8PZodPCwPRDpittQdw43JR2AJ5k3vKdgJJyneV/cYgIbLQUwXa9JVDvUZXGba+Q==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1173,7 +1205,7 @@
       "version": "18.2.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.6.tgz",
       "integrity": "sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1181,8 +1213,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.0",
@@ -1190,6 +1221,11 @@
       "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==",
       "dev": true
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.60.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.0.tgz",
@@ -2353,6 +2389,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2362,6 +2406,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3447,6 +3500,49 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-redux": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.1.tgz",
+      "integrity": "sha512-5W0QaKtEhj+3bC0Nj0NkqkhIv8gLADH/2kYFMTHxCVqQILiWzLv6MaLuV5wJU3BQEdHKzTfcvPN0WMS6SC1oyA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4 || ^5.0.0-beta.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -3486,11 +3582,32 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -3840,6 +3957,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "4.3.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",

first-app/package.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "antd": "^5.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.1.1",
     "react-router-dom": "^6.13.0"
   },
   "devDependencies": {

first-app/src/App.tsx

@@ -3,10 +3,13 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import './App.css'
+import { NotificationProvider } from "./context/NotificationContext";
 
 //pages
 import PageBase from "./pages/PageBase/PageBase";
 import NewCliente from "./pages/Cliente/NewCliente";
+import { notification } from "antd";
+import { IconType } from "antd/es/notification/interface";
 
 const router = createBrowserRouter([
   {
@@ -24,9 +27,22 @@ const router = createBrowserRouter([
 
 function App() {
 
+  const [api, contextHolder] = notification.useNotification();
+
+   const openNotification = (message:string, description:string, type:IconType) => {
+    api.open({
+      type:type, 
+      message: message,
+      description: description,
+    });
+  };
+  
   return (
   <div className='App'>
+    <NotificationProvider value={{openNotification}} >
+      {contextHolder}
       <RouterProvider router={router}/>
+      </NotificationProvider>
   </div>
   )
 }

first-app/src/components/ClienteForm.tsx

@@ -1,30 +1,45 @@
 import { Button, Form, Input, Select } from 'antd';
 import styles from '../pages/Cliente/Cliente.module.css';
 import { useEffect } from 'react';
+import { 
+  getAllPaises
+ } from '../slices/ClienteSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { Cliente } from '../interfaces/Cliente';
 
 export interface FormClienteProps {
-  values?: any,
+  values?: Cliente,
   btnTitle: string,
   eventEmiter: any
 }
 
 function ClienteForm(props: FormClienteProps) {
+  const {paises} = useSelector((state:any)=>state.cliente);
+  const dispatch = useDispatch<any>();
 
   const onFinish = (values: any) => {
-    props.eventEmiter(values);
+    const cliente:Cliente = {
+      nome:values.nome,
+      email:values.email,
+      telefone:values.telefone,
+      pais:{
+        uid:values.pais,
+        nome:''
+      }
+    }
+    props.eventEmiter(cliente);
   };
 
   const onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo);
+     console.log('Failed:', errorInfo);
   };
 
   useEffect(() => {
-    //TO DO
-    //GET ALL COUNTRIES FOR SHOW IN SELECT ELEMENT 
-  }, [])
-
+     dispatch(getAllPaises()) 
+  }, []);
 
   return (
+    <>
     <Form
       className={styles.form_cliente}
       name="basic"
@@ -67,11 +82,11 @@ function ClienteForm(props: FormClienteProps) {
         rules={[{ required: true, message: 'É obrigatorio informar o pais!' }]}
       >
         <Select
-          options={[
-            { value: 'jack', label: 'Jack' },
-            { value: 'lucy', label: 'Lucy' },
-            { value: 'Yiminghe', label: 'yiminghe' },
-          ]}
+          options={
+            paises.map((cliente:any)=>(
+              {value:cliente.uid,label:cliente.nome}
+            ))
+          }
         />
       </Form.Item>
 
@@ -81,6 +96,7 @@ function ClienteForm(props: FormClienteProps) {
         </Button>
       </Form.Item>
     </Form>
+    </>
   )
 }
 

first-app/src/context/NotificationContext.tsx

@@ -0,0 +1,13 @@
+import { useContext, createContext } from "react";
+
+const NotificationContext = createContext<any>({});
+
+export function NotificationProvider({children, value}:any){
+    return <NotificationContext.Provider value={value}>
+        {children}
+    </NotificationContext.Provider>
+}
+
+export function useNotificationValue(){
+    return useContext(NotificationContext);
+}

first-app/src/environments.ts

@@ -1,3 +1,3 @@
 export const Environments = {
-    URLApi: ""
+    URLApi: "http://jailton.bootcamp.dev.netuno.org:20190/services/netunovendas"
 }

first-app/src/hooks/useNotification.ts

@@ -0,0 +1,16 @@
+import { notification } from "antd";
+import { IconType, NotificationInstance } from "antd/es/notification/interface";
+
+   const [api, contextHolder] = notification.useNotification();
+
+   const openNotification = (message:string, description:string, type:IconType) => {
+    api.open({
+      type:type, 
+      message: message,
+      description: description,
+    });
+  };
+
+export {
+    openNotification
+}

first-app/src/interfaces/Cliente.ts

@@ -0,0 +1,10 @@
+export interface Cliente {
+    uid?:string,
+    nome:string,
+    email:string,
+    telefone:string,
+    pais?:{
+        uid:string,
+        nome:string,
+    }
+}

first-app/src/main.tsx

@@ -4,9 +4,14 @@ import 'antd/dist/reset.css'
 import './index.css'
 import App from './App.tsx'
 
+import store from './store.ts'
+import { Provider } from 'react-redux'
+
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
+    <Provider store={store}>
     <App/>
+    </Provider>
   </React.StrictMode>,
 )

first-app/src/pages/Cliente/NewCliente.tsx

@@ -1,15 +1,17 @@
-
-
 //components
+import { useDispatch } from 'react-redux'
 import ClienteForm from '../../components/ClienteForm'
+import { 
+    registerCliente
+ } from '../../slices/ClienteSlice';
+import { Cliente as clieInte} from '../../interfaces/Cliente';
 
-function Cliente() {
-
-    const handleSubmit = (values:any) => {
-        console.log('Componente Cliente:',values)
+function NewCliente() {
 
-        //TO DO
-        //CREATED SERVICE REGISTER CUSTOMER
+    const dispatch = useDispatch<any>();
+    
+    const handleSubmit = (cliente:clieInte) => {
+        dispatch(registerCliente(cliente));
     }
    
     return (
@@ -22,4 +24,4 @@ function Cliente() {
     )
 }
 
-export default Cliente
+export default NewCliente

first-app/src/services/ClienteService.ts

@@ -1,10 +1,11 @@
 import { Environments } from "../environments"
+import { Cliente } from "../interfaces/Cliente";
 
-const {URLApi} = Environments; 
+const { URLApi } = Environments; 
 
-const findPaises = async () => {
+const getAllPaises = async () => {
 
-    const data = await fetch(`${URLApi}/paises/list`)
+    const data = await fetch(`${URLApi}/pais/list`)
         .then((res)=>res.json())
         .catch((err)=>err);
 
@@ -12,6 +13,32 @@ const findPaises = async () => {
 
 }
 
+const registerCliente = async (cliente:Cliente) => {
+
+    console.log(cliente)
+
+    const config = {
+        method:"POST",
+        body:JSON.stringify(cliente),
+        headers: {
+            "Content-type":"application/json",
+        }
+    }
+
+    try {
+        const data = await fetch(`${URLApi}/cliente`,config)
+            .then((res)=>res.json())
+            .catch((err)=>err);
+        console.log(data);
+        return data;            
+    } catch (error) {
+        console.info(error);
+        return error;
+    }
+
+}
+
 export const ClienteServices = {
-    findPaises
+    getAllPaises,
+    registerCliente
 }

first-app/src/slices/ClienteSlice.ts

@@ -0,0 +1,72 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { 
+    ClienteServices 
+} from "../services/ClienteService";
+import { Cliente } from "../interfaces/Cliente";
+
+const initialState = {
+    cliente:{},
+    paises:[] as any,
+    clientes:[] as any,
+    loadind:false,
+    error:false,
+    success:true,
+    message:''
+}
+
+export const getAllPaises = createAsyncThunk(
+    "paise/getAll",
+    async () => {
+        const data = await ClienteServices.getAllPaises();
+        return data;
+    }
+)
+
+export const registerCliente = createAsyncThunk(
+    "cliente/register",
+    async (cliente:Cliente, thunkApi) => {
+        const data = await ClienteServices.registerCliente(cliente);
+        if (data.error) {
+            return thunkApi.rejectWithValue (data);
+        }
+        return data;
+    }
+)
+
+export const clienteSlice = createSlice({
+    name:"cliente",
+    initialState,
+
+    reducers:{
+        resetState:(state)=>{
+            state.loadind = false;
+            state.error = false;
+            state.message = '';
+        },
+    },
+
+    extraReducers(builder) {
+        builder
+        .addCase(getAllPaises.pending,(state)=>{
+            state.loadind = true;
+        }).addCase(getAllPaises.fulfilled,(state,action)=>{
+            state.paises = action.payload.result;
+            state.loadind = false;
+        })
+
+        .addCase(registerCliente.pending,(state)=>{
+            state.loadind = true;
+        }).addCase(registerCliente.fulfilled, (state)=>{
+            state.loadind = false;
+            state.success = true;
+        }).addCase(registerCliente.rejected,(state,action:any)=>{
+            state.loadind = false;
+            state.error = true;
+            state.success = false;
+            state.message = action.payload ? action.payload.message : 'Error ao cadastrar cliente, revise os dados e tente novamente!';
+        })
+    },
+});
+
+export const { resetState } = clienteSlice.actions;
+export default clienteSlice.reducer;

first-app/src/store.ts

@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+//reduces
+import ClienteSlice from "./slices/ClienteSlice";
+
+export default configureStore({
+    reducer:{
+        cliente:ClienteSlice
+    }
+})