coding environment:

• setup file/folder-structure

• setup version control (git)

• run application locally (testing server)

• install approved technologies (dependencies)

Posts may contain image galleries with multiple image sources that Reddit displays using a carousel.

From the data below create a Gallery.jsx component that uses a React-bootstrap Carousel component to responsively render the images from a srcset.

Truncated post with gallery sample:

{
          "is_gallery": true,
          "media_metadata": {
            "q95xb7sm1kdd1": {
              "status": "valid",
              "e": "Image",
              "m": "image/jpg",
              "p": [
                {
                  "y": 81,
                  "x": 108,
                  "u": "https://pre"
                },
                {
                  "y": 162,
                  "x": 216,
                  "u": "https://pre"
                }
              ],
              "s": {
                "y": 4284,
                "x": 5712,
                "u": "https://previ"
              },
              "id": "q95xb7sm1kdd1"
            },
            "wgcfd9sm1kdd1": {
              "status": "valid",
              "e": "Image",
              "m": "image/jpg",
              "p": [
                {
                  "y": 81,
                  "x": 108,
                  "u": "https://pre"
                },
                {
                  "y": 162,
                  "x": 216,
                  "u": "https://pre"
                }
              ],
              "s": {
                "y": 3024,
                "x": 4032,
                "u": "https://previ"
              },
              "id": "wgcfd9sm1kdd1"
            }
          },
          "media_embed": {
          },
          "secure_media_embed": {
          },
          "gallery_data": {
            "items": [
              {
                "caption": "",
                "outbound_url": "",
                "media_id": "q95xb7sm1kdd1",
                "id": 488934070
              },
              {
                "caption": "",
                "outbound_url": "",
                "media_id": "wgcfd9sm1kdd1",
                "id": 488934071
              }
            ]
          }
        }

Note: Image source urls' html entities need to be decoded.

See data/gallery/postWithGallery.json for a post from "r/Home" with full JSON structure.

Expanded sn takes too much space on mobile. Leave enough space to tap-off to close when in view. Leave ~ 1/5 underlay showing.

Close button should not be the only way to exit an expanded side-nav.

RTL swipe gesture closes nav to enhance UX

Trying to dispatch getPopSubredditsList from the sidebar component while receiving a 429 from reddit (too many requests) causes an infinite loop.

To recreate:

1. Visit https://react-reddit-client.netlify.app and max out the reddit endpoints max-requests by loading multiple subreddits from the sidebar (helps to use multiple browsers).

2. Once we start receiving Error 429, open https://react-reddit-client.netlify.app in a new browser. This will dispatch getPopSubredditsList causing an infitite loop as can been seen in the console.

I believe the Sidebar components Effect Hook is responsible for the infinite loop and can be fixed by removing popSubredditsList from its dependency array.

create wire frames for layout and navigation based on bootstrap components

• Desktop

  • Home
  • Home w/ comments

• Mobile

  • Home
  • Home w/ comments

Implement dashjs media player to load video using mpd manifest file for adaptive streaming

Setting up adaptive streaming media sources

Media component missing spinners on modals

Titles too long, replace current titles with r/subreddit format.

replace:
Movie News and Discussion
with:
r/movies

Problem and cause

The post components renderPostText method truncates post text HTML postTextHtml leaving unclosed tags and, depending on the structure of the HTML parsed by react-markdown, can crash the site. The site was not responding this morning so I rolled back to commit e4482d9 and all was well.

The bad commit, I believe is 3b7613f (Display truncated post text on click). Note that the site will not always crash as postTextHtml changes throughout the day depending on what posts are currently published on reddit.

Solution

Do not truncate HTML, use CSS to hide/truncate unexpanded post text.

If truncating HTML is necessary (which at this time it is NOT), orphaned HTML tags would need to be removed or closing tags added. So we don't have something like:

<div class="d-md-none ps-0 pe-0 pt-0 pb-3"><div class="md"><p>Tiny update: Steffan has seen this post. He is<span class="text-primary">...more

Which react-markdown might choke on.

List of potential technologies to use for this project

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

Crashes on mobile, possibly desktop version as well.

Media is not loading for all posts. Current media that loads uses data.media_embed property, but media may also exist in data.media. Have formatPostMedia trawl all sources which may include media sources.

Approved Technologies (check-off installed)

• React
• Redux
• Bootstrap
• React-bootstrap
• React Icons
• HolderJS
• DiceBear/identicon
• MomentJS
• React-markdown

Potential Technologies

React component libraries for Bootstrap (choose one):
Reactstrap https://reactstrap.github.io/
React-bootstrap https://react-bootstrap.github.io/

