170 focus on resource page

Developer: Sean Nguyen

Closes #170

Pull Request Summary

Added focus styling for the resource page. This proved rather difficult since the page creates a dynamic amount of resources based on the database, using multiple components in the process.

The biggest challenge was that the main resource page needs access to the useRefs associated with each resource. However, since there is an arbitrary number of resource components, these useRefs cannot be hard-coded. Specific rules regarding React Hooks also prevented iteratively creating useRefs (i.e. can't just make them within a loop). This suggests that the useRefs need to be made within the Resource component itself, yet while also giving the main resource page access to all the useRefs.

My solution was to create a useState JS object holding all the useRefs. This object, along with the handleInputKeyPress function which cycles through the focus elements, is created within the main resource page and passed to each Resource component. Then, the Resource component creates its own useRefs, adds them as attributes to the Link element for the image and text, and updates the JS object with them.

Modifications

src/app/resource/page.tsx
src/app/components/ResourceRow.tsx
src/app/components/Resource.tsx

Testing Considerations

For some reason, appending new useRefs to the JS object is very slow, meaning it takes a long time for the resources to actually show up on the resource page. Commenting out line 34 (or the entire useEffect on line 26) in src/app/components/Resource.tsx makes the page load all the resource tiles significantly faster. Of course, this also prevents the focus styling on the page. I'm not sure why updating the useState results in such a performance difference :/

Pull Request Checklist

[x] Code is neat, readable, and works
[x] Comments are appropriate
[x] The commit messages follows our guidelines
[x] The developer name is specified
[x] The summary is completed
[x] Assign reviewers

hack4impact-calpoly / go-see-foundation