Skip to content

Instantly share code, notes, and snippets.

View mcjcloud's full-sized avatar
🏠
Working from home

Brayden Cloud mcjcloud

🏠
Working from home
View GitHub Profile
@mcjcloud
mcjcloud / App.tsx
Last active July 10, 2020 06:47
Asterisk Medium Article: App.tsx
// App component
// this component renders the entire app inside the Provider and Router
const App = (): JSX.Element => {
const classes = useStyles()
return (
<Provider store={store}>
<Router>
<div className={classes.app}>
{/* nav bar */}
<Navbar />
@mcjcloud
mcjcloud / index.ts
Created July 10, 2020 06:36
Asterisk Medium Article: backend entrypoint
import cors from "cors"
import express from "express"
import { todoRouter } from "./routes/todo"
// create a new express app
// this will be used to add all routes and request handlers
const app = express()
// allow express to accept application/json requests
app.use(express.json())
@mcjcloud
mcjcloud / TodoPage.tsx
Created July 10, 2020 06:39
Asterisk Medium Article: uncheckTodo
/**
* make a request to mark a to-do item as incomplete
*/
const uncheckTodo = (todo: TodoItem): void => {
if (!todo._id) {
return
}
dispatch(uncompleteTodo(todo._id))
}
@mcjcloud
mcjcloud / todo.ts
Created July 10, 2020 06:40
Asterisk Medium Article: uncompleteTodo
export const uncompleteTodo = (guid: string) => async (dispatch: Dispatch) => {
dispatch({ type: "TODO_UNCOMPLETED_STARTED" })
const response = await fetch(`${API_ENDPOINT}/todo/${guid}/uncomplete`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
}).then(r => r.json())
if (!!response && !!response?.todo) {
@mcjcloud
mcjcloud / TodoPage.tsx
Created July 10, 2020 06:41
Asterisk Medium Article: todo component actions
/**
* make a request to add a todo item
*/
const addTodo = (): void => {
dispatch(createTodo({
label: `Todo ${[...completeTodos, ...incompleteTodos].length}`,
}))
}
/**
@mcjcloud
mcjcloud / todo.ts
Created July 10, 2020 06:41
Asterisk Medium Article: action types
export interface TodoUncompletedStarted { type: "TODO_UNCOMPLETED_STARTED" }
export interface TodoUncompleted {
type: "TODO_UNCOMPLETED"
payload: {
todo: TodoItem
}
}
@mcjcloud
mcjcloud / TodoPage.tsx
Created July 10, 2020 06:42
Asterisk Medium Article: todo page hooks
const dispatch = useDispatch()
// complete and incomplete todos
// these are fetched from redux
const completeTodos = useSelector(selectCompleteTodos)
const incompleteTodos = useSelector(selectIncompleteTodos)
@mcjcloud
mcjcloud / TodoPage.tsx
Created July 10, 2020 06:42
Asterisk Medium Article: old JSX
{/* complete items */}
{completeTodos.length > 0 && (
<>
<div className={classes.header}>
<Typography component="h6" variant="h4">Completed Items</Typography>
</div>
{completeTodos.map(todo => (
<p key={todo._id}>{todo.label}</p>
))}
</>
@mcjcloud
mcjcloud / TodoPage.tsx
Created July 10, 2020 06:43
Asterisk Medium Article: new JSX
{/* complete items */}
{completeTodos.length > 0 && (
<>
<div className={classes.header}>
<Typography component="h6" variant="h4">Completed Items</Typography>
</div>
{completeTodos.map(todo => (
<div key={todo._id} className={classes.todoItem}>
<IconButton color="inherit" onClick={() => uncheckTodo(todo)}>
<ClearIcon />
@mcjcloud
mcjcloud / todo.ts
Created July 10, 2020 06:43
Asterisk Medium Article: reducer
// Reducer
const reducer = (state: TodoState = defaultState, action: TodoAction): TodoState => {
switch (action.type) {
...
case "TODO_UNCOMPLETED_STARTED": {
return { ...state, isUncompletingTodo: true }
}
case "TODO_UNCOMPLETED": {