Skip to content

Instantly share code, notes, and snippets.

Avatar

Daniel Dughila intojs

View GitHub Profile
View MVCComponent.js
const MVCComponent = () => {
const [model, dispatch] = useReducer(reducer, initialModel);
const handleEvent = () => {
dispatch(action);
};
return <View model={model} handleEvent={handleEvent} />;
};
View withValidation.js
const withValidation = (state, field, value) => {
const changedState = {
...state,
fields: {
...state.fields,
[field]: {
...state.fields[field],
value,
},
},
View NewsletterForm.js
const NewsletterForm = ({ newsletterOptions, onSubmit }) => {
const [model, dispatch] = useReducer(reducer, initialModel);
useEffect(() => {
dispatch(actions.setNewsletterOptions(newsletterOptions));
}, [newsletterOptions]);
const handleFieldChange = (change) => {
dispatch(actions.changeField(change));
};
View isNewsletterFormModelValid.js
const isNewsletterFormModelValid = (model) => {
const {
fields: { fullName, newsletter },
} = model;
return !!(fullName.value && fullName.value.length > 2 && newsletter.value);
};
View NewsletterFormActions.js
const setNewsletterOptions = (newsletterOptions) => ({
type: actionTypes.SET_NEWSLETTERS_OPTIONS,
payload: { newsletterOptions },
});
const changeField = (change) => ({
type: actionTypes.CHANGE_FIELD,
payload: change,
});
View Counter.js
let counter = 0;
const count = () => {
counter += 1;
}
View newsletterFormReducer.js
const newsletterFormReducer = (state, action) => {
const { type, payload } = action;
switch (type) {
case actionTypes.SET_NEWSLETTERS_OPTIONS:
return {
...state,
isLoading: payload.newsletterOptions.length === 0,
fields: {
...state.fields,
View NewsletterFormView.js
const NewsletterFormView = (props) => {
const classes = useStyles();
const {
model: {
isLoading,
isValid,
fields: { newsletter },
},
onFieldChange,
@intojs
intojs / NewsletterFormModel.js
Last active Feb 21, 2021
React MVC - Initial model
View NewsletterFormModel.js
const NewsletterFormModel = {
isLoading: true,
isValid: false,
fields: {
fullName: {
value: "",
},
newsletter: {
value: "",
options: [],
@intojs
intojs / Controller.js
Created Nov 21, 2020
React MVC - Controller
View Controller.js
class Controller {
#model;
initialize() {
this.#model = new Model();
const view = new View(this.#handleIncrementBtnClick);
this.#model.attach(view);
}