# 程式語言 Project: HackMDir 開發日誌

###### tags: `程式語言`, `HackMDir`

## Table of Contents

[TOC]

### Day 1

1. Add webpack4 to compile the project
* webpack-cli
* webpack-dev-server
* webpack-reload-extension
* copy-webpack-plugin
* css-loader | node-sass | sass-loader | style-loader
* @babel/core | @babel/preset-env | babel-loader | babel-polyfill
2. Contruct basic ui

### Day 2

1. Add html-loader to load the component
2. Add loading effect while fetching data

### Day 3

1. Add svgs
2. Sort out the UI layout
3. Rewrite the render function in main module

### Day4

1. Styling modal component
2. Use event bus to allow module communication

### Day5

1. Split the tab content to component
2. Use postcss to transfer css px unit to rem unit

### Day6

1. Add delHistoryNote API
2. Connect delHistoryNote API with frontend
3. Fix drag error

### Day7

1. Add search feature in recent/dir tab component

### Day8

1. Use React to build the frontend GUI
2. Set up webpack with React and chrome extension reloader
3. Build the basic page with Recent/Personal tab

### Day9

1. Use Redux to manage the state
2. Add OperationContent component
3. Add select-all operation in OperationContent component
4. Add delete operation in OperationContent component

### Day10

1. Add permission operation in OperationContent component
2. Enhance the performance by using React.PureComponent

### Day11

1. Refactor the SelectedList redux with ES6 spec
2. Add bookmode operation in OperationContent component

### Day12

1. Use react-window to reduce unnecessary render
2. Remove unnecessary plugin

### Day13

1. Refactor the Redux-related file
2. Add group operation in OperationContent component
3. Fix the delete operation error
4. fix the error that dropped item can not be selected

### Day14

1. Sort out whole folder structure
2. use webpack-extension-reloader instead
3. fix emit renaming event with right click
4. add snackbar pool to display the message
5. avoid unneccessary search logic in tabs
6. transfer Chinese language to English language on GUI
7. styling all modal
10. remove postcss-loader and postcss-pxtorem
11. remove console.log in production mode

### React.PureComponent
React.PureComponent is used to prevent the unneccessary re-render while assigning the same value to the props.