react + redux + bootstrap + typescript = app notification system! (part 3)
Join me as I create a way to easily display multiple types of notifications using react + redux + bootstrap. One of the many things I'll have to do to create my PWA
part 2 • react + redux + bootstrap + typescript = a...
[email protected]
0:25 plan
1:40 add onEnter and onLeave to listener/controller
3:22 drill onEnter/onLeave thru to notification component
4:15 wireup onEnter/onLeave to synthetic events
8:10 build and test
11:15 troubleshoot events -- you'll see that chrome for ubuntu doesn't simulate touch events very well
16:15 fix topnav/notification collision
21:00 move fix to scss
25:00 bootstrap dismiss button markup for notification
29:30 bootstrap dismiss button placement in notification
31:05 make dismiss button more prominent
34:15 add dismiss button function
37:24 test multiple notifications
"dependencies":
"bootstrap": "^4.5.3",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-hook-form": "^6.9.2",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"workbox-precaching": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4"
"devDependencies":
"@babel/core": "^7.0.0-0",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"@babel/runtime": "^7.12.1",
"autoprefixer": "^10.0.1",
"parcel": "^1.12.4",
"postcss": "^8.1.4",
"sass": "^1.27.0",
"shelljs": "^0.8.4",
"typescript": "^4.0.3",
"upath": "^2.0.0"