Teddy

README.md

@@ -3,7 +3,7 @@
 Build a React.js CRUD Application to consume Web API, display and modify data with Router, Axios & Bootstrap.
 
 React Tutorial Application in that:
-- Each Tutorial has id, title, description, published status.
+- Each Tutorial has id, title, description.
 - We can create, retrieve, update, delete Tutorials.
 - There is a Search bar for finding Tutorials by title.
 

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^14.1.1",
     "axios": "^0.27.2",
     "bootstrap": "^4.6.2",
+    "primereact": "^10.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.0",

src/App.js

@@ -13,17 +13,17 @@ class App extends Component {
       <div>
         <nav className="navbar navbar-expand navbar-dark bg-dark">
           <Link to={"/tutorials"} className="navbar-brand">
-            bezKoder
+            Teddy
           </Link>
           <div className="navbar-nav mr-auto">
             <li className="nav-item">
               <Link to={"/tutorials"} className="nav-link">
-                Tutorials
+                Parceiros
               </Link>
             </li>
             <li className="nav-item">
               <Link to={"/add"} className="nav-link">
-                Add
+                Adicionar Parceiro
               </Link>
             </li>
           </div>

src/components/add-tutorial.component.js

@@ -4,47 +4,78 @@ import TutorialDataService from "../services/tutorial.service";
 export default class AddTutorial extends Component {
   constructor(props) {
     super(props);
-    this.onChangeTitle = this.onChangeTitle.bind(this);
+    this.onChangeName = this.onChangeName.bind(this);
     this.onChangeDescription = this.onChangeDescription.bind(this);
+    this.onChangeClient = this.onChangeClient.bind(this);
+    this.onChangeClient2 = this.onChangeClient2.bind(this);
+    this.onChangeProject = this.onChangeProject.bind(this);
+    this.onChangeProject2 = this.onChangeProject2.bind(this);
     this.saveTutorial = this.saveTutorial.bind(this);
     this.newTutorial = this.newTutorial.bind(this);
 
     this.state = {
       id: null,
-      title: "",
-      description: "", 
-      published: false,
-
+      name: "",
+      description: "",
+      client: "",
+      client2: "",
       submitted: false
     };
   }
 
-  onChangeTitle(e) {
+  onChangeName(e) {
     this.setState({
-      title: e.target.value
+      name: e.target.value
     });
   }
 
   onChangeDescription(e) {
     this.setState({
       description: e.target.value
     });
+
+  }
+
+  onChangeClient(e) {
+    this.setState({
+      client: e.target.value
+    });
+  }
+
+  onChangeClient2(e) {
+    this.setState({
+      client2: e.target.value
+    });
+  }
+
+  onChangeProject(e) {
+    this.setState({
+      project: e.target.value
+    });
   }
 
+  onChangeProject2(e) {
+    this.setState({
+      project2: e.target.value
+    });
+  }
+
   saveTutorial() {
     var data = {
-      title: this.state.title,
-      description: this.state.description
+      name: this.state.name,
+      description: this.state.description,
+      clients: [this.state.client, this.state.client2],
+      projects: [this.state.project, this.state.project2]
     };
 
-    TutorialDataService.create(data)
+    TutorialDataService.postParceiro(data)
       .then(response => {
         this.setState({
           id: response.data.id,
-          title: response.data.title,
+          name: response.data.name,
           description: response.data.description,
-          published: response.data.published,
-
+          clients: response.data.clients,
+          projects: response.data.projects,
           submitted: true
         });
         console.log(response.data);
@@ -57,10 +88,12 @@ export default class AddTutorial extends Component {
   newTutorial() {
     this.setState({
       id: null,
-      title: "",
+      name: "",
       description: "",
-      published: false,
-
+      client: "",
+      client2: "",
+      project: "",
+      project2: "",
       submitted: false
     });
   }
@@ -70,28 +103,28 @@ export default class AddTutorial extends Component {
       <div className="submit-form">
         {this.state.submitted ? (
           <div>
-            <h4>You submitted successfully!</h4>
+            <h4>Parceiro cadastrado com sucesso!</h4>
             <button className="btn btn-success" onClick={this.newTutorial}>
               Add
             </button>
           </div>
         ) : (
           <div>
             <div className="form-group">
-              <label htmlFor="title">Title</label>
+              <label htmlFor="name">Nome</label>
               <input
                 type="text"
                 className="form-control"
-                id="title"
+                id="name"
                 required
-                value={this.state.title}
-                onChange={this.onChangeTitle}
-                name="title"
+                value={this.state.name}
+                onChange={this.onChangeName}
+                name="name"
               />
             </div>
 
             <div className="form-group">
-              <label htmlFor="description">Description</label>
+              <label htmlFor="description">Descrição</label>
               <input
                 type="text"
                 className="form-control"
@@ -103,6 +136,58 @@ export default class AddTutorial extends Component {
               />
             </div>
 
+            <div className="form-group">
+              <label htmlFor="client">Cliente</label>
+              <input
+                type="text"
+                className="form-control"
+                id="client"
+                required
+                value={this.state.client}
+                onChange={this.onChangeClient}
+                name="client"
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="client2">Cliente 2</label>
+              <input
+                type="text"
+                className="form-control"
+                id="client2"
+                required
+                value={this.state.client2}
+                onChange={this.onChangeClient2}
+                name="client2"
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="project">Projeto</label>
+              <input
+                type="text"
+                className="form-control"
+                id="project"
+                required
+                value={this.state.project}
+                onChange={this.onChangeProject}
+                name="project"
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="project2">Projeto 2</label>
+              <input
+                type="text"
+                className="form-control"
+                id="project2"
+                required
+                value={this.state.project2}
+                onChange={this.onChangeProject2}
+                name="project2"
+              />
+            </div>
+
             <button onClick={this.saveTutorial} className="btn btn-success">
               Submit
             </button>