Hello community! I am currently working on the markdown editor project for the following course:
Markdown Editor Project Descriptione
I posted and asked for help on the sites forums, and have not gotten a response for multiple days, so I hope it is okay to ask here. I have all the basics of the project functioning (according to their tests they provide). I think I am starting to understand React more, but I am still struggling with Redux. I reviewed the material on React and Redux section of the course while attempting to implement it into my project. However, I have the strong suspicion that I did not add it in properly because the Redux itself doesn’t feel like it is doing anything significant. I could be wrong, but I wanted to check first before proceeding with SCSS. I am currently using vite to create my applications. The following below is the file in question (App.jsx):
import React from 'react';
import {Provider, connect} from 'react-redux';
import {createStore} from 'redux';
import {marked} from "https://cdnjs.cloudflare.com/ajax/libs/marked/13.0.2/lib/marked.esm.js";
const CODE_CHANGED = 'CODE CHANGED';
const defaultCode = "# This is the first header!\n" +
"## This is the second header!\n" +
"You can create links with markdown such as this one to YouTube [Click Me!](https://www.youtube.com)\n" +
"This is how a line of code is made: `console.log(\'hello world\')`.\n" +
"The following is an inline code block:\n" +
"```\nfunction showcase() {\n" +
" console.log(\'This is a function!\');\n" +
"}\n```\n\n\n" +
"You can create blockquotes like this: \n> Here is a blockquote\n\n" +
"The text can be **bold**!\n\n" +
"1. You can have\n2. an ordered list like this!\n\n- Or it can be\n- an unordered list instead!\n\n\n" +
"Finally, don't forget about images!\n";
const modifyCode = (changedCode) => {
return {
type: CODE_CHANGED,
changedCode
};
}
const codeReducer = (previousState, action) => {
switch(action.type) {
case CODE_CHANGED:
return action.changedCode;
default:
return previousState;
}
};
const store = createStore(codeReducer);
export default class AppWrapper extends React.Component {
render() {
return (
<Provider store={store}>
<Container />
</Provider>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1 className="text-center">React Markdown Editor</h1>
<Editor />
</div>
);
}
}
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
code: defaultCode
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState(() => ({
code: event.target.value
}));
};
render() {
return (
<div>
<h3 className='text-center'>Editor</h3>
<textarea id="editor" style={{width: "100%", height: "10em"}} onChange={this.handleChange} value={this.state.code}></textarea>
<Display code={this.state.code}/>
</div>
);
}
}
class Display extends React.Component {
constructor(props) {
super(props);
}
render() {
marked.use({
gfm: true,
breaks: true
});
return (
<div>
<h3 className='text-center'>Preview</h3>
<div id="preview" dangerouslySetInnerHTML={{__html: marked.parse(this.props.code)}}></div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
code: state
};
};
const mapDispatchToProps = (dispatch) => {
return {
newCode: (changedCode) => {
dispatch(modifyCode(changedCode))
}
}
};
const Container = connect(mapStateToProps, mapDispatchToProps)(App)
Here are some pictures as to what the page looks like (It has the editor, and then renders the markdown in the preview):
This is what it looks like when I run the tests:
Any help is very appreciated. I know it is quite a bit to look over, so please bear with me. Please click the link below if you want to see all of the code in my project, and let me know if anything else is needed. Thank you very much for your time, and sorry for the inconvenience!
