diff --git a/laravelapi/app/Http/Controllers/API/StudentController.php b/laravelapi/app/Http/Controllers/API/StudentController.php index 98f91bd..3576600 100644 --- a/laravelapi/app/Http/Controllers/API/StudentController.php +++ b/laravelapi/app/Http/Controllers/API/StudentController.php @@ -28,4 +28,33 @@ public function index(){ "students"=>$students ]); } + + public function edit($id){ + $student = Student::find($id); + return response()->json([ + "status"=>200, + "student"=>$student, + ]); + } + public function update(Request $request){ + $studentId = $request->id; + $student = Student::find($studentId); + $student->name= $request->name; + $student->course= $request->course; + $student->email= $request->email; + $student->phone= $request->phone; + $student->update(); + return response()->json([ + "status"=>200, + "message"=>"Data updated Successfully", + ]); + } + public function destroy($id){ + $student = Student::find($id); + $student->delete(); + return response()->json([ + "status"=>200, + "message"=>"Data deleted Successfully", + ]); + } } diff --git a/laravelapi/routes/api.php b/laravelapi/routes/api.php index 9559b62..335ac39 100644 --- a/laravelapi/routes/api.php +++ b/laravelapi/routes/api.php @@ -17,6 +17,9 @@ // data send er jonno post; Route::post("/add-student",[StudentController::class,'store']); Route::get("/all-students",[StudentController::class,'index']); + Route::get("/edit-student/{id}",[StudentController::class,'edit']); + Route::post("/update-student",[StudentController::class,'update']); + Route::delete("/delete-student/{id}",[StudentController::class,'destroy']); diff --git a/react-crud-app/package-lock.json b/react-crud-app/package-lock.json index f39b823..1dfafaa 100644 --- a/react-crud-app/package-lock.json +++ b/react-crud-app/package-lock.json @@ -12,7 +12,10 @@ "cra-template": "1.1.2", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-scripts": "4.0.3" + "react-router": "^5.2.1", + "react-router-dom": "^5.3.0", + "react-scripts": "4.0.3", + "sweetalert": "^2.1.2" }, "devDependencies": { "web-vitals": "^2.1.0" @@ -6680,6 +6683,11 @@ "es6-symbol": "^3.1.1" } }, + "node_modules/es6-object-assign": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz", + "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=" + }, "node_modules/es6-symbol": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", @@ -8656,6 +8664,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "node_modules/hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -8666,6 +8687,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "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/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -11104,6 +11133,19 @@ "node": ">=6" } }, + "node_modules/mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "prop-types": "^15.0.0", + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -13541,6 +13583,11 @@ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" }, + "node_modules/promise-polyfill": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz", + "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=" + }, "node_modules/prompts": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz", @@ -13942,6 +13989,56 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router-dom": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz", + "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router/node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "node_modules/react-router/node_modules/path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "dependencies": { + "isarray": "0.0.1" + } + }, "node_modules/react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", @@ -14794,6 +14891,11 @@ "node": ">=4" } }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "node_modules/resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -16363,6 +16465,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sweetalert": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz", + "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==", + "dependencies": { + "es6-object-assign": "^1.1.0", + "promise-polyfill": "^6.0.2" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -16666,6 +16777,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "node_modules/tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -17251,6 +17372,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -23768,6 +23894,11 @@ "es6-symbol": "^3.1.1" } }, + "es6-object-assign": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz", + "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=" + }, "es6-symbol": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", @@ -25269,6 +25400,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -25279,6 +25423,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "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==", + "requires": { + "react-is": "^16.7.0" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -27144,6 +27296,15 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" }, + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -29053,6 +29214,11 @@ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" }, + "promise-polyfill": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz", + "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=" + }, "prompts": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz", @@ -29368,6 +29534,52 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", + "requires": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz", + "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==", + "requires": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", @@ -30022,6 +30234,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -31270,6 +31487,15 @@ } } }, + "sweetalert": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz", + "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==", + "requires": { + "es6-object-assign": "^1.1.0", + "promise-polyfill": "^6.0.2" + } + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -31496,6 +31722,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -31958,6 +32194,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/react-crud-app/package.json b/react-crud-app/package.json index eb49aff..67ed868 100644 --- a/react-crud-app/package.json +++ b/react-crud-app/package.json @@ -7,7 +7,10 @@ "cra-template": "1.1.2", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-scripts": "4.0.3" + "react-router": "^5.2.1", + "react-router-dom": "^5.3.0", + "react-scripts": "4.0.3", + "sweetalert": "^2.1.2" }, "scripts": { "start": "react-scripts start", diff --git a/react-crud-app/src/App.js b/react-crud-app/src/App.js index 0bbc22d..771be49 100644 --- a/react-crud-app/src/App.js +++ b/react-crud-app/src/App.js @@ -3,6 +3,7 @@ import "./App.css"; import AddStudent from "./components/pages/AddStudent"; import Student from "./components/pages/Student"; import EditStudent from "./components/pages/EditStudent"; +import React from 'react'; function App() { return ( @@ -10,7 +11,7 @@ function App() { - + ); diff --git a/react-crud-app/src/components/pages/AddStudent.js b/react-crud-app/src/components/pages/AddStudent.js index 2bd13fe..1310910 100644 --- a/react-crud-app/src/components/pages/AddStudent.js +++ b/react-crud-app/src/components/pages/AddStudent.js @@ -2,6 +2,7 @@ import axios from "axios"; import { useState } from "react"; import { Link } from "react-router-dom"; import React from 'react'; +import swal from 'sweetalert'; export default function AddStudent() { const [studentData, setStudentData] = useState({ @@ -23,7 +24,12 @@ export default function AddStudent() { try { const res = await axios.post("http://localhost:8000/api/add-student", studentData); if(res.data.status===200) { - console.log(res.data.message); + swal({ + title: "Success!", + text: res.data.message, + icon: "success", + button: "Ok!", + }); setStudentData({ name: "", course: "", diff --git a/react-crud-app/src/components/pages/EditStudent.js b/react-crud-app/src/components/pages/EditStudent.js index 6d64ee0..0014daf 100644 --- a/react-crud-app/src/components/pages/EditStudent.js +++ b/react-crud-app/src/components/pages/EditStudent.js @@ -1,17 +1,35 @@ import axios from "axios"; import { useState,useEffect } from "react"; import { Link } from "react-router-dom"; -import {useParams} from 'react-router'; import React from 'react'; +import swal from "sweetalert"; -export default function EditStudent() { +export default function EditStudent(props) { + + const id = props.match.params.id; const [studentData, setStudentData] = useState({ + id:'', name: "", course: "", email: "", phone: "", }); - const {id} = useParams(); + useEffect(()=>{ + async function fetchStudent(){ + const res = await axios.get(`http://localhost:8000/api/edit-student/${id}`); + if(res.data.status === 200) + { + setStudentData({ + id: res.data.student.id, + name: res.data.student.name, + course: res.data.student.course, + email: res.data.student.email, + phone: res.data.student.phone, + }); + } + } + fetchStudent(); + },[id]); let name, value; @@ -21,25 +39,21 @@ export default function EditStudent() { setStudentData({ ...studentData, [name]: value }); }; - useEffect(()=>{ - async function getStudent(){ - const res = await axios.get(`api/editStudent/${id}`) - if(res.data.status == 200) - { - } - - } - getStudent(); - },[id]) const updateStudent = async (e) => { e.preventDefault(); try { const res = await axios.post("http://localhost:8000/api/update-student", studentData); if(res.data.status===200) { - console.log(res.data.message); + swal({ + title: "Updated!", + text: res.data.message, + icon: "success", + button: "OK!", + }); setStudentData({ + id:'', name: "", course: "", email: "", @@ -58,7 +72,7 @@ export default function EditStudent() {

