christopherbot / botghani-notepad Goto Github PK

Add border and spacing between each list.
Add border between around list rows and columns.

I want to slowly transfer all of my coding to VSCode, but it's hard to do it at work because my productivity drops. I want to set it up for this project so I can spend some time getting used to it. You're welcome to do the same if you want to learn how to use another text editor! Apparently, when configured properly it's the best (free) IDE for React and Vue so my interest is peak @christopherbot

VSCode - React Native

• the component template file should use the React PureComponent instead of Component
• remove templateInfo

The NavButton is a tad on the large side. It could be reduced a little bit (by 10px or so?) to take up a bit less space.

extend the renameList action to be useable for changing the value of any data cell.

Includes but is not limited to:

1. user stories
2. features
3. functionality

e.g. here

e.g. f1: { flex: 1 }
used as ustyle.f1 or something

This should be done after expanding the redux list state (#24).

automatically set a newly created list to be viewed (clicking "create list" should close the nav too)

Button Menu component will contain all of the current editing logic.

on this line

Is currently just an array of strings.

Should be more complex i.e an array of objects

[
  {
     name:  string,
     id: string,
     rows: array 
     columns: array
     isBeingEdited: bool
  }
]

Currently, updating a cell (via clicking on it) changes the cell to an input field and displays an "Ok" and "Cancel" button which will save and cancel the update, respectively.

A simpler UI would be:

• user clicks on a cell to update it, it turns into an input field
• user updates the value
• on blur of the input field, automatically save the current cell value

This offers no option to cancel the current update but it much nicer on mobile to simply tap away from the input

The OG Button component doesn't take a style object so we need to find a different component to use that we can customize

Reusable component

A hidden page containing all List's by their name and date created.

Create list button moved into this page.

Each table cell is currently super compact and doesn't offer enough visual whitespace to read the contents. Added padding would offer room for it to breathe.

https://facebook.github.io/react-native/docs/button.html

When both a row id and column id exists, generate a placeholder cell object for that intersection.

Needs info.

// single line
{ condition ? <Component /> : <OtherComponent /> }

// multi line
{
  condition
    ? (
      <Component
        here={is}
        a={list}
        of={props} />
    )
    : <OtherComponent
}

The react-navigation package creates a header bar on the app.

Group import statements as follows:

import Thing from 'module'
import relativeThing from '../relative/path'

import Component from '../relative/path'

import style from '../style'

Also add this to the README (under a new heading called something like 'Coding/syntax guidelines')

This should be done after expanding the redux list state (#24).

The "Create List" component takes up screen space when viewing a list and is unnecessary to be seen all the time. It should be moved into the nav bar, most likely positioned at the top.

Suggested data structure:

rows: [{id, label}]
columns: [{id, label}]
data: [{id, rowId, columnId, value}]

This will make it easier to do things such as sorting/rearranging rows/columns since the data will be mapped by rowId and columnId

i.e move pure functions out of component files.

This would probably be done via clicking an "reorder" button since clicking on the item/category headers normally would do another function (like sorting in alphabetical order for example).

The cells are temporarily populated with cellR or cellC depending on if it was created by a createRow or createColumn action. This should be overwrite-able by the user (or don't even fill in the cell at all to begin with)

When clicking row+ or col+, a text input appears but the user has to manually click on it to type. It would be less painful if the input was auto-focused on.

Position the buttons at their corresponding row or column.

Create a settings bar that will display at the top of the page when one list is in view. It will contain items such as:

• A delete button
• An edit button (to rename the list)
• Other things..??

depends on #84

depends on #89

ideally, clicking on a category header should sort the list (alphabetically for strings, numerically for numbers, etc).