https://react-bootstrap.netlify.app/docs/components/badge/
https://www.npmjs.com/package/json-server
https://www.dicebear.com/styles/identicon/#options
https://www.npmjs.com/package/identicon
https://github.com/imsky/holder
https://github.com/dvtng/react-loading-skeleton#readme
https://react-icons.github.io/react-icons
https://material-ui.com/components/material-icons/
https://www.npmjs.com/package/react-bootstrap-icons

Originally posted by @travisjupp in #3

should request whatever's in posts.current

Approved Technologies/deps (check-off installed)

• React
• Redux
• Bootstrap
• React-bootstrap
• React Icons
• HolderJS
• DiceBear/identicon
• Luxon

Potential Technologies

React component libraries for Bootstrap (choose one):
Reactstrap https://reactstrap.github.io/
React-bootstrap https://react-bootstrap.github.io/

https://react-bootstrap.netlify.app/docs/components/badge/
https://www.npmjs.com/package/json-server
https://www.dicebear.com/styles/identicon/#options
https://www.npmjs.com/package/identicon
https://github.com/imsky/holder
https://github.com/dvtng/react-loading-skeleton#readme
https://react-icons.github.io/react-icons
https://material-ui.com/components/material-icons/
https://www.npmjs.com/package/react-bootstrap-icons

Scroll to Top button needed for long pages

Planning stage
Setup project todos

• API

  • reddit

• Components

  • Card

• Features

  • Home
  • Header
  • Avatar
  • Posts
  • Comment
  • SubReddits
  • Categories

• Store

• [ ]

Utils

Retrieve subsequent subreddit post JSON files by querying .JSON for the value of last posts name property, building the new URL by appending a after query argument then fetching.

eg. https://www.reddit.com/r/popular.json?after=t3_1ev2831

Implement bootstrap pagination to display pagination UI.

cUrl example:
fetch second page of r/Popular
curl https://www.reddit.com/r/Popular.json\?after\=$(curl https://www.reddit.com/r/Popular.json | jq -r '.data.children[-1].data.name'; sleep 5) | jq '.data.children[].data.name'

vimdiff example:
diff page 1 and page 2
vimdiff =(curl https://www.reddit.com/r/Popular.json | jq .) =(curl https://www.reddit.com/r/Popular.json\?after\=$(curl https://www.reddit.com/r/Popular.json | jq -r '.data.children[-1].data.name'; sleep 5) | jq .)

Search for and pin subreddits to the sidebar

As fetching avatars is the largest contributor to a user being rate-limited by reddit, we should add the option to disable avatars in the "Failed to fetch" toast message.

• research color pallets
• create custom bootstrap color scheme
• prefers color scheme

https://react-bootstrap.github.io/docs/getting-started/theming

https://getbootstrap.com/docs/5.3/customize/color/

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Fetching reddit response headers:

// const headers = {};
// fetch('https://www.reddit.com/r/Unexpected.json')
//     .then(res=>res.headers.forEach((v,k)=>headers[k]=v));

// console.log(headers);

const fetchBodyWithHeaders = async (url) => {
    const response = await fetch(url);
    const clonedResponse = await response.clone();
    const json = await response.json();

    const headerReportTo = response.headers.get('report-to');
    // const headerRatelimitRemaining = response.headers.get('x-ratelimit-remaining');
    // const headerRatelimitUsed = response.headers.get('x-ratelimit-used');
    // const headerRatelimitReset = response.headers.get('x-ratelimit-reset');
    // const headers = response.headers.entries(); // iterator
    
    // for (const h of headers) {
    //     // console.log('h =>', h);
    //     const [k, v] = h;
    //     // console.log(k, v);
    // }
    
    const hob = {};
    response.headers.forEach((v,k)=>{
        console.log({[k]:v})
        hob[k] = v;
    });

    console.log('hob =>', hob);
    
    const headerReportToArr = headerReportTo.split('}, ');
    // trim '}' from end of last element
    headerReportToArr[headerReportToArr.length-1] = 
        headerReportToArr[headerReportToArr.length-1].slice(0, -1);
    const reportToVals = [];
    
    // add '}' to end of each element and build reportToVals
    for (const hgroup of headerReportToArr) {
        console.log('report-to hgroup', JSON.parse(hgroup + '}').group, JSON.parse(hgroup + '}'))
        reportToVals.push(JSON.parse(hgroup + '}'));
    }

    hob['report-to'] = reportToVals;
    hob['nel'] = JSON.parse(hob['nel']);
    console.log('hob =>', hob);
}

fetchBodyWithHeaders('https://www.reddit.com/r/Unexpected.json');
// fetchBodyWithHeaders('https://www.reddit.com/r/react.json');

Headers we're interested in:

• x-ratelimit-remaining
• x-ratelimit-reset
• x-ratelimit-used