@modernman00/shared-js-lib 1.2.6 → 1.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/ShowResponse.js +86 -81
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
npm Usage Guide for @modernman00/shared-js-lib
|
|
2
|
+
This guide explains how to install and use the @modernman00/shared-js-lib package, now available on the npm registry, in your Node.js or JavaScript project.
|
|
3
|
+
Installation
|
|
4
|
+
To install the package from npm, run the following command in your project directory:
|
|
5
|
+
npm install @modernman00/shared-js-lib
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
This installs the latest published version from the npm registry.
|
|
9
|
+
Ensure you have an internet connection and npm access to the @modernman00 scope (authentication may be required if the package is private).
|
|
10
|
+
|
|
11
|
+
Usage
|
|
12
|
+
The package exports various utility functions from its modules (e.g., Http.js, Utility.js). Import and use them as follows:
|
|
13
|
+
Example: Using fetchData from Http.js
|
|
14
|
+
Assume Http.js exports a function to fetch data using Axios:
|
|
15
|
+
import { fetchData } from '@modernman00/shared-js-lib';
|
|
16
|
+
|
|
17
|
+
async function getUserData() {
|
|
18
|
+
try {
|
|
19
|
+
const userData = await fetchData('/api/users/1', { method: 'GET' });
|
|
20
|
+
console.log(userData);
|
|
21
|
+
} catch (error) {
|
|
22
|
+
console.error('Error fetching data:', error.message);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
getUserData();
|
|
27
|
+
|
|
28
|
+
Example: Using sanitizeInput from Utility.js
|
|
29
|
+
Assume Utility.js exports a sanitization function:
|
|
30
|
+
import { sanitizeInput } from '@modernman00/shared-js-lib';
|
|
31
|
+
|
|
32
|
+
const cleanInput = sanitizeInput('<script>alert("xss")</script>');
|
|
33
|
+
console.log(cleanInput); // Sanitized output
|
|
34
|
+
|
|
35
|
+
Configuration
|
|
36
|
+
|
|
37
|
+
Ensure your project uses ES Modules by adding "type": "module" to your package.json, or use a bundler like Laravel Mix/Webpack.
|
|
38
|
+
If using Laravel Mix, configure an alias in webpack.mix.js:const mix = require('laravel-mix');
|
|
39
|
+
const path = require('path');
|
|
40
|
+
|
|
41
|
+
mix.js('resources/js/app.js', 'public/js')
|
|
42
|
+
.webpackConfig({
|
|
43
|
+
resolve: {
|
|
44
|
+
alias: {
|
|
45
|
+
'@shared': path.resolve(__dirname, 'node_modules/@modernman00/shared-js-lib')
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
Updating the Package
|
|
53
|
+
To update to the latest version, run:
|
|
54
|
+
npm update @modernman00/shared-js-lib
|
|
55
|
+
|
|
56
|
+
Check the latest version on the npm website (https://www.npmjs.com/package/@modernman00/shared-js-lib) or with:
|
|
57
|
+
npm info @modernman00/shared-js-lib version
|
|
58
|
+
|
|
59
|
+
If a specific version is needed, install it directly:
|
|
60
|
+
npm install @modernman00/shared-js-lib@1.0.3
|
|
61
|
+
|
|
62
|
+
Rebuild assets if using a bundler:
|
|
63
|
+
npm run dev
|
|
64
|
+
|
|
65
|
+
Troubleshooting
|
|
66
|
+
|
|
67
|
+
Installation Fails: Ensure you have npm access and the package is published. Use verbose mode for details:npm install @modernman00/shared-js-lib --verbose
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
TypeScript Errors: Add declaration files (e.g., Http.d.ts) to the package if needed, and republish.
|
|
71
|
+
Permission Issues: If the package is scoped and private, log in to npm:npm login
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
package/ShowResponse.js
CHANGED
|
@@ -1,93 +1,98 @@
|
|
|
1
1
|
import { id } from './UtilityHtml.js';
|
|
2
|
-
import axios from
|
|
3
|
-
export const showError = (e) =>
|
|
2
|
+
import axios from 'axios';
|
|
3
|
+
export const showError = (e) =>
|
|
4
|
+
console.error(
|
|
5
|
+
`${e.name} at ${e.fileName}:${e.lineNumber} - ${e.message}\n${e.stack}`,
|
|
6
|
+
);
|
|
4
7
|
|
|
5
8
|
export const msgException = (errorMessage) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
|
|
9
|
+
throw new Error(errorMessage);
|
|
10
|
+
};
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
|
-
*
|
|
13
|
+
*
|
|
13
14
|
* @param {*} elementId - element id
|
|
14
15
|
* @param {*} addClass either a success or danger class (green or red)
|
|
15
16
|
* @param {*} message - html message to convey success or failure
|
|
16
17
|
* @param {*} timer - timer for the message to disappear- default is 5 secs
|
|
17
18
|
*/
|
|
18
|
-
export const showNotification = (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
* and decrements the notification count by 1. If the request is unsuccessful, it logs an error message.
|
|
40
|
-
*/
|
|
19
|
+
export const showNotification = (
|
|
20
|
+
elementId,
|
|
21
|
+
addClass,
|
|
22
|
+
message,
|
|
23
|
+
timer = 5000,
|
|
24
|
+
) => {
|
|
25
|
+
// display the success information for 10sec
|
|
26
|
+
id(`${elementId}`).style.display = 'block'; // unblock the notification
|
|
27
|
+
id(`${elementId}`).classList.add(addClass); // add the success class
|
|
28
|
+
id(`${elementId}`).innerHTML = message; // error element
|
|
29
|
+
id('loader').classList.remove('loader'); // remove loader
|
|
30
|
+
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
id(`${elementId}`).style.backgroundColor = '';
|
|
33
|
+
id(`${elementId}`).style.color = '';
|
|
34
|
+
id(`${elementId}`).innerHTML = '';
|
|
35
|
+
}, timer);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/************* ✨ Windsurf Command 🌟 *************/
|
|
39
|
+
export const deleteNotification = async (elementId, yourId, famCode) => {
|
|
41
40
|
export const deleteNotification = async (elementId) => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
// Make sure required variables are defined before using them
|
|
54
|
-
if (
|
|
55
|
-
typeof yourId === 'undefined' ||
|
|
56
|
-
typeof famCode === 'undefined'
|
|
57
|
-
) {
|
|
58
|
-
msgException("Required parameters (yourId or famCode) are not defined");
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
const url = `/removeNotification/${yourId}/${famCode}/${data}`
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
const response = await axios.put(url)
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
if (response.data.message === "Notification marked as read") {
|
|
68
|
-
|
|
69
|
-
// remove a html element with notificationBar after 2 mins
|
|
70
|
-
notificationHTML.remove()
|
|
71
|
-
|
|
72
|
-
// reduce the notification count as you have deleted the notification
|
|
73
|
-
|
|
74
|
-
const newValues = parseInt(sessionStorage.getItem('notificationCount') - 1)
|
|
75
|
-
id('notification_count').innerHTML = newValues;
|
|
76
|
-
} else {
|
|
77
|
-
msgException("Error removing notification" + " " + response.data.message);
|
|
78
|
-
}
|
|
41
|
+
// Extract the user ID from the target ID
|
|
42
|
+
const senderId = elementId.replace('deleteNotification', 'notificationBar');
|
|
43
|
+
|
|
44
|
+
const elementData = id(elementId);
|
|
45
|
+
const data = elementData.getAttribute('data-id');
|
|
46
|
+
// change the background of the clicked element
|
|
47
|
+
const notificationHTML = id(senderId);
|
|
48
|
+
// Make sure required variables are defined before using them
|
|
49
|
+
if (typeof yourId === 'undefined' || typeof famCode === 'undefined') {
|
|
50
|
+
msgException('Required parameters (yourId or famCode) are not defined');
|
|
79
51
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
52
|
+
const url = `/removeNotification/${yourId}/${famCode}/${data}`;
|
|
53
|
+
const response = await axios.put(url);
|
|
54
|
+
if (response.data.message === 'Notification marked as read') {
|
|
55
|
+
// remove a html element with notificationBar after 2 mins
|
|
56
|
+
notificationHTML.remove();
|
|
57
|
+
// reduce the notification count as you have deleted the notification
|
|
58
|
+
const newValues = parseInt(
|
|
59
|
+
sessionStorage.getItem('notificationCount') - 1,
|
|
60
|
+
);
|
|
61
|
+
id('notification_count').innerHTML = newValues;
|
|
62
|
+
} else {
|
|
63
|
+
msgException('Error removing notification' + ' ' + response.data.message);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
/******* 43b70b66-cdee-4764-a1e7-4f21be65d0d7 *******/
|
|
67
|
+
|
|
68
|
+
const url = `/removeNotification/${yourId}/${famCode}/${data}`;
|
|
69
|
+
|
|
70
|
+
try {
|
|
71
|
+
const response = await axios.put(url);
|
|
72
|
+
|
|
73
|
+
if (response.data.message === 'Notification marked as read') {
|
|
74
|
+
notificationHTML.remove();
|
|
75
|
+
const newValues = parseInt(
|
|
76
|
+
sessionStorage.getItem('notificationCount') - 1,
|
|
77
|
+
);
|
|
78
|
+
id('notification_count').innerHTML = newValues;
|
|
79
|
+
} else {
|
|
80
|
+
console.error('Error removing notification', response.data.message);
|
|
81
|
+
}
|
|
82
|
+
} catch (error) {
|
|
83
|
+
console.error('Error removing notification', error);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export const showResponse = (theId, message, status) => {
|
|
88
|
+
const responseEl = id(theId);
|
|
89
|
+
const col = status ? 'green' : 'red';
|
|
90
|
+
|
|
91
|
+
responseEl.innerHTML = message;
|
|
92
|
+
responseEl.style.color = 'green';
|
|
93
|
+
responseEl.style.backgroundColor = col;
|
|
94
|
+
responseEl.style.color = 'white';
|
|
95
|
+
setTimeout(() => {
|
|
96
|
+
responseEl.innerHTML = '';
|
|
97
|
+
}, 5000); // Disappear after 5 seconds
|
|
98
|
+
};
|