Add the Link component #16

Merged
b38peng merged 0 commits from feat/Links into main 2 years ago
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner
  • Implemented client-side UI to display all links
  • Passed data in through props
  • Responsive :D
  • NOTE: the data passed in is the Dogs API for now
- Implemented client-side UI to display all links - Passed data in through props - Responsive :D - NOTE: the data passed in is the Dogs API for now
a3thakra (Migrated from git.uwaterloo.ca) approved these changes 2 years ago
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

This should go in pages/index. The <Link /> component should only care about "what" it's rendering, and not "where" it is rendering.

This should go in `pages/index`. The `<Link />` component should only care about "what" it's rendering, and not "where" it is rendering.
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

I'm assuming we're not using the dog api anymore haha 🐶

I'm assuming we're not using the dog api anymore haha :dog:
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

Instead of importing links here, we should make the <Link /> component more flexible. Right now, the component is like a function that always produces the same output. We should aim for a function that takes in some data, and produces a result that depends on the data given to it.

So in a nutshell, we should make the <Link /> component take in some props (specifically the links we want it to render) and render these instead.

Take a look at the <HelloWorld /> component that I created recently. Take a look at how I pass in props to it, and then render those. (You wont be needing useState and your component would be way simpler)

Feel free to hmu if there's anything that doesn't make sense, and I can walk you through it on a call.

Instead of importing links here, we should make the `<Link />` component more flexible. Right now, the component is like a function that always produces the same output. We should aim for a function that takes in some data, and produces a result that depends on the data given to it. So in a nutshell, we should make the `<Link />` component take in some props (specifically the links we want it to render) and render these instead. Take a look at the `<HelloWorld />` [component](https://git.uwaterloo.ca/csc/linktree/-/blob/main/frontend/pages/hello-world.tsx) that I created recently. Take a look at how I pass in props to it, and then render those. (You wont be needing `useState` and your component would be way simpler) Feel free to hmu if there's anything that doesn't make sense, and I can walk you through it on a call.
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

remove the comments haha 🙈

remove the comments haha :see_no_evil:
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

Since we are using a ul tag, we should also have li tags. (ul = Unordered List, li = List item)

We should be using semantic elements where we can, as these are very useful for visually impaired people. Visually impaired people mostly use screen readers to view webpages. These screen readers announce whatever is on the webpage, and if we don't use li, the screen reader cannot tell that each a tag is a separate list item, and it would announce all the links at once.

If we do add li tags, then the screen reader knows that each tag is an element of the list, and so the user can easily navigate the page using arrow keys.

Since we are using a `ul` tag, we should also have `li` tags. (ul = Unordered List, li = List item) We should be using semantic elements where we can, as these are very useful for visually impaired people. Visually impaired people mostly use screen readers to view webpages. These screen readers announce whatever is on the webpage, and if we don't use `li`, the screen reader cannot tell that each `a` tag is a separate list item, and it would announce all the links at once. If we do add `li` tags, then the screen reader knows that each tag is an element of the list, and so the user can easily navigate the page using arrow keys.
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner
Here's an intro to web a11y: https://www.w3schools.com/html/html_accessibility.asp More in depth info on mdn: https://developer.mozilla.org/en-US/docs/Web/Accessibility
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

Great job on the PR! 🎉

Great job on the PR! :tada:
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed title from {-Feat/links-} to {+Add the Link component+}

changed title from **{-Feat/links-}** to **{+Add the Link component+}**
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

LOL

LOL
q63xu commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

Let's delete this file, we don't need craco

Let's delete this file, we don't need craco
q63xu commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

Remove this line, tailwind has been imported in globals.css no need to import it again here

Remove this line, tailwind has been imported in `globals.css` no need to import it again here
q63xu commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

We won't be needing this either, removing this import doesn't break anything locally, so lets get rid of it

We won't be needing this either, removing this import doesn't break anything locally, so lets get rid of it
q63xu commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

Same with this, yeet craco outta here

Same with this, yeet craco outta here
q63xu commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

From line 22-28 (because gitlab doesn't have multi-line comments AHHHH WTF)

  • Put this in _app.tsx because we'll need the title + fonts included in every page, _app.tsx will apply this to every page for us
  • It'll prob look something like this
    image
From line 22-28 (because gitlab doesn't have multi-line comments AHHHH WTF) - Put this in `_app.tsx` because we'll need the title + fonts included in every page, `_app.tsx` will apply this to every page for us - It'll prob look something like this ![image](/uploads/5026e0b7aeed63aaebd7593464b7385e/image.png)
q63xu commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

Really good job on the styling here 💯

Really good job on the styling here :100:
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_23_20)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_2_3)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_10_9)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#9f86ceb115f7fe9d0fb9f91b3fa4b807020cf5ce_1_0)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#1a6b71374dc7231e0ce4cb72133a1320e5030eee_4_4)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#37083060967a471c011a16651e22bdc2ade41759_23_22)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#37083060967a471c011a16651e22bdc2ade41759_17_17)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_22_20)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_30_20)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

