cch5ng / react-fe-interview Goto Github PK

downside is keeping the list up to date...

there was one python lib: markdown to json
but the logic broke where there were nested lists

for saved list, maybe there is a particular order (like easy to hard) that the user prefers

this would break a couple things like
how should the data be stored? by id, by question text, by category

nice to have animations (moved from the basic search/filter issue)

• (nice) click and a search bar animates in (from the right)
• also the existing navbar contents animate on hide (they shrink and possibly the opacity goes down too)

react router 4

links:

Random | All Questions | Favorites

from All Questions should be able to select specific questions and save to a list (user defined name)

from Favorites, should be able to view/select a saved list name to retrieve questions

from Favorites, should be able to delete saved list, also update list

trying https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089#.m514a8q9r

now using surge.sh host

http://fe-interview-react.surge.sh/

resource:

https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089

workaround for breaking functionality on hosted site or update readme for building the latest compiled app

default indexedDb (think next is localStorage but should check)

• saving is mainly supported on modern browsers
• also saving is only on one browser (not on multiple devices for same saved lists access)

might accidentally click read when mean to click Save (probably losing changes)

this is mainly a conflict with react-router apps

not sure if it is due to the domain redirect

after saving a new list
the filter does not appear to detect any lists from indexeddb
but if refresh (this is weird too), then the filter picks up both saved lists
this is different from the behavior on dev env (maybe b/c of const page refreshes?)

think the issue could be, right after a saved list is created, it doesn't get read by the browser... but after refresh the browser, it is aware of all the latest saved lists and filter appears to work

check if something is different on the surge app

link to repo

due to time constraints left off a few categories (think last 3?)

poor behavior where if I want to select 10 random questions for a category, the update happens when I enter 1 and then the input loses focus so I am unable to enter the full number...

probably the change should not happen until I click the button (or the input should not lose focus so I can enter as many digits as desired)

h5bp project has localized versions of questions

some how transform that into format like json or xml like and find a library to help storage/templating with localized content

checklist

• define data format
• UI change and interaction
• figure out the indexeddb part
• update the route format to retrieve

ability to filter the list of saved names
be able to save list by name
be able to select a set of questions to save
(initially just save by original categories and by original order)

initially save locally (indexeddb)

• see jaffathecake's library for simpler indexddb calls (with promises?)

if hosted site is saving data to browser, does this mean there is no potential conflict for mult users?

I think no b/c every browser has their own separate data source... but should test from hosted site on 2 different browsers to doublecheck

think there is a page template in use, need to update this (maybe rebuild after?)

would be nice to fix the favicon (currently react) too... but can be separate

sounds like migration path is pretty complicated... so consider creating a new app and migrating the old source over manually??

https://github.com/facebook/create-react-app/issues/ 1605

too much space on top of navbar

add class to main <h2 class="nav-title">

update styles

.nav-title {
     margin-top: 0;
}

checklist

• make the header a little nicer
• update logo font a bit
• background color
• spacing adjust
• links styling adjust

just a general improvement in test coverage

not sure if it makes sense to use any snapshots since content is expected to change (random content)

does it make sense to test checkbox and button interactions?

when using libraries, do I need to test the end to end results? esp since localForage updates are async

try to do something in navbar sim to apple (checklist)

• search icon on navbar
• click and a search bar toggles navbar vs search bar display (currently no anim)
• the search is pretty much camouflaged like the navbar but an input text field (there is an x icon to close)
• entering text, results in auto suggest or closest match results

• instead I think I should just filter the existing list names
• it should be something like a regex match (match like the beginning or match like the middle of the existing names)

• (nice) click and a search bar animates in (from the right)
• also the existing navbar contents animate on hide (they shrink and possibly the opacity goes down too)

think this requires

• create or reuse the all questions template; figure out how it must differ and if there is some way to reuse the original component
• need to store the currently selected questions in state to auto populate check box selection

responsive

better layouts (alignments) for form, etc

right now the questions get saved to indexeddb in the order that the user chooses them

1, 2, 3, 4, 5

ie the user might save them in the order 1, 4, 2
and so the Child view will display in order 1, 4, 2... I don't know if this is disorienting or something... maybe the point is moot if the enhancement to be able to rearrange the default order of questions displayed is implemented

this is due to having to refresh the page in combination with the private domain redirect... hmm (bummer)

this shows in new menu but functionality missing
(it should be dupe of logic from the existing delete link on Favorites view)

• list added
• list edited
• list deleted (not sure this is necessary although due to async timing maybe useful)

on save list

• clear the form
• add a status message

on delete list

• add a status message (although the list does get removed from view fairly quickly)

should it have a confirmation option or undo option (after the deletion has executed)

• undo is a bit more complex due to async nature of localForage/indexedDb functions

• not even positive how you would track info to execute undo

  • does that mean that you would add a flag to each indexedDb entry (justDeleted: boolean)
  • there has to be some unique qualifier to know which entry to undo; and if deleted to know whether to display or not...
  • then to avoid clutter, over time, need to actual delete stuff that you can no longer undo
  • need to add a time limit to undo (like maybe a day? then need to store date deleted to compare to cur date and also the flag if entry eligible for undo)

• make undo function as an enhancement for next version but it is a good problem to figure out in the long run...

there are quite a number of new/removed questions (ie JS ES6 oriented questions)

• AllQuestions test
• Child test
• Favorites test
• RandomQuestions test

resources:

https://github.com/cch5ng/react-fe-interview#running-tests

this is kind of a workaround measure... b/c in the future it is quite plausible the user might have saved list, but if the original markdown file changes, then the references to deprecated questions might cause issues (etc)

diff logic (saved questions vs new questions vs deprecated questions) will be fairly complex I think, so an interim solution would be to be able to export the list to text or something you could print/view in web

would it make sense to break out components for the list vs form

check if there is performance section