From 95d3630a95441476ff066bd95bcd881c52e1a33b Mon Sep 17 00:00:00 2001
From: sunnysani <naufal.sani2001@gmail.com>
Date: Tue, 24 May 2022 14:44:38 +0700
Subject: [PATCH] tmp
---
package.json | 19 +++----
src/actions/auth.js | 8 +--
src/components/Home/Home.css | 4 +-
src/components/Home/Home.js | 5 ++
src/components/Main/Main.css | 19 +++++++
src/components/Main/Main.js | 26 ++++++++++
.../NotificationBell/Notification.svg | 3 ++
.../NotificationBell/NotificationBell.css | 17 +++++++
.../NotificationBell/NotificationBell.js | 50 +++++++++++++++++++
src/components/NotificationBell/Server.js | 26 ++++++++++
src/index.js | 3 ++
11 files changed, 164 insertions(+), 16 deletions(-)
create mode 100644 src/components/Main/Main.css
create mode 100644 src/components/Main/Main.js
create mode 100644 src/components/NotificationBell/Notification.svg
create mode 100644 src/components/NotificationBell/NotificationBell.css
create mode 100644 src/components/NotificationBell/NotificationBell.js
create mode 100644 src/components/NotificationBell/Server.js
diff --git a/package.json b/package.json
index a677dce..57414e3 100644
--- a/package.json
+++ b/package.json
@@ -6,26 +6,27 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
+ "amqplib": "^0.9.1",
+ "assert": "^2.0.0",
"axios": "^0.27.2",
+ "buffer": "^6.0.3",
+ "net": "^1.0.2",
+ "process": "^0.11.10",
+ "querystring": "^0.2.1",
"react": "^18.1.0",
"react-bootstrap": "^2.3.1",
"react-dom": "^18.1.0",
"react-redux": "^8.0.1",
"react-router-dom": "^6.3.0",
- "react-scripts": "5.0.1",
+ "react-scripts": "^5.0.1",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1",
"serve": "^13.0.2",
+ "stream": "^0.0.2",
+ "tls": "^0.0.1",
+ "util": "^0.12.4",
"web-vitals": "^2.1.4"
},
- "scripts": {
- "dev": "react-scripts start",
- "heroku-postbuild": "npm run build",
- "start": "react-scripts --max_old_space_size=4096 start",
- "build": "react-scripts build",
- "test": "CI=true react-scripts test",
- "eject": "react-scripts eject"
- },
"eslintConfig": {
"extends": [
"react-app",
diff --git a/src/actions/auth.js b/src/actions/auth.js
index e8a9c54..e00b01c 100644
--- a/src/actions/auth.js
+++ b/src/actions/auth.js
@@ -21,7 +21,7 @@ export const load_user = () => async dispatch => {
};
try {
- const res = await axios.get(`${process.env.REACT_APP_BACKEND_API_URL}/api/resource/`, config);
+ const res = await axios.get(`http://127.0.0.1:8000/api/resource/`, config);
dispatch({
type: USER_LOADED_SUCCESS,
payload: res.data
@@ -62,7 +62,7 @@ export const login = (username, password) => async dispatch => {
const body = JSON.stringify({ username, password });
try {
- const res = await axios.post(`${process.env.REACT_APP_BACKEND_API_URL}/api/token/`, body, config);
+ const res = await axios.post(`http://127.0.0.1:8000/api/token/`, body, config);
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
@@ -95,7 +95,7 @@ export const logout = () => async dispatch => {
const body = JSON.stringify({ "refresh_token" : localStorage.getItem('refresh')});
try {
- const res = await axios.post(`${process.env.REACT_APP_BACKEND_API_URL}/api/logout/`, body, config);
+ const res = await axios.post(`http://127.0.0.1:8000/api/logout/`, body, config);
dispatch({
type: LOGOUT,
payload: res.data
@@ -125,7 +125,7 @@ export const signup = (first_name, last_name, username, password) => async dispa
const body = JSON.stringify({ first_name, last_name, username, password});
try {
- const res = await axios.post(`${process.env.REACT_APP_BACKEND_API_URL}/api/create-user/`, body, config);
+ const res = await axios.post(`http://127.0.0.1:8000/api/create-user/`, body, config);
dispatch({
type: SIGNUP_SUCCESS,
payload: res.data
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index a246bf8..634bb8f 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -48,7 +48,6 @@
padding-left: 2rem;
width: 602px;
text-align: left;
- color: var(--remindme-white);
margin: auto 0px;
}
@@ -136,5 +135,4 @@
.remindme-home-sect-4-container {
background-color: rgba(13, 202, 240, 0.15);
padding: 80px;
-}
-
+}
\ No newline at end of file
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 6bbf41e..46f5e62 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,6 +1,7 @@
import './Home.css'
import Icon from './Icon.svg'
import { connect } from 'react-redux';
+import Main from '../Main/Main'
const Home = ({ user, isAuthenticated }) => {
if (!isAuthenticated) {
@@ -17,6 +18,10 @@ const Home = ({ user, isAuthenticated }) => {
</div>
</div>
);
+ } else {
+ return (
+ <Main />
+ );
}
}
diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css
new file mode 100644
index 0000000..80cb769
--- /dev/null
+++ b/src/components/Main/Main.css
@@ -0,0 +1,19 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Nunito:wght@300;400;600;700;800&display=swap');
+
+.remindme-main-content {
+ font-family: 'Nunito', sans-serif;
+ display: block;
+ margin: 50px;
+}
+
+.remindme-main-header {
+ display: flex;
+ justify-content: space-between;
+ position: relative;
+}
+
+.remindme-main-header-left h1 {
+ color: #0E2560;
+ font-weight: bold;
+ font-size: x-large;
+}
\ No newline at end of file
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
new file mode 100644
index 0000000..2bc2c12
--- /dev/null
+++ b/src/components/Main/Main.js
@@ -0,0 +1,26 @@
+import './Main.css';
+import { connect } from 'react-redux';
+import NotificationBell from '../NotificationBell/NotificationBell';
+
+const Main = () => {
+
+ return (
+ <div className='remindme-main-content'>
+ <div className='remindme-main-header'>
+ <div className='remindme-main-header-left'>
+ <h1>Hello Naufal Sani!</h1>
+ </div>
+ <div className='remindme-main-header-right'>
+ <NotificationBell />
+ </div>
+ </div>
+ </div>
+ );
+}
+
+const mapStateToProps = (state) => ({
+ isAuthenticated: state.auth.isAuthenticated,
+ user: state.auth.user
+})
+
+export default connect(mapStateToProps)(Main);
\ No newline at end of file
diff --git a/src/components/NotificationBell/Notification.svg b/src/components/NotificationBell/Notification.svg
new file mode 100644
index 0000000..0e437ad
--- /dev/null
+++ b/src/components/NotificationBell/Notification.svg
@@ -0,0 +1,3 @@
+<svg width="51" height="60" viewBox="0 0 51 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.5714 4.0792V6.28595C36.7188 7.99043 42.8572 15.4118 42.8572 24.3077V26.4685C42.8572 31.8819 44.788 37.0884 48.2701 41.1341L49.096 42.0881C50.0335 43.18 50.2679 44.7201 49.6875 46.0419C49.1072 47.3636 47.8348 48.2141 46.4286 48.2141H3.5714C2.16515 48.2141 0.889595 47.3636 0.313478 46.0419C-0.262639 44.7201 -0.0322031 43.18 0.902206 42.0881L1.72989 41.1341C5.2165 37.0884 7.14284 31.8819 7.14284 26.4685V24.3077C7.14284 15.4118 13.1808 7.99043 21.4286 6.28595V4.0792C21.4286 2.0483 23.0245 0.401291 25 0.401291C26.9754 0.401291 28.5714 2.0483 28.5714 4.0792ZM25 59.2478C23.1027 59.2478 21.2835 58.4778 19.9442 57.0986C18.6049 55.7194 17.8571 53.7425 17.8571 51.892H32.1429C32.1429 53.7425 31.3951 55.7194 30.0558 57.0986C28.7165 58.4778 26.7969 59.2478 25 59.2478Z" fill="#0E2560"/>
+</svg>
diff --git a/src/components/NotificationBell/NotificationBell.css b/src/components/NotificationBell/NotificationBell.css
new file mode 100644
index 0000000..20843d0
--- /dev/null
+++ b/src/components/NotificationBell/NotificationBell.css
@@ -0,0 +1,17 @@
+.remindme-notification-bell img {
+ width: 30px;
+}
+
+.remindme-notification-bell #notification-count {
+ position: absolute;
+ text-align: center;
+ color: white;
+ background-color: red;
+ font-size: 12px;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ vertical-align: middle;
+ top: -8px;
+ right: 20px;
+}
\ No newline at end of file
diff --git a/src/components/NotificationBell/NotificationBell.js b/src/components/NotificationBell/NotificationBell.js
new file mode 100644
index 0000000..a257065
--- /dev/null
+++ b/src/components/NotificationBell/NotificationBell.js
@@ -0,0 +1,50 @@
+import './NotificationBell.css';
+import Notification from './Notification.svg';
+
+const NotificationBell = () => {
+
+ var notificationCount = 1;
+
+ console.log("1--------------")
+ var global = global || window;
+ var Buffer = Buffer || [];
+ var process = process || {
+ env: { DEBUG: undefined },
+ version: []};
+ var amqp = require('amqplib/callback_api');
+ console.log("1.5--------------")
+ // amqp.connect('amqp://receiver:receiver321@34.69.147.3', function(error0, connection) {
+ // if (error0) {
+ // throw error0;
+ // }
+ // connection.createChannel(function(error1, channel) {
+ // if (error1) {
+ // throw error1;
+ // }
+
+ // var queue = 'sani';
+
+ // channel.assertQueue(queue, {
+ // durable: false
+ // });
+
+ // console.log(" [*] Waiting for messages in %s. To exit press CTRL+C", queue);
+
+ // channel.consume(queue, function(msg) {
+ // console.log(" [x] Received %s", msg.content.toString());
+ // }, {
+ // noAck: true
+ // });
+ // });
+ // });
+ console.log("TEST")
+
+ return (
+ <div className='remindme-notification-bell'>
+ <img src={Notification} alt="Notification Bell" />
+ <div id="notification-count">{ notificationCount }</div>
+ </div>
+ )
+}
+
+export default NotificationBell
\ No newline at end of file
diff --git a/src/components/NotificationBell/Server.js b/src/components/NotificationBell/Server.js
new file mode 100644
index 0000000..782a165
--- /dev/null
+++ b/src/components/NotificationBell/Server.js
@@ -0,0 +1,26 @@
+var amqp = require('amqplib/callback_api');
+
+amqp.connect('amqp://receiver:receiver321@34.69.147.3', function(error0, connection) {
+ if (error0) {
+ throw error0;
+ }
+ connection.createChannel(function(error1, channel) {
+ if (error1) {
+ throw error1;
+ }
+
+ var queue = 'sani';
+
+ channel.assertQueue(queue, {
+ durable: false
+ });
+
+ console.log(" [*] Waiting for messages in %s. To exit press CTRL+C", queue);
+
+ channel.consume(queue, function(msg) {
+ console.log(" [x] Received %s", msg.content.toString());
+ }, {
+ noAck: true
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..0d81d27 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import { Buffer } from 'buffer'
+Buffer.from('anything','base64');
+window.Buffer = Buffer
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
--
GitLab