epicweb-dev / full-stack-foundations

Learn the foundational skills of building full stack web applications.
https://epicweb.dev/workshops/full-stack-foundations
Other
586 stars 152 forks source link

Fix content description when less then 100 chars in note #98

Closed RobbertWolfs closed 1 month ago

RobbertWolfs commented 1 month ago

When the note content is below 100 chars we currently show 'No content' instead of the content itself

RobbertWolfs commented 1 month ago

Note with 100+ chars -> we slice the content with ... dots

image

Note with less than 100 chars -> we show "No content" even when we have content

image

After the change

image

kentcdodds commented 1 month ago

Thanks for this! I'll want to have this change happen for all following exercises so we don't end up with a diff that incorrectly "reverts" this change in the next exercise here :)

RobbertWolfs commented 1 month ago

I'll update it in the next exercises as well

RobbertWolfs commented 1 month ago

@kentcdodds Fixed it on the next exercises as well.

Is it useful to create a util function for this or is this overkill for the exercise?

function generateNoteSummary({
  content,
  maxLength = 100,
  sliceLength = 97
}: NoteSummaryParams): string {
  if (!content) {
    return 'No content';
  }

  if (content.length > maxLength) {
    return content.slice(0, sliceLength) + '...';
  }

  return content;
}
RobbertWolfs commented 1 month ago

@kentcdodds I also noticed that in the following workshops we also have the same "code" so is it necessary to also fix it there or ?

https://github.com/epicweb-dev/web-forms/blob/8431630659fe45a4236b2e4ad78a35d02a8049c2/exercises/01.form-validation/01.problem.form-validation/app/routes/users%2B/%24username_%2B/notes.%24noteId.tsx#L82