') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat(angular-ngrx-scss): Create main layout (Top repos + Gists) by SDaian · Pull Request #319 · thisdot/starter.dev-github-showcases · GitHub
Skip to content

feat(angular-ngrx-scss): Create main layout (Top repos + Gists) - #319

Merged
SDaian merged 8 commits into
mainfrom
fix/issue-117
Jul 7, 2022
Merged

feat(angular-ngrx-scss): Create main layout (Top repos + Gists)#319
SDaian merged 8 commits into
mainfrom
fix/issue-117

Conversation

@SDaian

@SDaianSDaian commented May 27, 2022•
edited by dustinsgoodman
Loading

Copy link
Copy Markdown
Contributor

Description

  • Get Gists from GitHub API
  • Create main page layout (Top repositories + gists)

Fixes: #117
Fixes: #106
Fixes: #108

Screenshots

image

image

@SDaianSDaian self-assigned this May 27, 2022
@SDaianSDaian added this to the Angular + NgRx + SCSS milestone May 27, 2022
@aws-amplify-us-east-1

aws-amplify-us-east-1Bot commented May 27, 2022

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-319.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1

aws-amplify-us-east-1Bot commented May 27, 2022

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-319.d1190gmno2hljg.amplifyapp.com

@aws-amplify-us-east-1

aws-amplify-us-east-1Bot commented May 27, 2022

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-319.d3jint31f72euh.amplifyapp.com

@aws-amplify-us-east-1

aws-amplify-us-east-1Bot commented May 27, 2022

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-319.d3sqkonra6x7y9.amplifyapp.com

@SDaianSDaian changed the title feat(angular-ngrx-scss): Get gists from Github APIfeat(angular-ngrx-scss): Create main layout (Top repos + Gists)Jun 17, 2022
Amdrel
Amdrel requested changes Jun 17, 2022
View reviewed changes

@AmdrelAmdrel left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per Dustin's response in Slack we should aim for at least 80% code coverage (ideally 100%) in PRs. Could you write some tests for this new functionality?

lindakatcodes
lindakatcodes requested changes Jun 22, 2022
View reviewed changes

@lindakatcodeslindakatcodes left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a few questions and requests for you. :) Let me know if there's anything that's not clear!

Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.html
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.html Outdated
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.scss
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.ts Outdated
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.ts Outdated
Comment threadangular-ngrx-scss/src/app/user/services/user.service.ts Outdated
Comment threadangular-ngrx-scss/src/app/state/user/user.state.ts Outdated
Comment threadangular-ngrx-scss/src/app/state/user/user.selectors.ts Outdated
Comment threadangular-ngrx-scss/src/app/state/user/user.reducer.ts Outdated
Comment threadangular-ngrx-scss/src/app/state/user/user.effects.ts
@SDaian
SDaianforce-pushed the fix/issue-117 branch 3 times, most recently from c227cdc to 8138748CompareJune 23, 2022 02:44
ihardz
ihardz reviewed Jun 27, 2022
View reviewed changes
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.html Outdated
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.html Outdated
@lindakatcodeslindakatcodes mentioned this pull request Jun 30, 2022
Closed
3 tasks
Amdrel
Amdrel requested changes Jul 1, 2022
View reviewed changes
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.html Outdated
Comment threadangular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.scss
Comment threadangular-ngrx-scss/src/app/home/user-gists/user-gists.component.html
Comment threadangular-ngrx-scss/src/app/home/user-gists/user-gists.component.html
Comment threadangular-ngrx-scss/src/app/state/profile/profile.state.ts
Comment threadangular-ngrx-scss/src/app/state/user/user.effects.spec.ts Outdated
Comment threadangular-ngrx-scss/src/app/state/user/user.state.ts
Comment threadangular-ngrx-scss/src/app/user/services/user.service.spec.ts Outdated
},
},
];
httpClientSpy.get.and.returnValue(of(expectedHttpResponse).pipe(delay(0)));

@AmdrelAmdrelJul 1, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Why is this .pipe(delay(0)) needed?

@SDaianSDaianJul 5, 2022

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed, since now the observables are handled from the fakeAsync approach.

Comment threadangular-ngrx-scss/src/app/user/services/user.service.spec.ts Outdated

userService.getUserGists(username).subscribe((res) => {
expect(res).toEqual(expectedResponse);
done();

@AmdrelAmdrelJul 1, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: We should call done() inside of the complete callback of the subscription instead of the success one. If an error happens in the observable, this test may hang and never complete.

@AmdrelAmdrelJul 1, 2022•
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't tested this though. Maybe subscriptions work differently in tests and it will bail out intelligently when an error throws.

@SDaianSDaianJul 5, 2022

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Completely agree with you @Reshurum, doing a little bit of research found this quite interesting article who mention we should avoid the done() method on the spec. because can cause some false positives and a slow performance on tests:

https://www.piotrl.net/angular-testing-avoid-done/

So basically I rewrite using fakeAsync to handle the Observables.

Comment threadangular-ngrx-scss/src/app/user/services/user.service.ts Outdated
@lindakatcodeslindakatcodes mentioned this pull request Jul 1, 2022
Closed
6 tasks
@SDaian
SDaian requested review from Amdrel and ihardzJuly 4, 2022 10:19
@SDaian
SDaian merged commit a637c22 into mainJul 7, 2022
@SDaian
SDaian deleted the fix/issue-117 branch July 7, 2022 08:43
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes approved these changes
@AmdrelAmdrelAwaiting requested review from Amdrel
@ihardzihardzAwaiting requested review from ihardz

Assignees

@SDaianSDaian

Labels

None yet

Projects

None yet

Milestone

Angular + NgRx + SCSS

4 participants

@SDaian@Amdrel@lindakatcodes@ihardz