Skip to main content

MongoDB Connection

2 likes • Oct 15, 2022
JavaScript
Loading...
Download

More JavaScript Posts

Redux Slice

JoeCamRoberon
0 likes • Mar 11, 2021
JavaScript
import { createSlice } from "@reduxjs/toolkit";
const alert = createSlice({
name: "alert",
initialState: {
msg: "",
status: "",
},
reducers: {
set_alert: (state, action) => {
return {
...state,
msg: action.payload.msg,
status: action.payload.status,
};
},
clear_alert: (state, action) => {
return {
...state,
msg: "",
status: "",
};
},
},
});
export default alert.reducer;
const { set_alert, clear_alert } = alert.actions;
export const setAlert = (msg, status) => dispatch => {
dispatch(set_alert({ msg, status }));
setTimeout(() => dispatch(clear_alert()), 4000);
};
export const clearAlert = () => dispatch => {
dispatch(clear_alert());
};

Check if array is empty

CodeCatch
0 likes • Nov 19, 2022
JavaScript
arr = [] // empty array
const isEmpty = arr => !Array.isArray(arr) || arr.length === 0;
// Examples
isEmpty([]); // true
isEmpty([1, 2, 3]); // false

compact object

CodeCatch
0 likes • Nov 19, 2022
JavaScript
const compactObject = val => {
const data = Array.isArray(val) ? val.filter(Boolean) : val;
return Object.keys(data).reduce(
(acc, key) => {
const value = data[key];
if (Boolean(value))
acc[key] = typeof value === 'object' ? compactObject(value) : value;
return acc;
},
Array.isArray(val) ? [] : {}
);
};
const obj = {
a: null,
b: false,
c: true,
d: 0,
e: 1,
f: '',
g: 'a',
h: [null, false, '', true, 1, 'a'],
i: { j: 0, k: false, l: 'a' }
};
compactObject(obj);
// { c: true, e: 1, g: 'a', h: [ true, 1, 'a' ], i: { l: 'a' } }
// Vanilla JS Solution:
var app = document.getElementById('app');
var typewriter = new Typewriter(app, { loop: true });
typewriter
.typeString("I'm John and I'm a super cool web developer")
.pauseFor(3000)
.deleteChars(13) // "web developer" = 13 characters
.typeString("person to talk with!") // Will display "I'm John and I'm a super cool person to talk with!"
.start();
// React Solution:
import Typewriter from 'typewriter-effect';
<Typewriter
options={{ loop: true }}
onInit={typewriter => {
typewriter
.typeString("I'm John and I'm a super cool web developer")
.pauseFor(3000)
.deleteChars(13) // "web developer" = 13 characters
.typeString("person to talk with!") // Will display "I'm John and I'm a super cool person to talk with!"
.start();
}}
/>

getSelectedText

AustinLeath
0 likes • Nov 18, 2022
JavaScript
// Get the text that the user has selected
const getSelectedText = () => window.getSelection().toString();
getSelectedText();

Extracting components

CodeCatch
0 likes • Nov 19, 2022
JavaScript
function formatDate(date) {
return date.toLocaleDateString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img
className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'https://placekitten.com/g/64/64',
},
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author}
/>,
document.getElementById('root')
);