- Add Student + Edit Student Back diff --git a/react-crud-app/src/components/pages/Student.js b/react-crud-app/src/components/pages/Student.js index 0fe2966..2f37f1d 100644 --- a/react-crud-app/src/components/pages/Student.js +++ b/react-crud-app/src/components/pages/Student.js @@ -1,6 +1,7 @@ import { Link } from "react-router-dom"; import axios from "axios"; import React,{useEffect,useState} from 'react'; +import swal from 'sweetalert'; export default function Student() { @@ -19,6 +20,29 @@ export default function Student() { fetchData(); },[]); + const deleteData= (e,id) =>{ + + const buttonRef = e.currentTarget; + swal({ + title: "Are you sure?", + text: "Once deleted, you will not be able to recover this student data!", + icon: "warning", + buttons: true, + dangerMode: true, + }).then((willDelete) => { + if (willDelete) { + axios.delete(`http://localhost:8000/api/delete-student/${id}`); + buttonRef.closest("tr").remove(); + swal("Student data deleted successfully!", { + icon: "success", + }); + } else { + swal("Student data is safe!"); + } + }); + + } + return (
@@ -58,8 +82,8 @@ export default function Student() { {student.email} {student.phone} - Edit - Delete + Edit + )) diff --git a/react-crud-app/yarn.lock b/react-crud-app/yarn.lock index 3817607..efb2297 100644 --- a/react-crud-app/yarn.lock +++ b/react-crud-app/yarn.lock @@ -1131,7 +1131,7 @@ "core-js-pure" "^3.0.0" "regenerator-runtime" "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": "integrity" "sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg==" "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.18.tgz" "version" "7.12.18" @@ -4416,6 +4416,11 @@ "es5-ext" "^0.10.35" "es6-symbol" "^3.1.1" +"es6-object-assign@^1.1.0": + "integrity" "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=" + "resolved" "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz" + "version" "1.1.0" + "es6-symbol@^3.1.1", "es6-symbol@~3.1.3": "integrity" "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==" "resolved" "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz" @@ -5456,6 +5461,18 @@ "resolved" "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz" "version" "1.1.0" +"history@^4.9.0": + "integrity" "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==" + "resolved" "https://registry.npmjs.org/history/-/history-4.10.1.tgz" + "version" "4.10.1" + dependencies: + "@babel/runtime" "^7.1.2" + "loose-envify" "^1.2.0" + "resolve-pathname" "^3.0.0" + "tiny-invariant" "^1.0.2" + "tiny-warning" "^1.0.0" + "value-equal" "^1.0.1" + "hmac-drbg@^1.0.1": "integrity" "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=" "resolved" "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz" @@ -5465,6 +5482,13 @@ "minimalistic-assert" "^1.0.0" "minimalistic-crypto-utils" "^1.0.1" +"hoist-non-react-statics@^3.1.0": + "integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==" + "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" + "version" "3.3.2" + dependencies: + "react-is" "^16.7.0" + "hoopy@^0.1.4": "integrity" "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==" "resolved" "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz" @@ -6147,6 +6171,11 @@ "resolved" "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz" "version" "1.0.0" +"isarray@0.0.1": + "integrity" "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + "resolved" "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz" + "version" "0.0.1" + "isexe@^2.0.0": "integrity" "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" "resolved" "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz" @@ -7024,7 +7053,7 @@ "resolved" "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz" "version" "1.7.1" -"loose-envify@^1.1.0", "loose-envify@^1.4.0": +"loose-envify@^1.1.0", "loose-envify@^1.2.0", "loose-envify@^1.3.1", "loose-envify@^1.4.0": "integrity" "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==" "resolved" "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" "version" "1.4.0" @@ -7239,6 +7268,14 @@ "resolved" "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz" "version" "2.1.0" +"mini-create-react-context@^0.4.0": + "integrity" "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==" + "resolved" "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz" + "version" "0.4.1" + dependencies: + "@babel/runtime" "^7.12.1" + "tiny-warning" "^1.0.3" + "mini-css-extract-plugin@0.11.3": "integrity" "sha512-n9BA8LonkOkW1/zn+IbLPQmovsL0wMb9yx75fMJQZf2X1Zoec9yTZtyMePcyu19wPkmFbzZZA6fLTotpFhQsOA==" "resolved" "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz" @@ -7998,6 +8035,13 @@ "resolved" "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz" "version" "1.0.6" +"path-to-regexp@^1.7.0": + "integrity" "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==" + "resolved" "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz" + "version" "1.8.0" + dependencies: + "isarray" "0.0.1" + "path-to-regexp@0.1.7": "integrity" "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" "resolved" "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz" @@ -8865,6 +8909,11 @@ "resolved" "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz" "version" "1.0.1" +"promise-polyfill@^6.0.2": + "integrity" "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=" + "resolved" "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz" + "version" "6.1.0" + "promise@^8.1.0": "integrity" "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==" "resolved" "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz" @@ -8880,7 +8929,7 @@ "kleur" "^3.0.3" "sisteransi" "^1.0.5" -"prop-types@^15.7.2": +"prop-types@^15.0.0", "prop-types@^15.6.2", "prop-types@^15.7.2": "integrity" "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==" "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz" "version" "15.7.2" @@ -9099,7 +9148,7 @@ "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz" "version" "6.0.9" -"react-is@^16.8.1": +"react-is@^16.6.0", "react-is@^16.7.0", "react-is@^16.8.1": "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" "version" "16.13.1" @@ -9114,6 +9163,35 @@ "resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz" "version" "0.8.3" +"react-router-dom@^5.3.0": + "integrity" "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==" + "resolved" "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz" + "version" "5.3.0" + dependencies: + "@babel/runtime" "^7.12.13" + "history" "^4.9.0" + "loose-envify" "^1.3.1" + "prop-types" "^15.6.2" + "react-router" "5.2.1" + "tiny-invariant" "^1.0.2" + "tiny-warning" "^1.0.0" + +"react-router@^5.2.1", "react-router@5.2.1": + "integrity" "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==" + "resolved" "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz" + "version" "5.2.1" + dependencies: + "@babel/runtime" "^7.12.13" + "history" "^4.9.0" + "hoist-non-react-statics" "^3.1.0" + "loose-envify" "^1.3.1" + "mini-create-react-context" "^0.4.0" + "path-to-regexp" "^1.7.0" + "prop-types" "^15.6.2" + "react-is" "^16.6.0" + "tiny-invariant" "^1.0.2" + "tiny-warning" "^1.0.0" + "react-scripts@4.0.3": "integrity" "sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A==" "resolved" "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz" @@ -9180,7 +9258,7 @@ optionalDependencies: "fsevents" "^2.1.3" -"react@^17.0.2", "react@>= 16", "react@17.0.2": +"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^17.0.2", "react@>= 16", "react@>=15", "react@17.0.2": "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "version" "17.0.2" @@ -9488,6 +9566,11 @@ "resolved" "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz" "version" "5.0.0" +"resolve-pathname@^3.0.0": + "integrity" "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + "resolved" "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz" + "version" "3.0.0" + "resolve-url-loader@^3.1.2": "integrity" "sha512-QEb4A76c8Mi7I3xNKXlRKQSlLBwjUV/ULFMP+G7n3/7tJZ8MG5wsZ3ucxP1Jz8Vevn6fnJsxDx9cIls+utGzPQ==" "resolved" "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz" @@ -10502,6 +10585,14 @@ "unquote" "~1.1.1" "util.promisify" "~1.0.0" +"sweetalert@^2.1.2": + "integrity" "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==" + "resolved" "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz" + "version" "2.1.2" + dependencies: + "es6-object-assign" "^1.1.0" + "promise-polyfill" "^6.0.2" + "symbol-tree@^3.2.4": "integrity" "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" "resolved" "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz" @@ -10648,6 +10739,16 @@ "resolved" "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz" "version" "0.3.0" +"tiny-invariant@^1.0.2": + "integrity" "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + "resolved" "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz" + "version" "1.1.0" + +"tiny-warning@^1.0.0", "tiny-warning@^1.0.3": + "integrity" "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + "resolved" "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz" + "version" "1.0.3" + "tmpl@1.0.x": "integrity" "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=" "resolved" "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz" @@ -11077,6 +11178,11 @@ "spdx-correct" "^3.0.0" "spdx-expression-parse" "^3.0.0" +"value-equal@^1.0.1": + "integrity" "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + "resolved" "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz" + "version" "1.0.1" + "vary@~1.1.2": "integrity" "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" "resolved" "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"