added 4 commits

  • 22c9cd43 - added li and moved head tag
  • 4e885148 - fixed position at top
  • d350ef34 - code review changes
  • 75fa10e6 - passed in data through props

Compare with previous version

added 4 commits <ul><li>22c9cd43 - added li and moved head tag</li><li>4e885148 - fixed position at top</li><li>d350ef34 - code review changes</li><li>75fa10e6 - passed in data through props</li></ul> [Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

resolved all threads

resolved all threads
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

added 1 commit

  • 2f7278b5 - passed data through props

Compare with previous version

added 1 commit <ul><li>2f7278b5 - passed data through props</li></ul> [Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51598&start_sha=75fa10e6ce42419a868ccfc8da46be3a7460a91d)
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

mentioned in merge request !13

mentioned in merge request !13
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed the description

changed the description
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed the description

changed the description
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner
      <title>@uwcsclub | LinkList</title>
```suggestion:-0+0 <title>@uwcsclub | LinkList</title> ```
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 5 of the diff

changed this line in [version 5 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51648&start_sha=2f7278b5e3706185c4cef279835de1f60dee1db6#1a6b71374dc7231e0ce4cb72133a1320e5030eee_9_9)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

resolved all threads

resolved all threads
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

added 1 commit

  • 45d66f5a - Apply 1 suggestion(s) to 1 file(s)

Compare with previous version

added 1 commit <ul><li>45d66f5a - Apply 1 suggestion(s) to 1 file(s)</li></ul> [Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51648&start_sha=2f7278b5e3706185c4cef279835de1f60dee1db6)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

changed this line in version 6 of the diff

changed this line in [version 6 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51651&start_sha=45d66f5ad87b47627df6b29af9c69dd1fde93d7e#fb79b93671dfc0706360a8fe2e984c0a8665cc34_28_0)
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

added 4 commits

Compare with previous version

added 4 commits <ul><li>0585f772 - changed website title</li><li>fb1f2211 - Merge branch &#39;feat/Links&#39; of https://git.uwaterloo.ca/csc/linktree into feat/Links</li><li>c52053b2 - renaming fixes</li><li>2b66d287 - destructuring</li></ul> [Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51651&start_sha=45d66f5ad87b47627df6b29af9c69dd1fde93d7e)
a3thakra commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

approved this merge request

approved this merge request
b38peng commented 2 years ago (Migrated from git.uwaterloo.ca)
Owner

added 18 commits

  • 2b66d287...08fc9eb3 - 7 commits from branch main
  • 4317e153 - implemented links
  • 42cc2fbb - changed to LF
  • 5f49cd71 - made responsive
  • 61da9fbb - added li and moved head tag
  • d75d131f - fixed position at top
  • aaa6f06b - code review changes
  • 41916147 - passed in data through props
  • e743c712 - passed data through props
  • 651f3a4d - changed website title
  • 6ebb0548 - renaming fixes
  • 9451e65f - destructuring

Compare with previous version

added 18 commits <ul><li>2b66d287...08fc9eb3 - 7 commits from branch <code>main</code></li><li>4317e153 - implemented links</li><li>42cc2fbb - changed to LF</li><li>5f49cd71 - made responsive</li><li>61da9fbb - added li and moved head tag</li><li>d75d131f - fixed position at top</li><li>aaa6f06b - code review changes</li><li>41916147 - passed in data through props</li><li>e743c712 - passed data through props</li><li>651f3a4d - changed website title</li><li>6ebb0548 - renaming fixes</li><li>9451e65f - destructuring</li></ul> [Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51653&start_sha=2b66d287f20803bcbe77eaf48a6164304beca5cd)

Reviewers

The pull request has been merged.
Sign in to join this conversation.
No reviewers
No Label deployment
No Milestone
No project
No Assignees
1 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: old/LinkList#16
Loading…
There is no content yet.