Find a way to view the parsed job description when you're adding snippets #4

mattcheah · 2018-07-31T22:37:32Z

It would be much easier to compose a cover letter if the user is able to see the job description to understand what the employer wants to focus on. We need to find a way to display the parsed job description so that the user can see it when he/she needs to.

Ideas for how to accomplish this:

Create a popover that shows the job description once you hover your mouse over a link.
Add an accordion style slide-down/slide-up toggle so that the user can see the job description when they need to, but so that it doesn't take up valuable real-estate when actually adding snippets to their cover letter.
(Desktop only) move the app to the left or right, so and flex or float the job description onto the other side.

If anyone wants to take this on I'm more than happy to answer questions or guide someone through this. Thanks!

unaccomplished · 2018-11-30T17:25:05Z

Hi @mattcheah, I'd like to give this one a try. I'm fairly new to making contributions, so I'll be sure to reach out when I hit issues or have questions. Thanks!

mattcheah · 2018-11-30T17:32:41Z

@unaccomplished go ahead! Good luck, let me know if you need any help/recommendations!

mattcheah · 2018-11-30T17:33:37Z

AND you're a fellow Bloc.io-er! Hope it's going well for you!

unaccomplished · 2018-12-03T00:04:20Z

I didn't know you are a fellow Bloc-er as well! Glad to be working on this with you. It may take me a little time to get up and running, but I will certainly reach out for help/recommendations. Thanks!

unaccomplished · 2018-12-11T04:16:01Z

Hi @mattcheah, I'm working on getting a database up and running to check out how Cover Letter Snippets works, but I'm getting some error messages. I started up ng serve and was able to load http://localhost:4200/ on my machine, but when I click the "Connect to Database" button, it is giving me the following error messages in the console:

error obj: 
database.service.ts:147 HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/connect-to-database", ok: false, …}
database.service.ts:153 Backend returned code 404
Error Body: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /api/connect-to-database</pre>
</body>
</html>

core.js:1673 ERROR TypeError: Cannot read property 'newStatusMessage' of undefined
    at CatchSubscriber.push../src/app/services/database.service.ts.DatabaseService.handleError [as selector] (database.service.ts:155)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at RetrySubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at RetrySubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at RetrySubscriber.push../node_modules/rxjs/_esm5/internal/operators/retry.js.RetrySubscriber.error (retry.js:32)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)

I also created a MongoDB of my own, and tried that in the "Connect to Database" field, but I'm still getting the same error messages in the console.

If it helps, I also ran the tests:

➜  snippets git:(master) ✗ ng test
Your global Angular CLI version (7.0.1) is greater than your local
version (6.1.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
✖ ｢wdm｣: Hash: 0d62efcbeea4cac7c6db
Version: webpack 4.9.2
Time: 8817ms
Built at: 12/05/2018 3:55:32 PM
       Asset      Size     Chunks  Chunk Names
     main.js  2.82 KiB       main  main
polyfills.js  3.25 KiB  polyfills  polyfills
Entrypoint main = main.js
Entrypoint polyfills = polyfills.js
[./src/polyfills.ts] 0 bytes {polyfills} [built]
[0] multi ./src/polyfills.ts 28 bytes {polyfills} [built]
[./src/test.ts] 0 bytes {main} [built]

ERROR in error TS6053: File '/Users/jocelynhsu/Development/cover-letter-snippets/snippets/src/test-helpers.ts' not found.

05 12 2018 15:55:33.366:WARN [karma]: No captured browser, open http://localhost:9876/
05 12 2018 15:55:33.374:INFO [karma]: Karma v2.0.5 server started at http://0.0.0.0:9876/
05 12 2018 15:55:33.375:INFO [launcher]: Launching browser Chrome with unlimited concurrency
05 12 2018 15:55:33.390:INFO [launcher]: Starting browser Chrome
05 12 2018 15:55:35.722:INFO [Chrome 70.0.3538 (Mac OS X 10.11.6)]: Connected on socket TWVP66OstRvtd7jpAAAA with id 90571891
Chrome 70.0.3538 (Mac OS X 10.11.6): Executed 0 of 0 ERROR (0.017 secs / 0 secs)
05 12 2018 16:40:23.352:WARN [Chrome 70.0.3538 (Mac OS X 10.11.6)]: Disconnected (1 times)
Chrome 70.0.3538 (Mac OS X 10.11.6) ERROR
Chrome 70.0.3538 (Mac OS X 10.11.6) ERROR
  Disconnected
Chrome 70.0.3538 (Mac OS X 10.11.6): Executed 0 of 0 ERROR (0.017 secs / 0 secs)
Chrome 70.0.3538 (Mac OS X 10.11.6) ERROR
  Disconnected
05 12 2018 16:40:23.425:INFO [Chrome 70.0.3538 (Mac OS X 10.11.6)]: Connected on socket -1n2Y1I4Y8rElXxUAAAB with id 90571891
Chrome 70.0.3538 (Mac OS X 10.11.6): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
05 12 2018 16:42:53.573:WARN [Chrome 70.0.3538 (Mac OS X 10.11.6)]: Disconnected (1 times)
Chrome 70.0.3538 (Mac OS X 10.11.6) ERROR
Chrome 70.0.3538 (Mac OS X 10.11.6) ERROR
  Disconnected
Chrome 70.0.3538 (Mac OS X 10.11.6): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
Chrome 70.0.3538 (Mac OS X 10.11.6) ERROR
  Disconnected
^C%                                                                                                            ➜  snippets git:(master) ✗ ng e2e
Your global Angular CLI version (7.0.1) is greater than your local
version (6.1.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-12-06T00:43:52.065Z
Hash: 5249411f3a5e4a16f842
Time: 19244ms
chunk {main} main.js, main.js.map (main) 87.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 21.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.83 MB [initial] [rendered]
[16:43:54] I/file_manager - creating folder /Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/protractor/node_modules/webdriver-manager/selenium
[16:43:54] I/config_source - curl -o/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/protractor/node_modules/webdriver-manager/selenium/chrome-response.xml https://chromedriver.storage.googleapis.com/
ℹ ｢wdm｣: Compiled successfully.
[16:43:55] I/downloader - curl -o/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.44.zip https://chromedriver.storage.googleapis.com/2.44/chromedriver_mac64.zip
[16:43:55] I/update - chromedriver: unzipping chromedriver_2.44.zip
[16:43:56] I/update - chromedriver: setting permissions to 0755 for /Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.44
[16:43:59] I/launcher - Running 1 instances of WebDriver
[16:43:59] I/direct - Using ChromeDriver directly...
Jasmine started

  snippets App
    ✗ should display welcome message
      - Expected 'Welcome to Cover Letter Snippets!' to equal 'Welcome to app!'.
          at UserContext.<anonymous> (/Users/jocelynhsu/Development/cover-letter-snippets/snippets/e2e/app.e2e-spec.ts:12:37)
          at /Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/jasminewd2/index.js:112:25
          at new ManagedPromise (/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/selenium-webdriver/lib/promise.js:1077:7)
          at ControlFlow.promise (/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/selenium-webdriver/lib/promise.js:2505:12)
          at schedulerExecute (/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/jasminewd2/index.js:95:18)
          at TaskQueue.execute_ (/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/selenium-webdriver/lib/promise.js:3084:14)
          at TaskQueue.executeNext_ (/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/selenium-webdriver/lib/promise.js:3067:27)
          at asyncRun (/Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/selenium-webdriver/lib/promise.js:2974:25)
          at /Users/jocelynhsu/Development/cover-letter-snippets/snippets/node_modules/selenium-webdriver/lib/promise.js:668:7

**************************************************
*                    Failures                    *
**************************************************

1) snippets App should display welcome message
  - Expected 'Welcome to Cover Letter Snippets!' to equal 'Welcome to app!'.

Executed 1 of 1 spec (1 FAILED) in 1 sec.
[16:44:03] I/launcher - 0 instance(s) of WebDriver still running
[16:44:03] I/launcher - chrome #01 failed 1 test(s)
[16:44:03] I/launcher - overall: 1 failed spec(s)
[16:44:03] E/launcher - Process exited with error code 1
An unexpected error occurred: undefined

Please let me know what I'm missing here to get this to work. Thank you!

mattcheah · 2018-12-12T02:39:29Z

Hey @unaccomplished,
I suspect you're not starting the back-end server. Try using the command snippets instead of ng serve?

unaccomplished · 2018-12-13T21:45:56Z

I see, you're right. I hadn't installed snippets yet. It's working for me now. Thanks! I'll likely reach out again after I get a better idea of the app and task.

unaccomplished · 2018-12-19T18:15:56Z

Hi @mattcheah, I wanted to confirm that I'll be adding the parsed job description on the "Build Cover Letter" page? I'm thinking of adding a sticky header option that allows the user to show/hide the job description as needed.

unaccomplished · 2018-12-19T19:00:30Z

Hi @mattcheah, I have the app up and running locally on my machine using snippets, but any changes I make to the codebase does not seem to be reflected on http://localhost:3141/. What do I need to do to set up the app so that I can see changes I make in the code?

mattcheah · 2018-12-19T19:45:44Z

Hey @unaccomplished, sorry I gave you kind of misleading info last time - I had forgotten that you can't edit stuff and see changes just by installing the NPM package and running it. There's a little bit of a process.

First, go into the /snippets/ directory and build your changes with ng build --prod. Since you want to see the changes you've made to your local copy, you'll have to run the app entrypoint file and start the server. That file is the index.js file in the root. Make sure all the NPM packages are installed (npm i) and then run node index.js.

that SHOULD work. Let me know if you have any other issues. And YES to adding the job description on the "Build Cover Letter" page. Your idea sounds great! Thanks for the help!

unaccomplished · 2018-12-19T20:28:47Z

Hi @mattcheah, thank you for the new instructions! I ran ng build --prod under /snippets/ directory, then ran npm i in the same directory. When I ran node index.js, it couldn't find that file in the /snippets/ directory, but I was able to run it when I backed up into the /cover-letter-snippets/ directory. I can see the app up and running, but I don't believe anything I change in the /snippets/src/ folder is reflected in the app.

mattcheah · 2018-12-19T20:46:35Z

hmm try running ng build --prod inside cover-letter-snippets/snippets/ again, and check that the files in /cover-letter-snippets/dist/ are re-created. Those files are the ones that are being served by the server. If they're not being rebuilt, check if there's a cover-letter-snippets/snippets/dist/ folder where those files are being created. If so, grab those files and throw them in the cover-letter-snippets/dist/.

Let me know how that works?

unaccomplished · 2018-12-20T04:39:33Z

Hi @mattcheah, that seemed to work, though I still need to run node index.js in the /cover-letter-snippets/ directory to get it the app running. I can see one change I made in the /cover-letter-snippets/snippets/src/. However, if I want to continue making changes, do I need to rerun ng build --prod and start node index.js again? Is there an easier way to check on quick changes I'm making to the code?

mattcheah · 2018-12-20T05:14:24Z

That's good! Regarding having to run node index.js from that directory, that's expected. Since it's looking for that index.js file, your command will have to provide the correct relative path to the index.js file. I believe when I was developing this I wrote a bash alias that did something like this:

ng build && cd ../ && node index.js

so I could just run that command and it would do everything I needed to do without extra work on my part (i was lazy).
I also recommend taking a look here: https://stackoverflow.com/questions/45242553/how-to-speed-up-the-angular-build-process
It looks like ng build --watch might be really helpful for you - rebuilding the app while you're making edits, similar to how ng serve does it.

unaccomplished · 2018-12-20T17:04:05Z

Hi @mattcheah, thank you so much for this info! I have one terminal running node index.js and another one running ng build --watch and that is allowing me to see updates to the code in real time on my machine. Now I can work away on the actual task. Thanks again for all of your timely help!

mattcheah · 2019-01-25T00:28:33Z

@unaccomplished - Just checking in, how are you doing on this?

…omatically visible after parsing the job description and the job description can be displayed if the user clicks on the description panel as an accordian

Fixed issue #1 and #4

mattcheah added help wanted Extra attention is needed good first issue Good for newcomers labels Jul 31, 2018

mattcheah added a commit that referenced this issue Jun 8, 2021

Merge pull request #15 from vibharaj/master

50cedf0

Fixed issue #1 and #4

mattcheah closed this as completed Jun 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Find a way to view the parsed job description when you're adding snippets #4

Find a way to view the parsed job description when you're adding snippets #4

mattcheah commented Jul 31, 2018

unaccomplished commented Nov 30, 2018

mattcheah commented Nov 30, 2018

mattcheah commented Nov 30, 2018

unaccomplished commented Dec 3, 2018

unaccomplished commented Dec 11, 2018

mattcheah commented Dec 12, 2018

unaccomplished commented Dec 13, 2018

unaccomplished commented Dec 19, 2018

unaccomplished commented Dec 19, 2018

mattcheah commented Dec 19, 2018

unaccomplished commented Dec 19, 2018

mattcheah commented Dec 19, 2018

unaccomplished commented Dec 20, 2018

mattcheah commented Dec 20, 2018

unaccomplished commented Dec 20, 2018

mattcheah commented Jan 25, 2019

Find a way to view the parsed job description when you're adding snippets #4

Find a way to view the parsed job description when you're adding snippets #4

Comments

mattcheah commented Jul 31, 2018

unaccomplished commented Nov 30, 2018

mattcheah commented Nov 30, 2018

mattcheah commented Nov 30, 2018

unaccomplished commented Dec 3, 2018

unaccomplished commented Dec 11, 2018

mattcheah commented Dec 12, 2018

unaccomplished commented Dec 13, 2018

unaccomplished commented Dec 19, 2018

unaccomplished commented Dec 19, 2018

mattcheah commented Dec 19, 2018

unaccomplished commented Dec 19, 2018

mattcheah commented Dec 19, 2018

unaccomplished commented Dec 20, 2018

mattcheah commented Dec 20, 2018

unaccomplished commented Dec 20, 2018

mattcheah commented Jan 25, 2019