cch5ng / fe_interview Goto Github PK

#47 (comment)

• move token to cookie (?)

• script to populate question table with json data

  • probably would be more efficient to revise the data parsing script to generate one single list of questions (one file, not multiple files per category)

• doc dependency on secrets file (provide a template for it)

• fix db owner (#10)

  • affects secret (config) and also db setup script

• script to drop/create db

• scripts to create tables

• update the package.json scripts to run a configure_db.js script

starting out with 4 tables;

pretty basic but need to extend it a little for the feature of tracking test results (like I think it is most useful for the job applicant to be able to track over practice sessions which topics they are not doing very well in)

might have been my testing error; but what happens to test if not submitted...

BE return looks weird even though it does not appear to affect the user content/experience

look at what is happening and clean response

3 cases to support:

• email and custom password

  • registration

  • login

  • when try to make BE requests, check for valid session (everything but get all questions)

• (low priority) OAuth - google

• (low priority)OAuth - fb

(do I need Auth0 if using passport library?)

need ability to:

• get all questions (sorted by category, sorted by default sort order?)

• save a completed test (date/time, name?, list of questions (ids), which questions missed, amount of time taken); calculate # questions missed

  • question table > getIdFromContent() method
  • test table

• view a summary of completed tests

• need to build the api endpoints

  • X-get all tests

  • X-save a test

• (nice to have) view detail of completed test (do not believe data is so granular that this is important?)

(what if the test is incomplete, like haven't reached the timeout yet... is there any value to save a progress?)

• snapshots

• added logic to display registration/login/test error messages (test error when request all tests but that user has not saved any tests yet)

• tests: 2 actions

• questions random action

• try new library by k dodds

ref #22

• think it is probably too easy to spoof the uid and so switch this value to email instead

• change FE behavior so that if the email value is not available, redirect to login (this is kind of a hassle but better security for now, until I figure out something better)

example

/fe_interview/server/app/testQuestion/table.js:50
09:44:29 server.1   |  					const question_id = resp.rows[0].question_id;
09:44:29 server.1   |  					                                 ^
09:44:29 server.1   |  TypeError: Cannot read property 'question_id' of undefined
09:44:29 server.1   |      at pool.query (/Users/sassafrass/programming/projects/fe_interview/server/app/testQuestion/table.js:50:39)
09:44:29 server.1   |      at Query.client.query (/Users/sassafrass/programming/projects/fe_interview/server/node_modules/pg-pool/index.js:300:18)
09:44:29 server.1   |      at Query.handleReadyForQuery (/Users/sassafrass/programming/projects/fe_interview/server/node_modules/pg/lib/query.js:125

this one seems to stop the server

• question detail

  • when test completed state, the question text is missing, only the test content shows

  • could be better for linkButton

• all tests list

• test summary

  • X-(DONE) added back button to all tests list

  • X-(DONE) small refactor to add question status counts of 0

  • X-(DONE) style the countdown timer (should have different color based on time remaining)

    • here ran into troubles trying to use the bind function with classnames and css modules together... combined classes manually

  • X-(DONE) refactor couple of the question list sections, think active and completed are actually the same? only initialized should not have links to details; probably could still be refactored??

  • X-(DONE) question status => text switch to icons

• nav

• registration

• login

• form elements (new test, other)

  • select list (needs work)

• all questions list

  • not perfect but a little better in terms of category org

• add css (have a dictionary for form styles)

• revisit styling on the nav section

• go through and make a list of all data that needs to be formatted better, ex

• pretty format coding question content (right now "question" is repeated 2x)

• convert text to icons for question status (on test summary view)

• add some kind of color coding to countdown timer (it should look better generally and in last 5 minutes the color should suggest alarm, like red/pink color)

stuff to doc

• use of parcel

• trying out react context (instead of redux)

webpack vs parcel

• webpack is more commonly used but issue is large bundle sizes

• parcel is newer for me and while it doesn't solve issue of bundle size, it is supposed to be faster to set up and faster to build...

trying parcel here (but just in case, I built a really bare bones webpack boilerplate setup for react in another repo)

one bad thing is even though I can eventually construct js object in the format I need, the initial parser result breaks up the content at too granular a detail level (like '?' is separated from the actual question content in the resulting ar)... try to see why this is and is it possible to have less content separation?

• set up express server

• set up api routes (min to get default questions list)

• update package.json scripts to be able to start the server

node, graphql?

• maybe v1 node, v2 port to graphql?

• node probably faster but right now multiple content coming from multiple js files so maybe more efficient as graphql? (fewer requests)

• the other workaround is to process different md files, merge them into one js obj and output that as a single js/json file (this is probably faster at this time than doing graphql)

• requires readme update

• fixed the user/password and db owner setup (in #13)

  • refactor to assign a specific db user (with password)

  • affects the db setup script

  • probably requires use of dotenv (separate secret file to hold the user pwd)

low priority but think (how to do this usefully)

sometimes the middle record's questions list is not coming through

think this has to do with a cheat I did (checking if results matched the length of test array vs doing a nested promise.all() call)

• general testing catchup

• for ex

  • regression test on old issue where all tests view was not showing all related questions all of the time; create a test case where multiple tests have a large number of questions associated; verify the question counts are consistent over multiple retrievals

new route, tests/:test_id

doesn't really have a working view; need figure out the overlap with TestSummary view (and reconcile the differences in what the data source should be /// redux tests/curTest? or other

• also get questions by test_id

• need fix getTestById() (test getting returned without question data)... need to switch to promise.all

• pwd requirements

• check if there is any html escaping done automatically on BE now

figure out which form fields require data validation

figure out how to handle errors with requests

figure out how to display feedback to user (like a toast sort of message that pops up and then disappears or can be closed) (did basic implementation in #55 for registration/login err)

add support for signon using google and facebook account

figure out where? can I do it for free?

do I need some notification system for downtime?

resc

https://stackoverflow.com/questions/19908850/website-or-server-down-notification-tools

mention parcel, assume global install, should doc version used

issues with (probably not getting saved appropriately)

• probably want to standardize the content a bit with individual test summary view (exactly the same?)

• questions missed (wrong data displays)

• show total time spent on the test (like indiv test summary view)

• questions data is missing from api return data

  • X-(fixed) same issue as for test detail from all tests link; want to also get some details from test_question data (currently limited to question data)

• date value (don't think it is getting saved anywhere)

• total time value (looks ok)

• (low priority) time per question value (how to do this usefully)

this is not prerequisite to working on test session feature because it is probably more logical for applicants to get randomly generated tests anyhow

this has been done before but maybe would like to enhance with option to save a custom list in particular order

• create/save
• view

follow up (do after session test work)

• edit
• delete

not huge issue; doesn't break UI or app (or final return json content) but it just doesn't look right

purpose: give applicants ability to practice taking tests

• maybe this should be just a randomly generated test

• (setup) user can choose # questions

• (setup) U can choose which categories

• (setup) U can choose amount of time to allow per question (but maybe give a suggested)

• (during) U can mark a question as I don't know (this should later be flagged as weak area)

• (during) U should have some way to record their responses

• (during) there should be a summary recording of all responses

• (after) U should get some summary of their performance
  • goal is to ferret out the weak areas that need more study
  • definitely list of questions marked as I don't know (or with no response)
  • maybe like time
  • maybe like number of questions with response out of total number of questions

• FE login success should redirect

• FE register success should redirect

• BE some refactoring to tie user_id together with tests that they created

  • X-(DONE) test table

  • X-(DONE) seed data

  • X-(DONE) storeTable()

• I believe that updating a test should not be impacted b/c the record has already been tied to user so this would not change or need reference when test status changes; only test id is needed at that point

• try to find a way to reduce some dupe content; did not think css grid would be useful for how the nav contents shifts positions from mobile to desktop

• animate the mobile view, when menu extends to the bottom

to date the most time consuming aspect of the app has been manual process to get latest question content (from 3rd p repo), reformat the content from markdown to json

would like to use an existing markdown parser to try to automate this; but think still requires some custom logic (like handling nested lists probably)

evaluating: https://github.com/Khan/simple-markdown

prerequisites: need to massage the default markdown data b/c the syntax highlighting and code block formatting seems to cause issues with the parser

• make the logic flexible enough to handle multiple markdown files (get a list of files and just seed the init files manually to start)
• right now replaced "" with another special char ^`; did not yet handle "```" directly
• logic to generate dictionary of questions (per category page/file)
• logic to generate child objects (per question)
• do more thorough testing on the child objects (right now feel like there is a potential issue where each child question is nested 4 levels down, rather than 3 levels as the logic currently assumes)
• rethink how to represent the parent-child relationship in the data store
• merge processLineByLine() and fileToVar() ... don't need new file, could just edit str on the fly
  • currently missing logic to write the resulting js obj to a file
• logic to fix formatting for the ^ inserted char (moved to #6)

separate server start

very basically done in #42, can have follow up when revisit styling overall

• refactor, think about how to store the random questions under curTest object; it should probably be an object key by question id (not an array) so it is easier to update the status of each question during the test session

  • (already done as sort_order, might be confusing with all questions list sort_order tho) then need to store additional prop, display_order (to keep track of the randomized display order)

• reducer/action to update a test

  • test:

    • status, time to complete

  • test_question:

    • status (not visited, skipped, completed), response
    • for right now just assume that the user is going to complete the test (not lose internet connectivity, not stop in the middle); store changes in redux until user clicks submit (whole test) and save to BE

  • think out updating redux store for time remaining on an active test (this needs to be accessible from summary and question views); probably don't want to update it too frequently? every 5 sec?

• test summary view

  • completed test summary view should be different; want to know how quickly the test was completed; want to know how many questions skipped (maybe categories)... want to quickly assess weak areas

  • this view has different states (initialized, active, completed): define out what are the differences in display based on state

  • also data about question should vary based on question states

  • remaining time

  • X-(done) fix total_time display

• question detail view (2 states, edit and read-only)

  • need to be able to save the question response to redux and also BE (think affects the test_question columns)
  • remaining time
  • should this have access when completed? is there anything new to show

• refactor: need link from all tests view to individual test summary; need some refactor to update test status (from start/submit button clicks); only send random questions request to BE for categories which the user has marked needing more than 0 random questions

  • need followup; right now dependency on store tests.curTest to display a test detail view; will this also work for test detail view (from all tests detail link)

• refactor and think a little more clearly about what states a test may have (right now test_question columns feel muddy and redundant tracking state)

• removed later refactor categories checkboxes (the values could be generated dynamically (all the values are already in database in question table; not sure if they should actually be a separate table)

see #16, #19

• follow up logic on view for existing tests
  • X-(done) need follow up on logic for getPrettyTime() ... handle hours and make sure the logic is robust (need to define more test cases for this)
  • X-(done) need pretty date helper
  • X-(done) needs some helpers (pretty time, missed questions count, avg time per question)

• reducer/action to initialize new test

  • X-(done) think how how to handle test state (active, completed, initialized); this probably affects SQL/table def and actions

    • affects action when user clicks Start button on the view /tests/current

  • X-(done) action: need follow up to chain another async action that would store test to backend (want to add a status like active, inactive, completed)

  • reducer

• reducer/action to get all questions; update combine reducer

• view for all questions (this content is necessary in redux to generate random tests)

• view to create new test

  • X-(done) add state to track whether to redirect posted form to view for the current test

  • X-(done) refactor question state to use category format (original data, not concat format)

  • (removed) follow up notes in generateTest() func

  • X-(done) follow up BE question table function, getRandomQuestionsByCategoryCounts() and more form submit handler

  • (removed) checkbox change handler; (todo) form submit handler, (done) form clear helper

  • X-(done) form change handlers,

• reducer/action to update a test

• views to take a test (test summary, question detail)

• refactor: need link from all tests view to individual test summary; need some refactor to update test status (from start/submit button clicks); only send random questions request to BE for categories which the user has marked needing more than 0 random questions

• later refactor categories checkboxes (the values could be generated dynamically (all the values are already in database in question table; not sure if they should actually be a separate table)

also ref this #16 (comment)

• on test question (detail), think that here the line breaks are pretty important; they are getting lost somewhere

• format questions on test summary view (especially the use of '^')

• format questions on test question (detail) view

• something is still wrong on the test question detail view (all the formatting appears to get lost

issue (?) with parsing last coding question

• resulting output looks like 4 separate questions when it should really be 1 question (I guess with 4 paragraphs?)

    "Question: Else();\n});": {
        "id": "Question: Else();\n});",
        "text": "Question: What is the difference between these four promises?\n^^^javascript\ndoSomething().then(function () {\n  return doSomethingElse();\n});",
        "category": "Coding Questions"
    },
    "doSomethinElse();\n});": {
        "id": "doSomethinElse();\n});",
        "text": "doSomething().then(function () {\n  doSomethingElse();\n});",
        "category": "Coding Questions"
    },
    "doSomethiningElse());": {
        "id": "doSomethiningElse());",
        "text": "doSomething().then(doSomethingElse());",
        "category": "Coding Questions"
    },
    "doSomethingElse);\n^^^": {
        "id": "doSomethingElse);\n^^^",
        "text": "doSomething().then(doSomethingElse);\n^^^",
        "category": "Coding Questions"
    }

probably link to login/logout should be dynamic on session status as well

replaced "`" with "^" in order to process multi line string

but need to apply appropriate formatting (code snippet) so it is easy to read in browser view

figure out how to parse content in "^...^" and how to parse content "^^^...^^^"

views:

• summary of all previous tests view (view all)

  • number of questions with response out of total number of questions
  • definitely mark questions marked as I don't know (or with no response)
  • amount of total time taken

• test setup view (create)

  • (setup) user can choose # questions
  • (setup) U can choose which categories
  • (setup) U can choose amount of time to allow per question (but maybe give a suggested)

• active test summary view (alt state completed view) - summary of all questions in the active test (edit)

  • (during) there should be a summary recording of all responses

• active test question detail view (edit)

  • (during) U can mark a question as I don't know (this should later be flagged as weak area)
  • (during) U should have some way to record their responses

logic:

• helper to make a randomly generated test (param: # questions, categories, amount time/quest)

right now passport jwt strategy is used on BE endpoints; should there be FE auth used to check auth and block views if token invalid or does not exist?

// test getQuestionsByCategory
// QuestionTable.getQuestionsByCategory({ category: 'Fun Questions'})
// .then(questions => console.log('Fun questions', questions))
// .catch(err => console.error('error', err));

// test getAllQuestions
// QuestionTable.getAllQuestions()
// .then(questions => console.log('All questions', questions))
// .catch(err => console.error('error', err));

// test getQuestionIdByContent()
// QuestionTable.getQuestionIdByContent({ content: 'Explain how ^this^ works in JavaScript'})
// .then(id => console.log('id', id))
// .catch(err => console.error('error', err));

// test getRandomQuestionsByCategoryCounts
// QuestionTable.getRandomQuestionsByCategoryCounts({"JavaScript Questions": 5, "Fun Questions": 3})
// .then(questions => console.log('random questions', questions))
// .catch(err => console.error('error', err));

when the random questions are generated for new test, test_question table should get updated but the rows are missing data; only the table id is populated but all of the question data is not getting populated (question id, status and sort order - new - should get populated)

databasePool has section dependent on testing only on prod environment (some environment vars)

double check if dotenv needed separately on client section (think could be removed then test)

I believe at some point it is likely to run into a cors issue

if I host server content on a non github host, then I would get cors issue, trying to get from another github repo (maybe unless I try to use github api... see how this works and what it allows)

but ideally I would like to have something like this

• monthly script runs

  • gets a list of question files from 3rd party repo (markdown)
  • reformats and parses the content to match this app's stored format
  • should do some kind of delta cleanup (handle new questions, ?deprecated questions, updated questions)

• prereq to automating this is having some decent automated test suite

  • only update the base questions if the latest format doesn't break the app
  • if there are breaking changes, would like to get some notification (then some manual update to the app required)

• is this a good system? not sure but right now it seems to make sense