background

I had nothing to do at home last weekend. I wanted to write something. I had no idea what to write. Then I remembered a classmate who went to Airbnb and said that Airbnb’s interview style was based on practical work. She had 8 rounds of interviews, all of which were code writing (2018), which was very scary.

Code questions are not difficult, simple to share a few questions:

Then I see implementing a Todo List.

It’s not difficult, but it’s flexible. There are no restrictions. You can use it freely and you can see a lot of different aspects of the candidate.

Let’s start with this one. Let’s do it.

Use this example to learn how to use React Context, Hooks, and how to write the CURD Api using Golang.

Without further ado, let’s get to the point.

Function implementation

The first is to create a new project, no tools, CRA or anything, I used a tool I wrote before, simple project, but these don’t matter, directly to the code:

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

App

// App.js

import React from "react";
import { TodosProvider } from './Store'
import { TodoList } from './TodoList'

const App = () => {
  return (
    <TodosProvider>
      <TodoList />
    </TodosProvider>
  );
}

export default App
Copy the code

Store

Here I create two contexts, one to store the data and one to update the data.

Such as:

const initialState = []

const StateContext = React.createContext(initialState)
const UpdateContext = React.createContext(null)
Copy the code

Components wrapped by the Context can access the values passed in.

Complete code:

// Store.js
import React from 'react'
import produce from 'immer'

// An array of todos, where a todo looks like this: 
// { id: string; title: string; isCompleted: boolean }
const initialTodos = [{
  id: 1,
  title: "One",
  isCompleted: false
}, {
  id: 2,
  title: "Two",
  isCompleted: false
}, {
  id: 3,
  title: "Three",
  isCompleted: false
}]

const StateContext = React.createContext(initialTodos)
const UpdateContext = React.createContext(null)

export function TodosProvider({ children }) {
  const [todos, updateTodos] = React.useReducer(produce, initialTodos)
  return (
    <UpdateContext.Provider value={updateTodos}>
      <StateContext.Provider value={todos}>
        {children}
      </StateContext.Provider>
    </UpdateContext.Provider>
  )
}

export function useTodos() {
  return [React.useContext(StateContext), React.useContext(UpdateContext)]
}
Copy the code

Todo subject

The implementation here is also very simple, I first simple to do two small functions, one is to complete a certain item, one is to delete a certain item, complete code:

// TodoList import React from 'react'; import { useTodos } from './Store' export function TodoList() { const [todos, updateTodos] = useTodos() const deleteTodo = id => updateTodos(todos => { const todoIdxToDelete = todos.findIndex(todo => todo.id === id) todos.splice(todoIdxToDelete, 1) }) const completeTodo = id => updateTodos(todos => { todos.find(todo => todo.id === id).isCompleted = true }) return ( <ul> {todos.map(todo => ( <li key={todo.id} style={todo.isCompleted ? { color: 'red' } : { color: 'green' }}> <span>{todo.title}</span> <button onClick={() => deleteTodo(todo.id)}>Delete</button> <button onClick={() =>  completeTodo(todo.id)}>Complete</button> </li> ))} </ul> ) }Copy the code

The DEMO:

Let’s do it together.

If you have done this step, the data will be lost as soon as you refresh it, so you can simply save it to the database.

Back-end interface implementation:

The CURD interface looks like this:

Api: C

Api: U

Api: R

Api: D

The code is relatively simple, and you can see what it does at a glance, so I won’t explain more.

The full back-end code is here:

Github.com/beMySun/go….

The complete front-end code is here: github.com/beMySun/re….

Sequel Pro makes it easy to use mySql to add tables to your database

If you don’t want to use this, you can also use the command line tool.

Post a few more commands that you can use:

show databases;

use database;

describe todos_tab;

select * from todos_tab limit 10;

Add a field: text

Add a field: isCompleted

The last

The functionality is simple, but there are a lot of things to consider when doing it.

If you want to learn, you can download the code and run it yourself.

The full back-end code is here: github.com/beMySun/go….

The complete front-end code is here: github.com/beMySun/re….

This backend demo contains the complete CURD, is a good learning demo, I hope to help you learn.

His prose is careless and careless.

If there is any mistake, welcome to correct, thank you.

The above.

Don’t forget to give this article a thumbs up if it helped

Resources: learnku.com/golang/t/.. … Gorm. IO/docs/update…