@@ -33,6 +39,7 @@ Container.propTypes = {
children: PropTypes.node,
glassmorph: PropTypes.bool,
closeButton: PropTypes.func,
+ contentProps: PropTypes.object,
};
export default Container;
diff --git a/app/components/ui/modal/style.scss b/app/components/ui/modal/style.scss
index 4339bbe..6115229 100644
--- a/app/components/ui/modal/style.scss
+++ b/app/components/ui/modal/style.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/global.scss';
+@use '../../../styles/pxToRem.scss' as *;
.modal-container {
position: fixed;
@@ -17,7 +17,9 @@
}
.modal-container--glassmorph {
- @include glassmorphism;
+ background: rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(25px);
+ -webkit-backdrop-filter: blur(25px);
}
.modal-content {
diff --git a/app/components/ui/searchBar.scss b/app/components/ui/searchBar.scss
index f46edb6..901b830 100644
--- a/app/components/ui/searchBar.scss
+++ b/app/components/ui/searchBar.scss
@@ -1,4 +1,4 @@
-@import '../../styles/global.scss';
+@use '../../styles/pxToRem.scss' as *;
.search-bar-input {
width: 100%;
diff --git a/app/components/ui/select/select.scss b/app/components/ui/select/select.scss
index 09cc9d3..8dafcd4 100644
--- a/app/components/ui/select/select.scss
+++ b/app/components/ui/select/select.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/global.scss';
+@use '../../../styles/pxToRem.scss' as *;
.select {
position: relative;
@@ -30,7 +30,9 @@
border-radius: 10px;
transition: all 0.2s ease-in-out;
- @include glassmorphism;
+ background: rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(25px);
+ -webkit-backdrop-filter: blur(25px);
}
.select-body-open {
diff --git a/app/components/ui/statusBar.scss b/app/components/ui/statusBar.scss
index fe840db..9eda780 100644
--- a/app/components/ui/statusBar.scss
+++ b/app/components/ui/statusBar.scss
@@ -1,4 +1,4 @@
-@import '../../styles/global.scss';
+@use '../../styles/pxToRem.scss' as *;
.status-bar-container {
display: grid;
diff --git a/app/components/ui/textarea.jsx b/app/components/ui/textarea.jsx
new file mode 100644
index 0000000..010d68b
--- /dev/null
+++ b/app/components/ui/textarea.jsx
@@ -0,0 +1,29 @@
+import './textarea.scss';
+import PropTypes from 'prop-types';
+
+const Textarea = ({ label, error, id = 'text-input', children, ...props }) => {
+ return (
+
+ {label && }
+
+ {error && (
+
+ {error}
+
+ )}
+
+ );
+};
+
+Textarea.displayName = 'Textarea';
+
+Textarea.propTypes = {
+ label: PropTypes.string,
+ error: PropTypes.string,
+ id: PropTypes.string,
+ children: PropTypes.node,
+};
+
+export default Textarea;
diff --git a/app/components/ui/textarea.scss b/app/components/ui/textarea.scss
new file mode 100644
index 0000000..0783d01
--- /dev/null
+++ b/app/components/ui/textarea.scss
@@ -0,0 +1,19 @@
+@use '../../styles/pxToRem.scss' as *;
+
+.textarea {
+ width: 100%;
+ background-color: var(--accent-800);
+ border: none;
+ outline: none;
+ color: var(--font-color);
+ font-size: var(--font-md);
+ font-weight: var(--weight-medium);
+ border-radius: var(--radius-md);
+ border: 2px solid #ffffff00;
+ padding: pxToRem(8);
+ font-family: var(--font-family);
+
+ &:focus {
+ border: 2px solid var(--primary-700);
+ }
+}
diff --git a/app/components/ui/tooltip.scss b/app/components/ui/tooltip.scss
index 6f0741f..431fc07 100644
--- a/app/components/ui/tooltip.scss
+++ b/app/components/ui/tooltip.scss
@@ -1,4 +1,4 @@
-@import '../../styles/global.scss';
+@use '../../styles/pxToRem.scss' as *;
.tooltip-container {
position: relative;
diff --git a/app/constant/notifications.json b/app/constant/notifications.json
new file mode 100644
index 0000000..534005d
--- /dev/null
+++ b/app/constant/notifications.json
@@ -0,0 +1,6 @@
+{
+ "Discord": { "name": "Discord", "icon": "discord.svg" },
+ "Slack": { "name": "Slack", "icon": "slack.svg" },
+ "Telegram": { "name": "Telegram", "icon": "telegram.svg" },
+ "Webhook": { "name": "Webhook", "icon": "webhook.svg" }
+}
diff --git a/app/context/global.js b/app/context/global.js
index a41e5be..00ffcde 100644
--- a/app/context/global.js
+++ b/app/context/global.js
@@ -1,4 +1,4 @@
-import { action, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
import { fetchMonitorById } from '../services/monitor/fetch';
class GlobalStore {
@@ -12,6 +12,7 @@ class GlobalStore {
setMonitor: action,
addMonitor: action,
removeMonitor: action,
+ allMonitors: computed,
});
}
@@ -84,9 +85,9 @@ class GlobalStore {
);
};
- getAllMonitors = () => {
+ get allMonitors() {
return Array.from(this.monitors.values()) || [];
- };
+ }
removeMonitor = (monitorId) => {
if (this.timeouts.has(monitorId)) {
diff --git a/app/context/index.js b/app/context/index.js
index 639622e..56b96ef 100644
--- a/app/context/index.js
+++ b/app/context/index.js
@@ -5,9 +5,11 @@ import GlobalStore from './global';
import ModalStore from './modal';
import UserStore from './user';
+import NotificationStore from './notifications';
const store = {
globalStore: new GlobalStore(),
+ notificationStore: new NotificationStore(),
modalStore: new ModalStore(),
userStore: new UserStore(),
};
diff --git a/app/context/notifications.js b/app/context/notifications.js
new file mode 100644
index 0000000..0783648
--- /dev/null
+++ b/app/context/notifications.js
@@ -0,0 +1,49 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+
+class NotificationStore {
+ constructor() {
+ this.notifications = new Map();
+
+ makeObservable(this, {
+ notifications: observable,
+ setNotifications: action,
+ addNotification: action,
+ deleteNotification: action,
+ toggleNotification: action,
+ allNotifications: computed,
+ });
+ }
+
+ setNotifications = (notifications) => {
+ for (const notification of notifications) {
+ this.notifications.set(notification.id, notification);
+ }
+ };
+
+ addNotification = (notification) => {
+ this.notifications.set(notification.id, notification);
+ };
+
+ deleteNotification = (id) => {
+ this.notifications.delete(id);
+ };
+
+ toggleNotification = (id, enabled) => {
+ const notification = this.notifications.get(id);
+
+ if (notification) {
+ notification.isEnabled = enabled;
+ this.notifications.set(id, notification);
+ }
+ };
+
+ getNotifciationById = (id) => {
+ return this.notifications.get(id);
+ };
+
+ get allNotifications() {
+ return Array.from(this.notifications.values()) || [];
+ }
+}
+
+export default NotificationStore;
diff --git a/app/context/team.js b/app/context/team.js
index f79c5e8..407f4b0 100644
--- a/app/context/team.js
+++ b/app/context/team.js
@@ -1,5 +1,5 @@
import { createContext, useContext } from 'react';
-import { action, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
class TeamStore {
constructor() {
@@ -10,12 +10,13 @@ class TeamStore {
updateUserPermission: action,
updateUserVerified: action,
removeUser: action,
+ teamMembers: computed,
});
}
- getTeam = () => {
+ get teamMembers() {
return Array.from(this.team.values());
- };
+ }
setTeam = (data) => {
for (const user of data) {
diff --git a/app/handlers/monitor.js b/app/handlers/monitor.js
index 0633de3..6167b66 100644
--- a/app/handlers/monitor.js
+++ b/app/handlers/monitor.js
@@ -19,6 +19,8 @@ const handleMonitor = async (form, isEdit, closeModal, setMonitor) => {
retryInterval,
requestTimeout,
monitorId,
+ notificationId,
+ notificationType,
} = form;
const query = await createPostRequest(apiPath, {
@@ -32,6 +34,8 @@ const handleMonitor = async (form, isEdit, closeModal, setMonitor) => {
retryInterval,
requestTimeout,
monitorId,
+ notificationId,
+ notificationType,
});
setMonitor(query.data);
diff --git a/app/hooks/useMonitorForm.jsx b/app/hooks/useMonitorForm.jsx
index d5103bb..095a597 100644
--- a/app/hooks/useMonitorForm.jsx
+++ b/app/hooks/useMonitorForm.jsx
@@ -2,56 +2,14 @@ import { useState } from 'react';
import handleMonitor from '../handlers/monitor';
import monitorValidators from '../../shared/validators/monitor';
-const initialPage = {
- page: 1,
- name: 'initial',
- actions: ['Next'],
- inputs: [
- { name: 'type', validator: monitorValidators.type },
- { name: 'name', validator: monitorValidators.name },
- ],
-};
-
-const httpPages = {
- page: 2,
- name: 'http',
- actions: ['Previous', 'Next'],
- inputs: [
- { name: 'url', validator: monitorValidators.httpUrl },
- { name: 'method', validator: monitorValidators.httpMethod },
- {
- name: 'valid_status_codes',
- validator: monitorValidators.httpStatusCodes,
- },
- ],
-};
-
-const tcpPages = {
- page: 2,
- name: 'tcp',
- actions: ['Previous', 'Next'],
- inputs: [
- { name: 'url', validator: monitorValidators.tcpHost },
- { name: 'port', validator: monitorValidators.tcpPort },
- ],
-};
-
-const intervalPage = {
- page: 3,
- name: 'interval',
- actions: ['Previous', 'Submit'],
- inputs: [
- { name: 'interval', validator: monitorValidators.interval },
- { name: 'retryInterval', validator: monitorValidators.retryInterval },
- { name: 'requestTimeout', validator: monitorValidators.requestTimeout },
- ],
-};
-
const defaultInputs = {
- valid_status_codes: ['200-299'],
+ type: 'http',
+ method: 'HEAD',
interval: 60,
retryInterval: 60,
requestTimeout: 30,
+ notificationType: 'All',
+ valid_status_codes: ['200-299'],
};
const useMonitorForm = (
@@ -60,100 +18,24 @@ const useMonitorForm = (
closeModal,
setMonitor
) => {
- const [form, setForm] = useState(initialPage);
const [inputs, setInput] = useState(values);
const [errors, setErrors] = useState({});
const handleInput = (name, value) => {
- setInput({ ...inputs, [name]: value });
- };
-
- const handlePageNext = () => {
- const errorsObj = {};
-
- form.inputs.forEach((input) => {
- const { name, validator } = input;
- const value = inputs[name];
-
- if (validator) {
- const error = validator(value);
-
- if (error) {
- errorsObj[name] = error;
- }
- }
- });
-
- if (Object.keys(errorsObj).length) {
- setErrors(errorsObj);
- return;
- }
-
- const type = inputs.type;
-
- if (type === 'http' && form.page === 1) {
- setForm(httpPages);
- }
-
- if (type === 'tcp' && form.page === 1) {
- setForm(tcpPages);
- }
-
- if (form.page === 2) {
- setForm(intervalPage);
- }
-
- setErrors({});
- };
-
- const handlePagePrevious = () => {
- if (form.page === 1) {
- return;
- }
-
- if (form.page === 2) {
- setForm(initialPage);
- return;
- }
-
- if (inputs.type === 'http') {
- setForm(httpPages);
- return;
- }
-
- if (inputs.type === 'tcp') {
- setForm(tcpPages);
- return;
- }
+ setInput((prev) => ({ ...prev, [name]: value }));
};
const handleActionButtons = (action) => () => {
switch (action) {
- case 'Next':
- handlePageNext();
- break;
- case 'Previous':
- handlePagePrevious();
- break;
- case 'Submit': {
- const errorsObj = {};
-
- form.inputs.forEach((input) => {
- const { name, validator } = input;
- const value = inputs[name];
-
- if (validator) {
- const error = validator(value);
-
- if (error) {
- errorsObj[name] = error;
- }
- }
- });
+ case 'Create': {
+ const errorsObj =
+ inputs.type === 'http'
+ ? monitorValidators.http(inputs)
+ : monitorValidators.tcp(inputs);
- if (Object.keys(errorsObj).length) {
+ if (errorsObj) {
setErrors(errorsObj);
- return;
+ break;
}
setErrors({});
@@ -161,18 +43,18 @@ const useMonitorForm = (
handleMonitor(inputs, isEdit, closeModal, setMonitor);
break;
}
+
+ case 'Cancel': {
+ closeModal();
+ break;
+ }
+
default:
break;
}
};
- return {
- form,
- inputs,
- errors,
- handleActionButtons,
- handleInput,
- };
+ return { inputs, errors, handleActionButtons, handleInput };
};
export default useMonitorForm;
diff --git a/app/hooks/useNotificationForm.jsx b/app/hooks/useNotificationForm.jsx
new file mode 100644
index 0000000..a17c76b
--- /dev/null
+++ b/app/hooks/useNotificationForm.jsx
@@ -0,0 +1,64 @@
+import { useReducer } from 'react';
+import NotificationValidators from '../../shared/validators/notifications';
+import { NotificationValidatorError } from '../../shared/utils/errors';
+import { createPostRequest } from '../services/axios';
+
+const defaultInputs = {
+ platform: 'Discord',
+ messageType: 'basic',
+};
+
+const inputReducer = (state, action) => {
+ if (action.key === 'platform') {
+ return { [action.key]: action.value, messageType: state.messageType };
+ }
+
+ return { ...state, [action.key]: action.value };
+};
+
+const errorReducer = (state, action) => {
+ return { [action.key]: action.value };
+};
+
+const useNotificationForm = (values = defaultInputs, isEdit, closeModal) => {
+ const [inputs, handleInput] = useReducer(inputReducer, values);
+ const [errors, handleError] = useReducer(errorReducer, {});
+
+ const handleSubmit = async (addNotification) => {
+ try {
+ const validator = NotificationValidators[inputs.platform];
+ if (!validator) {
+ throw new Error('Invalid platform');
+ }
+
+ const result = validator(inputs);
+
+ const path = isEdit
+ ? '/api/notifications/edit'
+ : '/api/notifications/create';
+
+ const response = await createPostRequest(path, isEdit ? inputs : result);
+
+ if (response.status !== 201 && response.status !== 200) {
+ throw new Error(response.data.message);
+ }
+
+ addNotification(response.data);
+ closeModal();
+ } catch (error) {
+ if (error instanceof NotificationValidatorError) {
+ handleError({ key: error.key, value: error.message });
+ return;
+ }
+
+ handleError({
+ key: 'general',
+ value: 'Unknown error occured. Please try again.',
+ });
+ }
+ };
+
+ return { inputs, errors, handleInput, handleError, handleSubmit };
+};
+
+export default useNotificationForm;
diff --git a/app/hooks/useTheme.jsx b/app/hooks/useTheme.jsx
deleted file mode 100644
index db003fd..0000000
--- a/app/hooks/useTheme.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState } from 'react';
-
-const useTheme = () => {
- const initialTheme = localStorage.getItem('theme') || 'dark';
- const initialColor = localStorage.getItem('color') || 'Green';
-
- const [theme, updateTheme] = useState({
- type: initialTheme,
- color: initialColor,
- });
-
- const isDark = theme?.type?.startsWith('dark');
-
- const setTheme = (input) => {
- window.localStorage.setItem('theme', input);
- document.documentElement.dataset.theme = input;
-
- return updateTheme({ ...theme, type: input });
- };
-
- const setColor = (color) => {
- window.localStorage.setItem('color', color);
- document.documentElement.dataset.color = color;
-
- return updateTheme({ ...theme, color });
- };
-
- return { theme, isDark, setTheme, setColor };
-};
-
-export default useTheme;
diff --git a/app/hooks/useTime.jsx b/app/hooks/useTime.jsx
deleted file mode 100644
index 73765e0..0000000
--- a/app/hooks/useTime.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useState } from 'react';
-
-const useTime = () => {
- const timezone =
- window?.localStorage?.getItem('timezone') ||
- Intl.DateTimeFormat().resolvedOptions().timeZone;
-
- const dateformat =
- window?.localStorage?.getItem('dateformat') || 'DD/MM/YYYY';
-
- const timeformat = window?.localStorage?.getItem('timeformat') || 'HH:mm:ss';
-
- const [state, setState] = useState({
- timezone,
- dateformat,
- timeformat,
- });
-
- const setTimezone = (timezone) => {
- setState((prevState) => ({
- ...prevState,
- timezone,
- }));
- window.localStorage.setItem('timezone', timezone);
- };
-
- const setDateformat = (dateformat) => {
- setState((prevState) => ({
- ...prevState,
- dateformat,
- }));
- window.localStorage.setItem('dateformat', dateformat);
- };
-
- const setTimeformat = (timeformat) => {
- setState((prevState) => ({
- ...prevState,
- timeformat,
- }));
- window.localStorage.setItem('timeformat', timeformat);
- };
-
- return {
- ...state,
- setTimezone,
- setDateformat,
- setTimeformat,
- };
-};
-
-export default useTime;
diff --git a/app/layout/global.jsx b/app/layout/global.jsx
index 3369927..55cecd9 100644
--- a/app/layout/global.jsx
+++ b/app/layout/global.jsx
@@ -19,6 +19,7 @@ const GlobalLayout = ({ children }) => {
modalStore: { isOpen, content, glassmorph },
globalStore: { setMonitors, setTimeouts },
userStore: { setUser },
+ notificationStore: { setNotifications },
} = useContextStore();
const navigate = useNavigate();
@@ -30,11 +31,13 @@ const GlobalLayout = ({ children }) => {
try {
const user = await createGetRequest('/api/user');
const monitors = await createGetRequest('/api/user/monitors');
+ const notifications = await createGetRequest('/api/notifications');
const data = monitors?.data || [];
setUser(user?.data);
setMonitors(data);
setTimeouts(data, fetchMonitorById);
+ setNotifications(notifications?.data || []);
} catch (error) {
console.log(error);
if (error.response?.status === 401) {
diff --git a/app/main.jsx b/app/main.jsx
index 115dac9..da9e8cc 100644
--- a/app/main.jsx
+++ b/app/main.jsx
@@ -18,6 +18,7 @@ import GlobalLayout from './layout/global';
import Setttings from './pages/settings';
import Verify from './pages/verify';
import ErrorPage from './pages/error';
+import Notifications from './pages/notifications';
ReactDOM.createRoot(document.getElementById('root')).render(
@@ -34,6 +35,16 @@ ReactDOM.createRoot(document.getElementById('root')).render(
}
/>
+
+
+
+
+
+ }
+ />
{
+ const navigate = useNavigate();
return (
@@ -14,7 +18,7 @@ const ErrorPage = () => {
Sorry, couldn't find what you're looking for!
-
diff --git a/app/pages/error.scss b/app/pages/error.scss
index 26adfc7..5764586 100644
--- a/app/pages/error.scss
+++ b/app/pages/error.scss
@@ -1,4 +1,4 @@
-@import '../styles/global.scss';
+@use '../styles/breakpoints.scss' as *;
.error-page-container {
display: flex;
diff --git a/app/pages/home.jsx b/app/pages/home.jsx
index be08a37..3dae015 100644
--- a/app/pages/home.jsx
+++ b/app/pages/home.jsx
@@ -1,10 +1,3 @@
-// import local files
-import {
- MonitorCard,
- MonitorList,
- MonitorCompact,
-} from '../components/home/monitor';
-
// import styles
import './home.scss';
@@ -13,6 +6,11 @@ import { useState } from 'react';
import { observer } from 'mobx-react-lite';
// import local files
+import {
+ MonitorCard,
+ MonitorList,
+ MonitorCompact,
+} from '../components/home/monitor';
import useContextStore from '../context';
import HomeMenu from '../components/home/menu';
import MonitorTable from '../components/home/monitor/layout/table';
@@ -20,7 +18,7 @@ import useLocalStorageContext from '../hooks/useLocalstorage';
const Home = () => {
const {
- globalStore: { getAllMonitors },
+ globalStore: { allMonitors },
} = useContextStore();
const [search, setSearch] = useState('');
@@ -31,9 +29,7 @@ const Home = () => {
setStatus('all');
};
- const monitors = getAllMonitors();
-
- const monitorsList = monitors
+ const monitorsList = allMonitors
.filter((monitor = {}) => {
const matchesSearch =
monitor.name?.toLowerCase().includes(search.toLowerCase()) ||
diff --git a/app/pages/home.scss b/app/pages/home.scss
index 79e4919..ce11de1 100644
--- a/app/pages/home.scss
+++ b/app/pages/home.scss
@@ -1,4 +1,4 @@
-@import '../styles/global.scss';
+@use '../styles/pxToRem.scss' as *;
.home-container {
display: flex;
diff --git a/app/pages/login.jsx b/app/pages/login.jsx
index 4e5e91d..6b16330 100644
--- a/app/pages/login.jsx
+++ b/app/pages/login.jsx
@@ -25,7 +25,7 @@ const Login = () => {
{errors['general'] && (
- {errors['general']}
+ {errors['general']}
)}
{
diff --git a/app/pages/monitor/style.scss b/app/pages/monitor.scss
similarity index 77%
rename from app/pages/monitor/style.scss
rename to app/pages/monitor.scss
index 1bedd12..a5a74c3 100644
--- a/app/pages/monitor/style.scss
+++ b/app/pages/monitor.scss
@@ -1,4 +1,4 @@
-@import '../../styles/global.scss';
+@use '../styles/pxToRem.scss' as *;
.monitor-container {
display: flex;
diff --git a/app/pages/notifications.jsx b/app/pages/notifications.jsx
new file mode 100644
index 0000000..bcef022
--- /dev/null
+++ b/app/pages/notifications.jsx
@@ -0,0 +1,85 @@
+// import styles
+import './notifications.scss';
+
+// import dependencies
+import { observer } from 'mobx-react-lite';
+
+// import local files
+import useContextStore from '../context';
+import NotificationsMenu from '../components/notifications/menu';
+import NotificationCard from '../components/notifications/layout/card';
+import { useMemo, useState } from 'react';
+import { MdNotifications } from '../components/icons';
+
+const Notifications = () => {
+ const {
+ notificationStore: { allNotifications },
+ } = useContextStore();
+
+ const [search, setSearch] = useState(null);
+ const [platform, setPlatform] = useState('All');
+
+ const handlePlatformUpdate = (platform) => {
+ setPlatform(platform);
+ };
+
+ const handleSearchUpdate = (search = '') => {
+ setSearch(search.trim());
+ };
+
+ const notifications = useMemo(
+ () =>
+ allNotifications.filter((notification) => {
+ if (platform !== 'All' && notification.platform !== platform) {
+ return false;
+ }
+
+ if (search) {
+ return (
+ notification.friendlyName
+ .toLowerCase()
+ .includes(search.toLowerCase()) ||
+ notification.platform.toLowerCase().includes(search.toLowerCase())
+ );
+ }
+ return true;
+ }),
+ [platform, search, allNotifications]
+ );
+
+ return (
+
+
+
+ {notifications.length === 0 && (
+
+
+
+
+
No notifications found
+
+ )}
+
+
+ {notifications.length > 0 &&
+ notifications.map((notification) => (
+
+ ))}
+
+