The Great Cleanup

--- title: The Great Cleanup --- # <span style="font-size: 50px;">Dash | **The Great Dash Cleanup**</span>     *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium *[NPM]: Node Package Manager *[IDE]: Integrated Development Environment *[MERN]: MongoDB, Express, React, NodeJS *[Yarn]: Yet Another Resource Negotiator # Introduction <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:10px; width:600px" src="https://i.imgur.com/KWddks5.jpg" /></div> Many things in our world need cleaning up...the ocean, political instability...but among the many things one stands out: **the Dash codebase**! Only with a clean Dash codebase can we embark other challenges. I often wonder, "How can we solve world peace without?"...a question no politician has ever been able to answer...until now - with a clean Dash codebase we might be able to solve world peace. So, we embark on this once in a lifetime journey: to hollistically, thoroughly, and vividly clear out the codebase such that it resembles the bluest skies, the shiniest sword. ## Why are we doing this? We are going to be cleaning up the codebase such that it is a more navigatable, usable, and learnable codebase. One that we can more easily make additions to, and also one that we can learn from. <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:10px; width:600px" src="https://cdn-media-1.freecodecamp.org/images/0*q3-4kypImPD0VDPg.jpg " /></div> With a clean codebase, it will be a more enjoyable space for us, and also a more enjoyable space for everyone else in the future who interacts and uses it. ## What are we doing? The idea is that for the first week of the Summer `1st June - 7th June` to focus wholly on cleaning up the codebase. As we cleanup the codebase we will also be understanding it better! We will be doing the following things: - [ ] Getting everything we have been working on over the last semester into the codebase before we start cleaning up - [ ] Reorganising the folder and file structure - [ ] Establishing clear file and code naming conventions - [ ] Refactoring and reorganising code :::info ❗All cleanup will take place on a banch called `master-cleanup` ::: Another thing that is super important to note is that this is a learning process for everyone, so please don't feel at any time like there is a set-in-stone way of doing things - if you would like to propose an alternative just send an email to everyone working over the Summer, to include Bob, otherwise send it in the `#summer-22` slack channel! # A Place for Questions - Should dark mode vs. light mode be part of the Dashboard or the user? - glr: My intuition is that it should be a user setting as it is in many other applications. In particular since I see it as changing the default background + toolbar colors but not the document colors. # Part 1: Finishing and Merging Current Projects :::success **June 1st - June 3rd** ::: The first part of the cleanup is making sure that everything that is currently in progress is completed **and is merged with master**. :::danger This is vital because if we do not first merge with `master-cleanup`, doing this later will become much more difficult and will be full of merge conflicts! Note that since I have already begun cleaning up the `master-cleanup` branch there are bound to already be some merge conflicts. ::: So, although this may seem counterintuitive and against the point of cleaning up - the first thing that we all need to do is make sure that ongoing projects are merged and up-to-date (even if they are not bug-free). Please also ensure that the relevant sections of the documentation in [Dash-Documentation](https://github.com/brown-dash/Dash-Documentation) are also up-to date. ## Distribution of Tasks - Naafi and Mehek in charge of ensuring all `note-taking` and `audio/video` code that has been worked on over the last semester is in the `master-cleanup` branch. - Michael and Jenny in charge of ensuring that all `presentation` work is in the `master-cleanup` branch. # Part 2: File Structure :::success NOTE THAT THIS SECTION IS IN PROGRESS **June 2nd - June 4th** ::: At the moment the file structure is all over the place and looks incredibly menacing when you first load dash. <div style="text-align:center; margin-bottom: 20px"><img style="border-radius:10px; width:200px" src="https://i.imgur.com/EdYXLD2.png " /></div> We need to fix this! :::success Resources on File Structure: - [React tips on organising files](https://reactjs.org/docs/faq-structure.html) - *a very basic guide* - Avoid too much nesting - [An interesting opinion](https://reboot.studio/blog/folder-structures-to-organize-react-project/) - I propose we do feature based structuring ::: The current overall structure is as follows: ```python= src/ |-- client/ |-- debug/ |-- extensions/ |-- fields/ # make sure to read through `Doc.ts` |-- mobile/ # mobile specific files and components here |-- pen-gestures/ # includes GestureUtils.ts, what on earth is `ndollar.ts` (TODO: Ask Bob) |-- scraping/ # this will likely be removed (TODO: Ask Bob) |-- server/ # server and database related code |-- typings/ # it is unclear exactly what this is for and why we have it (TODO: Ask Bob) ``` The majority of restructuring in this section will take place in the `client` folder (though the other folders certainly need some work as well). The current layout of the `client` folder is as follows: ```python= client/ |-- apis/ |-- cognitive_services/ |-- documents/ |-- util/ # should become -> utils |-- views/ # contains all components |-- ... ``` We should reorganise the `views` folder in particular to have the following structure: <div style="text-align:center; margin-bottom: 20px"><img style="border-radius:10px;" src="https://i.imgur.com/5oBJRmH.png " /></div> :::info Please add to this list! **Rules**: - Folders should be lower case - `.tsx` files should be upper case - `.ts` files should be upper case - `.scss` files should be upper case - Only `index.ts` files should be lower case ::: # Part 3: Code Organisation :::success NOTE THAT THIS SECTION IS IN PROGRESS **June 3nd - June 6th** ::: This is related to editing file content in specific. We will have a sample file and some information about how to use the Dash-Component library ready soon! This will also include **exactly** how we will need to set up prettier + esLint so that auto formatting works the same way for everyone. This will also include things like expectations for comments, the way that we will organise each file etc! ## Formatting Code We will be using [Prettier](https://prettier.io) and [ESLint](https://eslint.org) to format and lint the code and to configure our VSCode to format each time we save. :::success 1. Download the VS Code extension: ::: # Part 4: Documentation :::success NOTE THAT THIS SECTION IS IN PROGRESS **June 1nd - June 6th** ::: We should be working on this throughout the week as well! Before we start work on new updates to Dash for the summer, we should make sure that the documentation is updated to match all of the progress we've already made. This is especially important for both outside users and future students working on Dash to be able to understand how what you've built works. The Dash documentation can be found [here](https://brown-dash.github.io/Dash-Documentation/) and the repository to edit this site is in the [brown-dash Github organization](https://github.com/brown-dash/Dash-Documentation). To edit the documentation simply clone this repo, edit the markdown files, and push those changes to the main branch. The files you need to edit are in the `markdown` folder. Each file corresponds to one page of the site and the folders correspond to groupings of pages into categories that can be seen in the dropdowns in the lefthand menu on the site. There are separate folders for documents (the different types of nodes), views (the different types of collections), and other features such as searching and linking. To add a new feature that we've worked on, just add a new .md file to the correct folder. Each file begins with a section like this which is used by [Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll): ```python= --- layout: default title: Text parent: Documents # parent page in which this is nested (if applicable) permalink: /documents/text/ nav_order: 1 # order in which page appears in menu --- ``` :::info **Tips for good documentation**: - Include photos/GIFs that show how to use the feature - Keep explanations concise but thorough so that new users can learn how to use the feature - :::

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.