» CS 347: Lab 19 – Pictag, Part 1

CS 347: Lab 19 – Pictag, Part 1

November 9, 2021 by Chris Johnson. Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your files into Crowdsource in order to receive credit.

Task 1

Your task in this lab is to create an app for curating a collection of images. To help classify the images and navigate the collection, the user can tag them. For example, an image of young people playing with a pet may be assigned the tags #kids and #dogs.

We will not use Redux for this lab.

App

The App component will hold all the shared state of your app. Declare these four pieces of shared state:

a Set of tags (for example: new Set(['#dogs', '#kids']))

an object of images of this form:

{
  fiveguys: {
    id: 'fiveguys',
    href: 'http://www.example.com/restaurants/burgers1.jpg',
    tags: SET-OF-TAGS,
  },
  chickfila: {
    id: 'chickfila',
    href: 'http://www.example.com/restaurants/chicken3.jpg',
    tags: SET-OF-TAGS,
  },
  // ...
}

the currently selected tag name
the currently selected image ID

The component has three children: Tags, Images, and Tagger.

Images

The Images component shows a unordered list of buttons, one for each image that has the currently selected tag. The relevant images are sent down via props. Clicking on a button changes the currently selected image ID. The currently selected image ID is state stored at the App level, so you will need to use props to effect such a change.

Include a button for adding a new image by selecting the null image ID.

Tagger

The Tagger component shows the following components for the currently selected image:

a text input for an image’s href
a text input for an image’s id
a text input for an image’s tags, which are shown as a space-separated string
a button to save the inputs
an image element that shows the image

The Tagger receives the image whose data is to be displayed via props. (If the ID is null, pass an object that creates an image with empty tags, href, and ID.) It uses the image’s properties to initialize three pieces of local state. To ease manipulation of the set of tags, turn the local version of the tag set into a space-separated string:

const [tags, setTags] = useState(Array.from(image.tags).join(' '));

When the user clicks the save button, the image is saved to the images object stored in App. You will need to use props to effect such a change. Bundle up the href, id, and tags string in an object and pass it along to a callback function.

In the callback, add the image into the object, replacing any image with the same ID. Split the tags up into its fields and add them to the larger set of tags. And deselect the image by nulling the current image ID.

See a reference callback function.

const saveImage = image => {
  const imageTags = new Set(image.tags.split(/\s+/));
  setImages({
    ...images,
    [image.id]: {
      id: image.id,
      href: image.href,
      tags: imageTags,
    },
  });
  setTags(new Set([...tags, ...imageTags]));
  setCurrentImageId(image.id);
};

TODO

The next step of your learning is to complete the following tasks:

Re-read the chapter Centralized State in All Over the Web. Be sure to follow along with the code samples. Recreate each exercise yourself.
Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and a snippet of source code in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page. If any of the requirements is not met, you will not receive full credit.

See you next time.

Sincerely,