sethcram/book-club

A blogging/creative writing platform leveraging a novel reputation system.

Book-Club

A blogging/creative writing platform built with MongoDB, Express, React, Node (the MERN stack) and leveraging a novel reputation system.

Read the paper

Watch the videos

Quick Intro

Detailed Overview

Developer Notes

• basis: https://www.youtube.com/watch?v=tlTdbc5byAs&list=PLj-4DlPRT48lGpll2kC4wOsLj7SEV_lYu
• Test data script
  • can create & delete all fake posts, users, categories, votes, and comments
  • from api directory:
    • insertion: node seedData.js -i -p # -u # -c #
    • deletion: node seedData.js -d
    • example usage: node seedData.js
• CkEditor features can be added or removed:
  • download from https://ckeditor.com/ckeditor-5/online-builder/
  • unzip folder into "client" folder
  • rename unzipped folder into "ckeditor5"
  • run "npm add file:./ckeditor5" in the client directory

Environment File

1. MONGO_URL should be found through MongoDB Atlas "Deployment" > Database > Connect > Drivers > Driver as "Node.js" version "4.1 or later", then copy & paste connection string, and replace with the password for the given user
   1. Requires account creation/login
2. DEV_PASSWORD is recommended to be a complex password
3. JWT_ACCESS_SECRET_KEY and JWT_REFRESH_SECRET_KEY should be extremely complex and distinct since they won't be required for direct usage, just authentication
4. ENV should be set to production or development
   1. production: ENV="PROD"
   2. development: ENV="DEV"
5. FILE_STORAGE_URL should be set to wherever the uploaded images are supposed to be stored
   1. production: FILE_STORAGE_URL="http://[publicIpAddress]" or FILE_STORAGE_URL="https://[publicIpAddress]"
   2. development: FILE_STORAGE_URL="http://localhost:5000"

Developer Setup Instructions

1. Install Node.js v16 & npm

   curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
   sudo apt-get install -y nodejs
   sudo apt install -y npm

   1. Verify nodejs is version 16 node -v
   2. If nodejs is lower than v16, install nvm and update to the right node.js version:

      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
      command -v nvm

      If "command -v nvm" doesn't output "nvm", logout and relogin, and then:

      nvm install 16.17.1

2. Clone the project and install the project dependencies

     git clone https://github.com/SethCram/book-club.git
     cd book-club/api/
     npm install
     cd ../client/ckeditor5/
     npm install
     cd ..
     npm install 
     cd ..

3. Fill out the environment setup file (use http not https for the file storage url)

   vi api/.env

   Refer to https://github.com/SethCram/book-club#environment-file for more details.
4. Create the required Search Indices on MongoDB Atlas to allow the Search Bar to function properly
   1. Login to MongoDB Atlas then go to "Deployment" > "Database" > "Search" > "Create Search Index" > "Visual Editor" > "Next"
   2. Change the Index Name to "searchPosts" and link it to your Database's posts collection > "Next" > "Create Search Index"
   3. "Create Index" again > "JSON Editor" > "Next"
   4. Change the Index Name to "autoCompletePosts", select your Database's posts collection again, and replace what's in the JSON Editor with

   {
     "mappings": {
       "dynamic": false,
       "fields": {
         "title": [
           {
             "foldDiacritics": false,
             "maxGrams": 7, 
             "minGrams": 3,
             "tokenization": "edgeGram",
             "type": "autocomplete"
           }
         ]
       }
     }
   }

   5. "Create Search Index"
5. Start the api and client by running npm start in their respective directories in different terminals

Packages

• Nodemon is installed for a responsive api
• Mongoose connects the API to MongoDB Atlas through NodeJS
• Multer allows for file posting to the API
• Uses Axios to communicate between frontend React and Express API
• Icons retrieved from Font Awesome

Deployment Notes

The Deployment Instructions assume the project is being deployed onto AWS. The only changes necessary to deploy it elsewhere is to ensure port 80 is open to HTTP traffic and port 443 to HTTPS traffic.

Deployment Instructions

1. Launch a new EC2 instance on AWS:
   1. Select Ubuntu as the OS image
   2. Generate a new .pem key pair for SSH
   3. Allow SSH, HTTPS, and HTTP traffic from anywhere on the internet
   4. Set the storage to 20GB (arbitrarily)
2. On AWS, navigate "Network & Security" > "Elastic IPs" > "Allocate Elastic IP address" > "Allocate" > Select the IP > "Associate Elastic IP address" > Choose the instance we're running on > "Associate"
3. If an elastic public IP isn't created and associated with the instance, when the instance is stopped and started back up again, the public IP address will change
4. Wait for the Instance State to read "Running"
5. Go into the instance > Connect > EC2 Instance Connect > Connect
   1. If this doesn't work, go into the SSH client tab and follow the below steps, otherwise continue to step 4
   2. Then copy & paste the last part of the "Example:" into Putty as the Session
   3. Open up PuttyGen, "Load" the .pem key, and "Save private key" as .ppk
   4. In Putty, Connection > SSH > Auth > Credentials > and choose "Private key file for authentication" as the .ppk we just generated
   5. When prompted, choose to Accept
6. Install setup application software Node.js v16 & npm and server software nginx & pm2

   curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
   sudo apt-get install -y nodejs
   sudo apt install -y npm
   sudo apt install -y nginx
   sudo npm i -gy pm2

   1. Verify nodejs is version 16 node -v
   2. If nodejs is lower than v16, install nvm and update to the right node.js version:

      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
      command -v nvm

      If "command -v nvm" doesn't output "nvm", logout and relogin, and then:

      nvm install 16.17.1

7. Clone the project and install its dependencies

   git clone https://github.com/SethCram/book-club.git
   cd book-club/api/
   npm install
   cd ../client/ckeditor5/
   npm install
   cd ..
   npm install 
   cd ..

   1. If any npm install hangs, reboot the instance and reconnect to it and then setup debugging:

      npm config set loglevel info
      npm install --verbose

8. Copy the example environment setup file for the api

   cd api
   cp .env.example .env
   cd ..

9. Fill out the environment setup file

   vi api/.env

   Refer to https://github.com/SethCram/book-club#environment-file for more details.
10. Make sure the domain and DNS are able to redirect to the public IP

    cd client
    export DANGEROUSLY_DISABLE_HOST_CHECK=true;
    cd ..

11. Manually start both the api and the client to ensure they both work in isolation

    npm start 
    cd ../client/
    npm start 
    cd ..

12. Make sure pm2 runs the required processes and nginx boots on server restart

    pm2 startup
    sudo env PATH=$PATH:/home/ubuntu/.nvm/versions/node/v16.17.1/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u ubuntu --hp /home/ubuntu
    sudo systemctl enable nginx

13. Indefinitely run the api and client, then verify and save it to run on server restart

    cd api
    pm2 start --name api npm -- start
    cd ../client
    pm2 start --name client npm -- start
    pm2 logs 
    pm2 save
    cd ..

14. Setup nginx to direct external api requests to the api

    sudo vi /etc/nginx/sites-available/default

    add this inside the "server" block, replacing the "location" block with:

    location /api {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    

15. Setup nginx to direct external website connections to the client

    sudo vi /etc/nginx/sites-available/default

    add this inside the "server" block, below the first "location" block:

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    

16. Verify the syntax of the nginx config file is okay and start nginx using it

    sudo nginx -t
    sudo service nginx restart

17. Login to MongoDB Atlas and go "Security" > "Network Access" > "Add IP Address", then add the elastic public IP of the AWS EC2 instance (visible under EC2 instance details)
18. Verify the website is live through navigating to the public IP address using a browser (e.g. http://[publicIPAddress]) and the frontend should be visible or use curl to verify curl http://[publicIPAddress]
19. Create an account and register a subdomain and its corresponding "www." at http://freedns.afraid.org/menu/ (make sure they're linked to the EC2 instance's public IP)
20. Setup nginx to accept traffic from the domain name

    sudo vi /etc/nginx/sites-available/default

    replace the "server_name" with:

    server_name domain_name www.domain_name
    

21. Verify the syntax of the nginx config file is okay and restart nginx using it

    sudo nginx -t
    sudo service nginx restart

22. Navigate to the domain name using a browser (e.g. http://[domain_name]) and the frontend should be visible or use curl to verify curl http://[domain_name]
23. Make sure the latest version of snapd is installed

    sudo snap install core; sudo snap refresh core

24. Ensure no other versions of certbot exist, install it via snap, and make sure it's properly linked

    sudo apt-get remove certbot
    sudo snap install --classic certbot
    sudo ln -s /snap/bin/certbot /usr/bin/certbot

25. Get an HTTPS certificate and tell Certbot to edit your nginx config file to enabled HTTPS

    sudo certbot --nginx

    1. Ask for certificates for both subdomains 1, 2
    2. If a error is encountered that talks about "too many certificates already issued for [domain_name]", wait until the specified date and rerun this step's command or setup an at job to automate the certificate issuance
26. Change the file storage url from using HTTP to using HTTPS

    vi api/.env

27. Navigate to the secured domain name using a browser (e.g. https://[domain_name]) and the frontend should be visible or use curl to verify curl https://[domain_name]
28. Lastly, ensure that automatic certificate renewal should go properly

    sudo certbot renew --dry-run

book-club's Issues

[BUG] Changing username doesn't change usernames on ur posts

Describe the bug

• Changing username doesn't change usernames on ur posts

To Reproduce
Steps to reproduce the behavior:

1. login
2. go to settings page and update username
3. notice how in DB there are posts with ur old username still

Expected behavior

• username on posts should be updated too

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Additional context

• will likely need to be done thru the api + checking if username changed

Development

• update user posts only if they match username and username changed
  • had to retrieve user + check if username gonna change
    • then update their matching posts
    • all before actually changing user just in case the op fails
  • not sure how to update obj once already retrieved
    • so just find it again to update it
    • done in users + posts

[ENHANCEMENT] Implement a password reset method

Is your feature request related to a problem? Please describe.

• yes, users can't reset their passwords

Describe the solution you'd like

• a password reset email or separate page form

Additional context

• originally proposed during #23

Development

• allow password reset via email or separate reset password page
  • should make a different api method to reset password
  • another page like this further clutters top bar
    • so should be added after topbar cleaned up for mobile
    • or w/ user settings moved

[ENHANCEMENT] Allow for post + comment flagging

Is your feature request related to a problem? Please describe.

• yes, users can't report content that doesn't follow site guidelines

Describe the solution you'd like

• Allow for post + comment flagging

Additional context

• worthless without #14 implemented first

Development

• add int flagged field to comment + post models

  • should be init'd to 0 and never negative
  • should record how many times instance's been flagged

• seems unnecessary since just the length of flags arr

• add array of flags to each post + comment model

  • each element can hold a username telling who's flagged the model

• add flag icon btn on both comment + post frontend

  • similar to vote icons
  • will be filled if user has flagged object before
    • their username will be held in the flags arr

• add api method to cast or rescind a flag

  • adds or removes an element from the flags arr

[ENHANCEMENT] Add Simple Text Editor to Comments

Is your feature request related to a problem? Please describe.

• yes, comments cant be styled or structured very easily

Describe the solution you'd like

• Add Simple Text Editor to Comments

Additional context

• related to + come up with during #37

Development

• figure out what features should be allowed

• add it to comment creation

  • ...

• add it to comment updating

[ENHANCEMENT] Display all votes and comments to the author of them

Is your feature request related to a problem? Please describe.

• Yes, users can't see the votes they've cast and comments they've made in one place

Describe the solution you'd like

• Display all votes and comments to the author of them

Describe alternatives you've considered

• Allowing them to sift thru posts for their metadata

Additional context

• not sure why this would be all that useful...

Development

• • ...

[ENHANCEMENT] Minor aesthetic improvements

Is your feature request related to a problem? Please describe.

• Yes, the aesthetic of the website isn't very good

Describe the solution you'd like

• Minor aesthetic improvements

Additional context

• each post on the home page should have a background
  • marks where it ends and a new post begins

Development

• add bg to each post on homepage

  • reused sidebar bg for dark and light
  • each post can have diff sized outline tho
  • should center contents and have same box size regardless
    • if not enough description, image may not be justified to the top

• display each post's author on homepage too

• add site name to topbar

  • in the middle for phones
  • on the LHS for desktops
  • was able to add favicon too
    • used favicon.io and created my own
    • said to add to root of repo, but had to add to public folder for root access
    • likely bc index.html is in public folder too
    • still had to keep 2 copies of favicon tho bc
      • "Module not found: Error: You attempted to import ../../../public/favicon/android-chrome-512x512.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
        You can either move it inside src/, or add a symlink to it from project's node_modules/."

• center single-column posts on the screen

  • centered all posts on screen
  • changed flex from 90% to 100% and justified content to center
    • not sure why it was at 90% before
    • possibly bc user sidebar was always present

• w/ user not displayed, allow homepage full flex

• tell user when login fails

  • can look at other pages that do this
  • output error msg from backend

• fix error 404 link and wording

  • should be worded "Get Help"
  • changed containers so that space around link didnt go anywhere

• dont display categories section if no cats but follow at icons present

  • changed to check array length instead of non-related icon links

• use CSS variable for dark mode

  • can change it depending on light or dark mode
  • should be applied to all black text in project
    • so can then turn it white
  • should test with simple implementation before replacing variable names everywhere
    • didn't work properly
  • changed to going down to app.css and implementing default color based on whether dark or light active

• set max width for user sidebar

  • set to 50% of page width for w/ displayed below other contents in isolation

• consolidate MultiSelect configuration into a single reusable component

  • completed during #36
  • not a good isolation tho
  • but no point to abstract alota the categories related things since only reused for category related purposes

• emphasize dropdown arrow on write page in darkmode

  • couldn't change its color
  • so added a grey border around it
  • kinda weird looking since arrow not rlly centered
    • so moved it up
    • looks a bit better but not perfect

• link sidebar username to search posts by username

• add criteria that was searched by w/ search results shown

  • luckily, already a url parsing method in use
  • restricted it to rerun everytime search url changed and parse for username, category, searchContents, and page number
  • then displayed those fields in the search results header

• set visibility timeout for all error and success messages

• clear searchbar suggestions when enter pressed

• restrict max post title length

  • or atleast max post title length of a single word
  • leads to title row overflow of post container

• only display what username replying to if not replying to root comment

• only require favicon in one location instead of 2 duplicates

[ENHANCEMENT] Link delete account button on settings page

Is your feature request related to a problem? Please describe.

• yes, the delete act btn doesnt do anything

Describe the solution you'd like

• Link delete account button on settings page to make delete api call
  • should delete act + all posts linked to it
  • ideally, shouldnt delete all posts linked to user

Development

• Link delete account button on settings page to make delete api call
  • done similarly to deleting post
  • only required user id to delete the act tho
    • not even username like post deletion did
  • deleted all posts linked to user
• Update context api
  • instead of making 3 new states, just reused user update states
  • for user, passed null when update successful
• auto-navigates back to register page after deletion for some reason

[ENHANCEMENT] Research and Propose more Complex Reputation System

Is your feature request related to a problem? Please describe.

• Yes, the current reputation system is rather simplistic

Describe the solution you'd like

• Research and Implement more Complex Reputation System

Additional context

• #32 is dependent upon this, but could be implemented before or after

Development

• find/create some feasibly complex reputation systems/eqts

  • StackOverflow related research:
    • https://www.researchgate.net/publication/308804833_Stack_Overflow_Badges_and_User_Behavior_An_Econometric_Approach
    • https://www.researchgate.net/publication/262366731_Analysis_of_the_reputation_system_and_user_contributions_on_a_question_answering_website_StackOverflow
    • all gated by request access
  • papers provided by Dr Jamil:
    • paper2.pdf seems the most useful
      • mentions rating consistency in-line with the majority as part of user's reputation score
        • doesn't work as-is for Book Club rn bc users can already see posts + comments reputations
      • determine user consistency thru:
        • hiding post + comment + user reputation badge and scores
        • telling user to cast enough fresh votes to earn a consistency score
          • and the privilege to view rep badges + scores again
        • scoreable vote = vote cast on a post/comment w/ rep != 0
          • each scoreable vote takes up 10% of user's consistency score
          • each vote is given 0-10% based on if post/comment:
            • scored >= 500, 10%
            • scored >= 100, 8%
            • score >= 50, 6%
            • score >= 10, 4%
            • score >= 1, 2%
            • score isn't in the same direction as the vote cast, 0%
      • can display consistency score as separate modifier on user sidebar
        • could be a three part color bar of red if < 33%, yellow if 33% < consistency score < 66%, or green if > 66%
        • would be filled dependent on what percentage display
        • would display the percentage too
        • tooltip would tell of its issue date and that it was the consistency score
      • every act created with isTesting: true so cant see rep scores or badges anymore
        • would have to dissallow guests this privilege too if want it more fool proof
        • if isTesting, sidebar displays a tip to vote enough to see post+comment+user scorings and get a consistency score
      • everytime isTesting is set back to false, a random interval would be generated tween 7-14 days of elapsed time
        • w/ user logs in, would check if consistency interval has run out since the consistency score issue time
          • if so, isTesting set true and not falsified till enough scoreable posts voted on
          • if so, consistency score would be wiped and set to 0
        • once enough votes given, isTesting = false, new randomized grace period given, and consistency score timestamp would be updated
      • could enable and disable consistency scoring at will via user settings page
        • should be checkbox and have tooltip telling of what it is via a question mark
      • so, each vote while isTesting = true should update user model w/ new consistency score and number of test vote
        • once test vote count reaches interval of 10, isTesting = false and
      • so, consistency score setup would require fields:
        • useConsistencyScoring
        • isTesting
        • consistencyScore
        • consistencyGracePeriod
        • consistencyScoreCreatedAt
        • scoreableVotesCast
        • Some could be put into a new "consistencyScoring" model
        • Or could keep in user model
      • should add isTesting to jwt for server and client side auth
        • could only update consistency scoring related fields if isTesting true
        • could decode jwt client side to make sure testing users cant see any rep icons or scores
          • or could check isTesting before returning rep score and badgeName for comment, post, user, and vote updating linkedModel and linkedAuthor
          • but that would require a token verification for GET requests, which even guest users should be able to do
      • Other possibilities:
        • determine consistency via how early on in a post's lifetime the correct vote was cast
          • could be incremental or based on w/ badge achieved
            • incr could be randly gen'd
          • wouldn't allow for a percentage, but a numeric score
          • would req alota user updates every incr or new badge
          • less consistency scoring could be added the higher the model's score went
            • in a half-bell curve like fashion capping out around 500
    • other papers have too complex systems, don't propose systems at all, or aren't applicable to my project

• propose the new reputation system to Dr. Jamil

  • he gave the greenlight
  • said that 10 as a trivial number isn't justifiable
  • proposed that the number of votes to determine consistency score could be:
    • customized per person
    • determinable by a ML algorithm
      • could take into account any number of user features to determine number of votes taken
      • could start as baseline at 10 and keep a history of chosen numbers and determined consistency scores
      • so, could use combo of determined consistency score and how low number of votes taken as fitness function
      • could alter starting baseline based on a system-wide ML model stored on API
        • would needa store history of each user's testing vote count and resultant fitness score
      • could encourage a minimum of 3 and a maximum of 50 via fitness modifiers

[BUG] Homepage posts can go on forever

Describe the bug

• Homepage posts can go on forever

To Reproduce
Steps to reproduce the behavior:

1. create 40 posts
2. navigate to site
3. notice how takes long time to load since loads all available posts on home page

Expected behavior

• should be a pagination mechanism in place

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• figure out how to send mult queries at once

  • need to format as ?category=Fake&&page=1
    • so, each query needs a && tween them
    • and first one must start w/ ?

• Add a pagination mechanism to the homepage

  • required previous + nxt + page number btns
    • nxt + previous btns req 2 separate funct calls each for the same amt ret'd
  • requires a Link tag wrapped around a button
  • link sends user to a new url thru changing the search query
    • was able to query via multiple params thru replacing via regex expression
    • each link tag reqs an update to page pagination
      • loaded at spin up time
      • likely slow
      • should somehow do this operation via onClick()
        • but can't change search param directly

• Create a React Component for each pagination button

• style pagination appropriately

  • center buttons in a flexed manner
  • should be single row unless alota pages
  • tell pagination options to not show up if less than 1 page's worth of content

[ENHANCEMENT] Add reputation score to each post and user

Is your feature request related to a problem? Please describe.

• Yes, users should be restricted from certain actions without enough reputation
• Yes, good posts need differentiating from bad ones

Describe the solution you'd like

• Add reputation score to post model and user model
  • display user reputation score on user settings + topbar + sidebar
  • display post reputation score on posts homepage and singlepostpage

Additional context

• different issue implements the increase and decrease of reputation score

Development

• Add reputation score to post model and user model
  • couldn't use int since mongoose only supports Number
  • had to add a validator to ensure number field is an int
  • defaulted "reputation" to 0
• display user reputation score on topbar + sidebar
  • can display it right next to user name in sidebar
  • displayed it on LHS of user profile pic on topbar
  • should both topbar + sidebar text to overlay an image
    • was able to through https://stackoverflow.com/a/22644813/13046931
    • essentially displayed in a block then used margin to center it
    • leaves a weird amt of space to the icon's RHS
    • tried 2 different approaches, once using margin to center and another using absolute position
      • both still left weird space on icon's RHS
• display post reputation score on posts homepage and singlepostpage
  • will likely need to add percentage of flex on LHS to homepage rep score
    • should only be able to up/down vote once user has atleast visited page
  • but would be easier just to put post scoring on LHS of title
    • could do so for both singlepostpage and homepage
  • post scoring should use a different icon
    • so used diamond instead

[ENHANCEMENT] Restrict users actions based off reputation

Is your feature request related to a problem? Please describe.

• Yes, there's no incentive to get a high reputation

Describe the solution you'd like

• Restrict users actions based off reputation

Development

• only allow post upvoting if user's reputation is above a certain threshold

  • Chose 10 to be that threshold

• only allow post downvoting if user's reputation is above a certain threshold

  • Chose 50 to be that threshold

• may need to replicate error prevention in post and each comment

  • could potentially create a class to encompass a single vote icon
  • then functionality such as creating and updating a vote could be tied to each vote icon
    • so woudn't need duplicate methods for that anymore

• vote prevention only performed on the client side for now

  • through exporting a reputationReqs object from App.js
  • but if Vote condensed into an rfc, could isolate it to that comp
  • but not sure how to share these restrictive params between backend + frontend w/o hardcoding
    • could just implement on backend?
    • would result in more api calls
    • but would also be more secure

• isolated Vote icon into a component

  • so no longer had to duplicate vote related methods to share tween singlepost and comment

• test badge color change on post and comment

• test author reputation + badge change change on post and comment

  • need to create a fresh post + comment
  • cast a vote on one act
  • update that vote to 499 thru postman
  • cast another vote on a diff act
  • the post author reached rep 250 w/ gold badge then rep 500 w/ platinum blue badge

• restrict voting w/o high enough rep server-side too

• allow any type of voting on comments of authored post

[ENHANCEMENT] Allow users to upload common filetypes

Is your feature request related to a problem? Please describe.

• Yes, if a user's already written a chapter or post in another editor, the file should be upload-able

Describe the solution you'd like

• A file upload button on the write page
• The file should be parsed + autofill the title and description text areas

Describe alternatives you've considered

• Don't allow file upload

Additional context

• depending on the file type, parsing may differ

Development

• add A file upload button on the write page
  • ...
• parse the uploaded file + autofill the title and description text areas
  • ...

[ENHANCEMENT] Comment section improvements

Is your feature request related to a problem? Please describe.

• yes, the comment section isn't well polished and the code not well consolidated

Describe the solution you'd like

• various comment section improvements

Describe alternatives you've considered

• leaving it as-is

Additional context

• originally taken from #9 to allow its closure

Development

• allow query posts by user by their comment username

  • easy to use a link and query by username

• replace comment update text with post edit button

  • easy change to text to icon and color to css

• if user not logged in, redirect them to login page if try to reply to comment

  • used window.location.replace
    • didnt allow easy back-nav since went to src of website first
  • used window.location.assign() for easy back nav

• consolidate the 2 instances of voting icons into 1 comp

  • performed during #7

• allow comment deletion

  • would have to delete all reply comments too?
    • didn't do this, left them alone for future usage
  • accomplished during #14

• change red badge from -1 to -3

  • more difficult to lower other people's score
  • ensure user's score only decreases by -5 and not -8
    • should be only -5 since catch all badges given for a negative score and set scoreChange to -5
  • should verify thru:
    • setting env to DEV to get 15m access token timeout
    • login with admin account client side
    • create a comment on one of their own posts client side
    • create a -2 vote for comment from admin via postman
    • login to another act client side
    • downvote comment to get -3
    • should dynamically give red badge and persist (check)
    • should lower post author's score by -5 dynamically and persist
      • didn't do so dynamically when a reply or root comment's badge was changed
      • i believe this was why sidebar was taking context user instead of sidebarUser w/ sidebar user was null
        • bc sidebar user wasn't updated dynamically, but context user was
      • but if that's the case, if comment reached new badge and wasn't the context user, it prolly wouldn't have been dynamically updated
        • and it wasn't, as seen w/ the red badge was achieved thru a final vote cast by not the author of the post or comment
        • so can't go back to how i was doing it
        • need to update sidebar user rep score and badgeName dynamically
  • changed structuring of sidebar component to be more sensical
    • needa make sure everytime retrieve axios headers, if context user updated must propagate the new refresh tokens
    • can't have two context dispatches in same method or else earlier one overwritten?? not sure
  • if alota votes or comments posted, also had to ensure local rep change propogated from Vote or Comment all the way up to sidebar
    • check at root before passing into sidebar that the author changed is actually the sidebar user

• compress root comment replies until link with number of replies expanded via btn

• don't allow editing of multiple comments at once

• align the RHS of the comments to a particular spot

  • should always be in the same spot regardless of comment length/size

• drag user's screen down to where comment placed once created

  • particularly useful if alota comments

• display comment author's reputation or mini badge beside their comment

• don't let authors of comments vote on them

• determine how to display + get author profile pics

• delete all post comments and votes when post deleted?

• dont delete all user comments and votes when user deleted (unrelated)

• Change score requirement for a comment badge to half that of post and user

[ENHANCEMENT] Add "Posts" to topbar

Is your feature request related to a problem? Please describe.

• Yes, user's can't easily see all of their own posts

Describe the solution you'd like

• Add "Posts" to topbar that queries the current user's posts on the homepage
  • shouldn't be visible to non-logged in users

Describe alternatives you've considered

• leave as-is and allow users to find how to query their own posts via their username link

Development

• Add "Posts" to topbar that queries the current user's posts on the homepage
  • ...
• Make "Posts" not visible to non-logged in users
  • leaves an odd amount of space tween the next 2 closest elements
    • solved thru eliminating surrounding tag w/ user not logged in too

[ENHANCEMENT] Allow updating + creation of categories linked to each post

Is your feature request related to a problem? Please describe.

• Yes, posts don't currently have their category fields implemented

Describe the solution you'd like

• Add a list of common post categories to Categories model
• Add a drop down menu to link different categories to a post at creation time
• Allow the categories a post is linked to to be updated

Additional context

• common post categories may need to be added to Categories model manually

Development

• Add a list of common post categories to Categories model
  • did so thru postman
  • need a better way
• Add a drop down menu to link different categories to a post at creation time
  • had to create a dropdown w/ multi-selectable items
    • since want to link at most 3 categories to each post
    • downloaded new lib for purpose
    • when items selected, added horizontally to dropbox and expands it
      • ideally, dropbox would grow vertically
  • retrieved categories from using api + displayed them in multiselect
  • stored selected vals in a reference
    • used that ref to assigned categories to post at publish time
    • can only access component based functs via ref
  • added some padding so not right nxt to other comps
• Allow the categories a post is linked to to be updated
  • had to update through dropdown so reused categories call funct
    • could possibly put all of these reused functs into a file somewhere to call??
  • prefilled dropdown with post's current categories
  • had to use a local categories state var for responsiveness
    • possibly bc post wasnt being re-retrieved after update
    • and i dont think it ever is unless reload or navigation to diff page\

[BUG] Fix user categories

Describe the bug

• User category links are too large and they query wrong

To Reproduce
Steps to reproduce the behavior:

1. click on a post on home page
2. click on one of the author's categories
3. notice how everything under that category is queried, not just their own posts
4. and notice how can click a category when not directly over the text
5. also notice that the author's categories contains all categories, not all of their own cats

Expected behavior

• Should query author's posts according to the selected cat
• Should only query cat w/ its name-text is selected
• Their categories should contain the author's most commonly posted categories, not every category

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• Should query author's posts according to the selected cat

  • not very clear that it's doing so since no title to posts when click cat link
  • ideally, user sidebar should stay on page w/ query by username EVER
    • even if queried with a cat
    • fixed this so now user sidebar stays on
  • improved query parsing on client side

• Should only query cat w/ its name-text is selected

  • extended link to its whole box bc of explicit cursor changes in CSS
  • they seem like a bad idea in general
    • cursor may have pointer but may not actually select a link

• Their categories should contain the author's most commonly posted categories, not every category

  • could also do their most commonly upvote/downvoted categories
  • or most commonly commented on categories

• display the number of posts for each category a user has

  • only required frontend changes since was already returning the count of each category

[ENHANCEMENT] Category related improvements

Is your feature request related to a problem? Please describe.

• yes, categories can't be created and have some display problems

Describe the solution you'd like

• allow category creation and display them well

Additional context

• originally come up with during #5

Development

• allow regular users to create new categories/tags

  • then could sort by most used in dropdown

  • if desired tag/category not within dropdown, could create one at post publish time

    • would have to allow its creation + selection in dropdown first tho
    • but could prevent from publishing it till submission
    • could perform actions "onSearch()"
      • should figure out if this is triggered when enter pressed
      • or if triggered everytime something typed in
        • acted as onChange()
        • created local cat names + added them to list
        • but dropdown didnt immediately rerender new items

  • could post new category to db when enter key using onKeyPressFn() and checking for enter key

    • needa retrieve what's held in textbox too
    • was able to post new category to database alright, but couldn't manually update selected values
    • only able to updated manually selected values thru catching + posting on enter key
      • then updated selectedOptions passed into multselect comp
      • had to prevent default w/ enter key pressed to prevent form submission
      • doesn't work on edit page bc preSelectedOptions being concatted w/ selected ones
      • so undid concat and init'd in state var

  • for some reason, posting a new cat on the write page erases all other selected items

    • but doesn't happen on edit page
    • works perfectly on edit page for some reason
    • also doesn't even set the newly posted category name properly
    • leaves textbox entirely blank

• display total posts tagged w/each category when selecting categories for post

  • for each option displayed, search thru entire array of categories
    • so pretty rsrc intensive
    • also reruns everytime dropdown is opened or closed
    • but can't store the number within the option since don't want count w/ post new category to db
    • so used decorator to dress up display of options

• fix glitchy posting of categories on write page

  • for some reason, posting a new cat on the write page erases all other selected items
    • but doesn't happen on edit page
    • works perfectly on edit page for some reason
    • also doesn't even set the newly posted category name properly
    • leaves textbox entirely blank
    • only difference between edit and write page is that write page passes in empty preSelectedOptions arr
  • fixed thru temporary fix of initing each write page with first category option
    • should always be atleast one category present in db

• fix categories with too long of words messed up sidebar display

  • used different CSS to lower chances of improper display
  • aligned text to the center of their respective inline block

• disallow spaces in category names

  • they may become needed though?
  • did client prevention and serverside validation
    • used regex for both along with .test()

• establish more solid implementation

  • current one relies on preselected values being present
    • and manipulating selectedValues state var passed into comp
  • entirely possible a future update will break the current impl
  • asked how srigar/multiselect-react-dropdown#248

• remove word(s) in textbox once new category created via enter

[ENHANCEMENT] Allow for updating of post picture

Is your feature request related to a problem? Please describe.

• Yes, after posting the title picture of a post can't be changed

Describe the solution you'd like

• Allow for updating of post picture in singlepostpage w/ updating post
• Also allow for deletion of a post picture entirely when updating or after uploading one
• Images no longer linked to posts should be deleted

Development

• Allow for updating of post picture in singlepostpage w/ updating post

  • had to check for conditionals of local picture and post picture

• allow for deletion of a post picture entirely when updating

  • included a trash can icon to remove picture from post

• Images no longer linked to posts should be deleted

  • process is slow and sometimes doesnt register quickly
    • likely bc submission btn reqs 3 api calls now
  • not sure how to quicken it or account for the speed
  • may have to rm feature entirely
  • may have to force a page reload ?
    • tried only reloading page after old pic deleted
    • still some probs but fewer?
  • could do for user profile pics too, but it didnt work well here so maybe not

• allow for post picture preview deletion on Write page

[BUG] Fix Various Ckeditor Bugs

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• fix images uploaded from user machine not displaying

  • why are these being stripped out?
  • iframe sanitization hook was catching all things being sanitized that werent iframes too

• fix image captioning not being centered below image

  • had to apply manual css to clear the background
  • since editor bg manually cleared too

• fix image alignment not being applied

  • only happens w/ not LHS justified and not surrounded by text
  • fixed thru using "ck-content" classname alongside singlePostDescription
  • wherever ckeditor implimented
    • in single post page only for now

• rm white and light-grey as text color options

  • almost, if not impossible to see this color on light bg
  • had to re-add all the other colors as manually
    • so left some seemingly extra ones out
    • used the color dropper to get their colors from the default color palette

• fix red and green highlighters

  • they only color the text, not the bg of the text
  • that's bc they're pens, not markers
  • so i'll rm them since have text color changing dropdown

• fix some paragraph text not being previewed

  • may only happen to paragraph text with styling on it
    • yes bc that styling adds more html tags that aren't allowed thru the filter
    • ended up adding alot more tags thru the filter thru manual addition of them
  • or paragraph text after iframe or img

• fix can't increase or decrease the indent

  • can occasionally use these btns but not intuitive when u can use them

[BUG] Background of login + registration site cuts off the image's RHS when resized

Describe the bug

• Background of login + registration site cuts off the image's RHS when resized

To Reproduce
Steps to reproduce the behavior:

1. logout if logged in
2. go to login/registration page on a computer
3. resize the tab horizontally
4. notice how items stay centered but bg doesnt

Expected behavior

• bg should stay centered + cutoff both LHS + RHS

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• • ...

[ENHANCEMENT] Comment section for every post

Is your feature request related to a problem? Please describe.

• Yes, feedback can't be left on posts

Describe the solution you'd like

• Comment section for every post
  • located below the post on singlepostpage
  • should include username of person who posted comment
  • each comment should be upvotable/downvotable by those w/ enough reputation
  • poster should be able to mark whether a comment was helpful/reasonable
    • if so, the commenter should receive reputation points
  • anybody should be able to make comments + reply to another person's comment
• All comments should be linkable back to user who made them

Additional context

• reputation system needs implementing beforehand
• should I create a new "comment" model
  • then each post model would have an array of comments

Development

• comment model

  • username to link to author
  • reputation + badgeName
  • postID to get all of a posts comments
  • replyID to link to replied comment

• comment api methods

  • needa create, get all, get by id, update, delete
    • only author should be able to update or delete
    • get by id to reply to other comments
    • during comment retrieval, should also return comment being replied to if exists
      • didn't do this
      • not sure how to display on frontend
  • changed comment creation
    • to also link a created comment to its replied to comment's replies arr
    • but only does a single level, so iteratively finds root comment
  • changed get all comments
    • now retrieve all comments that arent replying to other comments
    • so, can render the replies under each root comment

• add query all comments author'd by a user

• implement list of comments on frontend

  • located below the post on singlepostpage
  • should include username of person who posted comment
    • each comment should be upvotable/downvotable
  • just like creation of post, creation of comment should be customizable thru an editor
  • should have a "reply" button
    • which should store the replied comment's id locally
    • and attach repliers username to top of comment
    • displayed thru storing the index of the selected comment and checking if it's the one within map()

• update ReputationIcon to take comment

  • had to make further margin adjustments for number centering
  • so passed in a class

• allow for creation of brand new comment

  • as comment on original post at top of comment section
  • could potentially make it into a function instead of comp or just html
    • since reused to 2 separate spots
  • after posting comment, needed to refresh displayed comments so just re-retrieve from DB
    • but required moving getComments() outside of useEffect

• visually display replied to comments below root comment

  • had to restructure Comment model to contain an array of reply comments
    • made mapping way easier
  • also displayed whoever replying to username within comment

• make comment into a react functional component

  • can't refetch all comments if dont know when submitting a new comment
    • so, will have to create local comments and store them with their corresponding render index/parent objectId
    • wrong
  • will likely need to create a "CommentSection" component too
  • created both comment and comment section components
  • comment section needed to know:
    • what comment being replied to for rendering text box location by id
  • new comment template needed to know:
    • comment being replied to username for rendering + submission
    • comment being replied to id for submission
  • cleared out comment template once comment submitted
    • if a reply comment submitted

• allow replying to other comments

  • had to communicate tween react comps via passing in a parent funct handle to its child

• allow voting on comments

  • copy + pasted post voting functionality
    • have to handleVote() in separate way
  • should prolly remove hover altogether
    • did so for posts and comments
  • generalized the api method for updatedLinkedModel fairly easily
    • since Comment and Post had fields such as "reputation" and "badgeName" named the same

• allow editing of author'd comment

  • similar to editing of post
  • implemented a comment-specific write mode enabled upon update btn press

[ENHANCEMENT] Rework to increase responsiveness and verticallity

Is your feature request related to a problem? Please describe.

• Yes, mobile phone users will have a difficult time on parts of the website

Describe the solution you'd like

• Rework to increase responsiveness and verticallity
  • CSS classes could change w/ screen size reaches certain range
  • could rework mostly write page in a vertical fashion

Additional context

• take responsive features from portfolio website maybe

Development

• turn topbar into hamburger dropdown menu for mobile phone users

  • Redbubble has a similar design to mine and Weebly, but only during desktop view
    • phone view uses hamburger
  • used premade react component
    • then only displayed while screen size was small enough for tablets of phones
  • has probs w/ Safari and IE

• update currDeviceType everytime screen width changes

  • only updates w/ refresh rn since code setting var not in any method
  • https://stackoverflow.com/a/19014495/13046931
    • used this to determine device type and exported device type

• restrict post container to fit within viewport when it shrinks

  • could use media queries and generic container class
  • did so but only had to for post class

• sidebar should be displayed if present for mobile phones

  • displayed it below page content since page content deemed more important than author details
  • did so thru css media query flipping flex row to flex column

• remove about page slides during mobile phone mode

  • used exported DeviceType and copy + pasted currDeviceType setting code
    • could turn that into a function and export it too
    • did so
    • doesnt rlly make sense that funct + const resides in topbar but oh well

• write page must be vertically reworked for mobile phones

  • left title and pic upload on same row
  • shift category selection + public btn up
  • recentered picture display

• rework singlepostpage in phone display

  • no RHS margins around contents or picture since no sidebar there anymore
  • so added constant RHS margin

• login and register page seem fine

  • bg image still shifted as mentioned in #22

• make posts render the same as prevs

  • ensure post preview boxes stay the same size regardless of screen resolution
    • doesnt seem like the right way to do it
    • so just set min width
    • so, now posts are the same size wrt the other posts on the screen
  • don't needa worry ab posts with more than 3 cats since not how it works for users

• fix mid-edit singlepostpage to be presentable in tablet and mobile screens

  • setting width to fit contents on sidebar helped
  • adjusted width of ckeditor since it was pushing sidebar

• change home page presentation during tablet mode

  • sidebar currently being cutoff otherwise
  • could only allow 1 post horizontally when home page queried in tablet mode
  • easier to render sidebar underneath posts tho
    • but the sidebar becomes very wide
    • so set max width of sidebar in tablet mode to 50%
    • and aligned the contents in the center during tablet mode

• place logout + user setting under profile picture dropdown

  • logout currently under hamburger
  • could reuse hamburger menu or try to find different dropdown
  • for now, placed logout under hamburger
    • not as intuitive but could fix thru adding logout btn to setting page

• link login + register btns under dropdown

  • take up too much space on phone
  • needa display some new default character icon when no user logged in
  • for now, placed under hamburger
    • bc default character icon non-intuitive

• add logout btn to settings page

• fix background coloring problems introduced by mobile phone mode

• create an author topbar displayed above each post in mobile phone view

[BUG] New user with the same username is given control of all deleted user's models

Describe the bug

• Since posts aren't deleted when users are, new user with the same username is given control of all their models

To Reproduce
Steps to reproduce the behavior:

1. Create a user with username "waffles"
2. Create several posts, comments, and/or votes logged in as them
3. Delete the account through the settings page
4. Create another user with username "waffles"
5. Notice how the system allows it since that username is no longer taken
6. Log into the newly create user and notice how the deleted accounts posts, comments, and/or votes are now ours

Expected behavior

• New users shouldn't be granted access to deleted accounts posts, comments, and/or votes

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Additional context

• could not actually delete user and just add+mark a new "deleted" flag true
• could relink posts, comments, and votes to user through userId and not username
  • but the ObjectId could also be reused in the future w/ deletion (possibly)

Development

• • ...

[ENHANCEMENT] Research into RSS for content posting/presentation

Is your feature request related to a problem? Please describe.

• Yes, content updating and posting stylizing is limited

Describe the solution you'd like

• RSS for content posting/presentation

Describe alternatives you've considered

• Alter the as-is formatting

Additional context

• recommended but not required
• seems XML based
• possibly useful intro video https://www.youtube.com/watch?v=0klgLsSxGsU
  • essentially just a one-stop location to view all new posts from a variety of subscribed to websites
  • I could display content from other websites, but provide up and down vote and comment functionality for post scoring

Development

• look into RSS Reader tutorials + gauge how long they take
  • ...
• implement RSS reader under "My Content" tab/page

[ENHANCEMENT] Don't display user sidebar on homepage all the time

Is your feature request related to a problem? Please describe.

• Yes, the home page shouldn't show a user profile unless that user is queried for

Describe the solution you'd like

• Only display user sidebar on their own single post page + when they're queried on homepage

Development

• display user sidebar on their own single post page
  • more difficult than home page + settings bc dont have any requested user info
  • may have to render SideBar inside SinglePost comp
  • or could find post via post id, then use the username listed there
    • did this, but to avoid retrieving post twice, got post only in page jsx
    • then passed post down to singlepost jsx
    • had to change most post field's to use ? to catch if post is null
    • since post being set with async funct
      • but was also using async funct before??
• display user sidebar when they're queried on homepage
  • had to parse the query to retrieve the user username + query type of username or category
  • then setup a new api method to retrieve a user via username instead of id
  • required SideBar comp to be passed the user it's rendering too

[ENHANCEMENT] Indicate what post author voted on a comment

Is your feature request related to a problem? Please describe.

• yes, the commenters don't know how the author feels about their comment without a reply comment

Describe the solution you'd like

• Indicate what post author voted on a comment with a tag on the comment

Additional context

• Will likely require another field on each comment
  • could be boolean if only show if author upvoted
  • or could be enum if wanna show whether author up or down voted

Development

• • ...

[ENHANCEMENT] Determine a hosting solution

Is your feature request related to a problem? Please describe.

• Yes, the project is only accessible locally

Describe the solution you'd like

• Website hosted on a web server
• API hosted somewhere
• If web server doesn't offer file storage, File server for profile pics + post pics

Development

• Website hosted on a web server
  • need to host the website "dynamically" since it has a backend
  • can use a combination of AWS EC2 for computing power + S3 for 5 GB of storage for files/pics
• API hosted somewhere
  • AWS has an "always free tier" https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all
  • can host apis on AWS Lambda w/ 1 million free reqs per month

[ENHANCEMENT] Use CSS variables for key website colors and Implement a dark mode

Is your feature request related to a problem? Please describe.

• Yes, dark mode isn't possible to switch to and the colors are all scattered

Describe the solution you'd like

• Use CSS variables for key website colors

Describe alternatives you've considered

• Changing colors manually as needed

Additional context

• needs to be implemented in index.css

Development

• determine key website colors

  • just sampled new colors from my own browser
  • will be ever-changing

• implement a switchable dark-light mode

  • followed https://www.youtube.com/watch?v=VzF2iTTc0MA
  • using Context API again
  • Can't get singlepostpage to extend its container to the bottom of the page
    • ppl said changed height or min-height
    • I changed min-height to 100vh instead of 100%
    • what's 100% mean then?

• fix write page text boxes

  • simple CSS change to bg's and height adjustments based on viewport

• fix write page category selection text + elements

  • had to use inline CSS + rewrite CSS for use during dark + light mode
  • couldn't figure out hover or CSS by id for inline CSS
  • or how to not use inline CSS for prebuilt component

• fix editing page txt boxes + category ellys

  • ez copy + paste of CSS
  • once again req'd ThemeContext for category selection

[BUG] dark mode decision doesn't persist after page refresh

Describe the bug

• dark mode decision doesn't persist after reload

To Reproduce
Steps to reproduce the behavior:

1. Turn dark mode off
2. Refresh the page
3. Notice how dark mode turn back on

Expected behavior

• dark mode decision should bd persistent for all future site visits

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Additional context

• could possibly use cookies of some other type of client storage

Development

• try using client-side local storage
  • as simple as adding localStorage init to state var and setting it everytime theme toggled

[ENHANCEMENT] Deploy the API and website

Is your feature request related to a problem? Please describe.

• yes, the project can only be accessed in a local dev environment

Describe the solution you'd like

• Deploy the API and website for 24/7 availability

Additional context

• research can be found in resolved issue #8

Development

• successfully manually deploy onto AWS EC2 instance

  • when install client dependencies, SSH tunnel freezes
    • but only when "npm install" ran with sudo, otherwise it just fails on a permissions issue with rewriting
    • Talks about requiring atleast node.js version 14.0.0 or higher
    • But current node.js version is 12.22.9
    • Possibly trying to install ckeditor dependencies too?
      • looks like it
    • Have to reboot the instance when this happens bc can't tunnel in
    • still got the same errors even after updating to node.js v16
      • but for some reason it still says current node version is v12.22.9
    • worked okay now though
  • api crashes on "." following a "?"
    • only w/ node.js version outdated
  • site is inaccessible at public IP
    • js throws error 404
      • also fails to load it
    • "Ruleset ignored due to bad selector"
    • favicons can't be found with error 404
    • even when backend isn't connected or running
    • actually updating node to v16 using nvm didn't solve this problem
    • will only display the index.html of the client
      • so looks like atleast redirecting okay at the start
    • possibly an issue with nginx config
  • still repeatedly throws "Firefox can’t establish a connection to the server at ws://35.165.161.211:3000/ws."
    • but the website works okay
    • possibly solvable thru optimizing build into a folder then connecting ppl to that instead of localhost
      • but kept hanging since client was still running via pm2
      • so stopped it in pm2
      • but now "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory"
      • so not enough RAM on AWS EC2 instance to build the production build
  • after deleting several collections on MongoDB Atlas, the search bar stopped working properly
    • never gives options or result posts
    • looks like in MongoDB the Search indices were deleted along with the Post model collection
    • googled how to "recover deleted mongodb atlas search index" but could find anything
    • had to re-create the lost search indices using the original video

• create deployment instruction section in README

  • had to add additional for:
    • pm2 run on server restart
    • copying production build to proper location
    • file location url in env file

• fix "Firefox can’t establish a connection to the server at ws://35.165.161.211:3000/ws."

  • repeatedly throws the error msg after initial connection but website still works okay
    • possibly solvable thru optimizing build into a folder then connecting ppl to that instead of localhost
      • but kept hanging since client was still running via pm2
      • so stopped it in pm2
      • but now "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory"
      • so not enough RAM on AWS EC2 instance to build the production build
      • solved problem through creating production build locally and pushing it up to git
        • not recommended to do so
    • when folder connected to instead of localhost, api not communicated with properly
      • prolly bc proxy no longer exists?
      • "The proxy feature (in package.json) isn't meant for production."
      • so i added /api/ to the front of all frontend requests + rebuilt the prod build
    • for some reason, favicon is successfully pulled now while dev servers running
    • officially fixed thru connecting to client production build instead of development server
  • but had to revert to using development server for multer to work

• fix favicon retrieval

  • research why favicon not displayed in React app deployment
  • had similar problem concerning github pages deployment on React app

• fix the deployed website breaking on every non-home page refresh

  • prolly have to allow access from those other urls explicitly
  • fixed thru routing all site navigation to the index.html to handle using nginx
    • https://tecadmin.net/solving-react-404-error/
  • unless .env file changed, can just restart pm2 process when change occures
    • or atleast w/ nginx change happens
  • isn't an issue when using development server

• fix image upload

  • research why multer doesn't work in deployment
  • tried returning [public url of website]/images/filename for uploaded images, but didn't work
  • EC2 EBS 30GB storage only available for the first 12 months
    • same with S3 but only 5GB storage
    • but for some reason all talk about multer on AWS concerns S3 not EC2 instance even when explicitly searched for
  • verify the problem isn't caused by the optimized production build location
    • when development server run, images can be upload + retrieved just fine
    • so, production build cant be used for now
      • as seen in this answer since production build will get rid of uploaded images https://stackoverflow.com/a/65000511/13046931
      • could potentially upload images into build folder dynamically w/ in prod but would also needa direct nginx to the specific prod location

• upload images to AWS S3 for scalability

  • would possibly increase image retrieval time
  • can likely revert back to using production build for deployment then
  • prod deployment instructions:
    • Setup nginx to direct external website connections to the client

    sudo vi /etc/nginx/sites-available/default

    add this inside the "server" block, replacing "root" with:

    root /var/www/html;
    

    add this inside the "server" block, below the first "location" block:

    location / {
        try_files $uri $uri/ /index.html; #route all the requests to the index.html file
    }
    

    • "Copy the production build files to their proper location sudo cp -r ./client/build/* /var/www/html "

• fix local image upload now timing out on firefox Windows

  • seems related to Windows, Firefox, and Chrome
  • https://stackoverflow.com/questions/39990111/browser-freezing-after-selecting-file-in-input-field
  • not sure how to fix tho

• allow https through certificate authentication

  • 2 possible paths seem to be setting up:
    • AWS Elastic Load Balancer
      • Automatic distribution of incoming application traffic across multiple Amazon EC2 instances.
      • 750 Hours per month for the free tier for first 12 months
      • would require more work, but also provides better availability
      • video also states you need a domain name https://www.youtube.com/watch?v=bWPTq8z1vFY
      • Other possibly useful video https://www.youtube.com/watch?v=kvlSep7m7Uk
    • a tool called "letsencrypt"
      • let’s Encrypt is a Cert Auth (CA)
      • need to demonstrate control over the domain
        • but "Instead of securing a domain, you can encrypt a public IP address"
        • although "The Let's Encrypt certificate authority will not issue certificates for a bare IP address."
    • tried to use certbot to get HTTPS certificate https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal
      • said "too many certificates already issued for "us.to"" and to retry after midnight tonight UTC
        • limit resets weekly apparently
      • set an alarm + scheduled the command to get certs for both domain_name and www.domain_name at midnight UTC
        • used the "at" command (had to install)
        • ran immediately too tho which was weird
        • redirected output of schedule cmd to a file
        • not sure if it'll update the nginx config file properly so backed up the current one
          • bc i setup my nginx file in unorthodox way
        • cmd wasn't scheduled at the right time for some reason
    • now, domain from "www." is now accessible
      • this subdomain may only be reachable through HTTPS?

• allow website access from particular url/domain instead of public ip

  • have to use AWS route 53 which costs money or purchase a domain from elsewhere
    • a purchased domain name has to be renewed annually
    • but a .com is relatively cheap around $10 per year
  • free domains are available but through various odd conditions
    • possible lead https://www.getfreedomain.name/domain/us.to/
    • would need to register a sub-domain under an existing domain
    • So registered book-club subdomain to us.to domain
      • not sure how to verify this tho
      • tried navigating to this url and the DNS on the EC2 instance but it just throws "Invalid Host hear"
        • one user solved this thru using prod build instead of dev of create-react-app
    • tried adding the instance DNS, attained subdomain, and public IP to server name in nginx
      • should try to curl the DNS address to see if that works and the browser doesnt
      • bc SSH works with the DNS address but not browsing
      • could also try logging into SSH using the free subdomain url
    • SSH works for public ipv4 DNS, new subdomain name, and the public ipv4 address
      • connects to the private ipv4 address though according to the prompt
    • enabled ICMP ipv4 through security group on AWS
      • pinged the domain name and verified the correct public ip address was being linked to
    • used https://stackoverflow.com/a/59308020 to disable the host check and allow connections from the public DNS and domain name
      • even after this an adding server_name as domain_name and www.domain_name, still can't connect via www.domain_name
      • HTTPS allowed connection from www.

• implement a form of logging that isn't console logging

[ENHANCEMENT] Implement a default profile picture

Is your feature request related to a problem? Please describe.

• Yes, the current default profile picture cuts off weirdly

Describe the solution you'd like

• Implement a default profile picture if none is linked to user

Describe alternatives you've considered

• Allow for upload of profile picture during registration time

Development

• find a free default profile picture

  • not sure if the wiki one i used is free

• implement free profile picture to render when none other available

  • set it as default in user model for every newly created user
  • also render it in sidebar when no user is found

• also changed imagesFolder to only be used when saving a new post or updating user

  • now entire path is saved as profilePicture
    • is that bad for security?
    • can be changed back if need be

• stopped deletion of profile to also delete all linked posts

[ENHANCEMENT] Implement ways to alter post/user reputation score

Is your feature request related to a problem? Please describe.

• Yes, post and user reputation score can't be changed

Describe the solution you'd like

• Post reputation should be increasable/decreasable (only once by each person)
  • figure out a way to keep track of who's already voted on what post
  • only allow post voting if player's reputation is above a certain threshold

Additional context

• comment section increase of user reputation mentioned in comment section issue

Development

• Post reputation should be increasable/decreasable

  • shouldn't be if user is author of post tho
  • should each Vote be a new object?
    • Fields:
      • voter username
      • vote of 1 or -1
  • each post should be able to contain an array of votes
    • each post's reputation score could contain an array of votes
    • then when post deleted, it will be as if nobody ever voted on post
      • good or bad depending upon if want to deal w/ votes that dont lead to a post or not
  • or should each user contain an array of the votes they've cast and the postid it was cast on?
    • it'd be easier to retrieve user votes this way
    • cant make vote obj postid field be unique
      • bc mult ppl should be able to vote on the same post
    • when user deleted, all their votes should be too
      • but their contributions to post scoring will remain unchanged
      • since post reputation is just a number incr'd and decr'd
    • should only be able to update ur own vote
      • but each vote no intrinsically linked to a user since has no user id field
  • decided to make Vote its own standalone model similar to Post
    • can be linked to other objects such as post or future comment model
    • requires an author and +/- 1 score for accumulation
    • they should all be deleted once their author act is
  • created a Vote post and update method
    • whenever vote created/update, post rep score changed accordingly
    • doesnt allow updating of vote if score hasn't changed
    • alota error checking and diff response paths implemented w/ error msgs
  • also deleted all user votes when their act is deleted

• Only allow post rep change once per person

  • will have to verify that no vote exists author'd by voter and linked to particular post selected
  • once post loaded, should highlight selected vote if author already cast vote on post previously
  • performed server side in post method

• Impl post voting capabilities on SinglePostPage

  • needa link some btns to vote creation/update
  • impl'd a new get Vote method to retrieve vote id for updating
  • could've used a single method when vote icons selected called "upsert()"
  • Instead used 1 post, 1 get, and 1 put method
    • only used post method when get or put failed with 404 bc couldnt find vote to update
  • Also could've used 1 put and 1 post too
    • had this implemented but didnt seem as safe/reusable as 3 separate methods
  • Swap icons thru CSS when hover
    • needa swap icon on page load if a vote for a page is retrievable
    • then hovering should be inverted so conditional CSS classes
    • https://stackoverflow.com/questions/19502835/is-it-possible-to-change-between-two-fontawesome-icons-on-hover

• allow for a vote with a score of 0

  • icons working well, but there's no way to undo a previous vote without highlighting the opposing scoring hand
  • will have to restructure how updating votes affect linked model
    • needa take into consideration the previous and new score
  • after voting, opposing hand could change score by 2 instead of 1
    • or, could not display hand entirely until original score moved back to 0
    • due to structuring, doesn't display other hand at all but that's okay
  • changing score to 0 broke local rep score
    • now have to take change in vote scoring into act rather than just flat number

• only allow non-authors of post to vote on post

  • did so thru frontside verification

• ensure voting buttons work properly on mobile devices too since hover prolly wont occur before click

  • may have to change some things based on screen size using media queries if problematic
  • Had to change some JS to conditionally assign diff voting vals bc no hover in mobile devices
    • https://stackoverflow.com/questions/54044739/how-can-i-define-a-variable-depending-on-the-width-of-the-screen
    • but now if screen too small, voting doesnt work bc assumes no hover
    • was able to get it glitchily working thru conditional CSS
      • tried using opacity 0 instead of display none but didn't work
      • https://stackoverflow.com/questions/18219732/display-none-on-hover-dont-work-properly-css
      • figured out that two css's w/o comma are conditional on both being present

• change post icon bg to indicate the reasoning as to why user rep changed

  • red = negative, bronze = 10, silver = 50, gold = 100, platinum/blue = 500
  • when absolute position used, numbers grow strictly right
  • but when margin used, numbers grow both left and right equally
    • but singlepostpage title row uses flex space inbetween
    • so w/ relative position used, number separated from icon
    • could center each pair of ellys in their respective flex boxes
      • and remove space inbetween
    • instead, removed space between which changed nothing ?
      • then floated icons right and floated numbers left
      • even when margin added to center numbers, they still grow right instead of left and right
      • had to manually assign content box sizing
        • so then as content added, grows both directions since text centered

• create a single component for reputation icon and score rendering

  • could pass in what icon to render and score
    • or could pass in whether rendering for user or post then decide the icon that way
    • then depending on if user or post could assign score icon colors differently
  • all 4 icon locations reside in topbar, sidebar, singlepostpage, and homepage's post comp
  • otherwise will needa copy + paste everytime an icon change is made to all 4 places
  • easy enough and worked on both post icons fine
    • but user icon numbers not properly centered
    • so only enforced strict content boxing during post related rendering
      • fixed topbar rendering, but sidebar icon text is too high
      • bc no "margin-top: -2px" needed for sidebar display

• increase player reputation every time one of their posts exceeds certain reputation thresholds for the first time

  • too volatile to increase user score alongside the scores of their posts everytime
  • also shouldn't decrease user score in the same way increase it
    • only decrease it in extreme cases
  • could increase by half the score of the badge reward
    • so would take two of each badge to achieve the equivalent user rating + badge color
  • could do a the same for a comment achieving that much recognition
  • Everytime a vote is created or updated for the better
    • will have to check if post's reputation previously wasnt but just exceeded a certain number
    • and if so, update author's user score
    • will stay in effect regardless of whether final voter revoked vote or not
      • but post would lose its badge color
      • to keep post from losing badge color, would have to check everytime vote cast then change post's new enumerated badge field
    • but if post rep score raises once again above threshold, one post reaching that threshold twice would contribute to 2 badges for user, not one
    • so, need each post to have a "badge" field to set mentioned below
      • could then check if badge field already set w/ threshold val hit so doesnt double allocate points to user
  • if post badge is changed, need to update author's score by half
    • did so but had to return a list instead of updateModel from the method
    • for both create + updating post also returned the author's information if their rep increased
      • abstracted away their password and email
  • verify through updating a post to 1 rep before a threshold value
    • then creating a positive vote of 1 for that post
    • output should contain updated author w/ higher rep score

• check everytime vote cast or updated then change post's field

  • could use new enumerated badge field
  • if exceeds a certain score and hadn't before
  • to keep post from losing badge color since currently assign badge color on client side at render time
  • would void all the work done to dynamically generate badge color at vote time
  • each badge field set at different scores
    • could potentially make a badge into a separate model
    • each badge would have a name and score field
    • could then display scoring scheme on About page
  • each user and post model could contain either a single badge or an array of attained badges
    • array seems unnecessary
    • not sure how to keep track of a single other obj in mongoose tho
    • could just contain a single object id
    • or score or name since they're all unique fields
  • first, see if can find badge matching the score the post's updated to
    • if so, update post's badge name to new badge name
    • as long as it's higher than the current post's badge score, if it has one
  • once the frontside is changed to render badge color based off post field
    • trivial reputation score w/o votes backing it won't change the post's badge color
  • verify through updating a post to 1 rep before a threshold value
    • then creating a positive vote of 1 for that post
    • output should contain updated post w/ badge name
    • $get didn't work as I thought it would
      • doesnt apply filter
      • just gets all
  • was easier to verify thru creating a vote, then updating it so that the one vote accounted for pretty much the entire post's reputation
    • will have to patch this type of vote updating later

• everytime player reputation increases, assign user badge based if score reaches high enough for first time

  • player rep only increases everytime vote created or updated
  • could theoretically display user icon color based on score instead since player score never goes down
    • but incase it goes down in future, used badge
  • needa test in a similar threshold manner to previously
  • verify thru updating user rep to right below a threshold value
    • then update a vote so that one of their posts achieves a badge
    • user should also receive a badge
  • can't test for particular values here since author rep may not land directly on a badge number
    • will have to check threshold somehow
    • grabbed + sorted all the badges
    • then inserted old + new value into sorted array
    • if diff insert spots, then within diff buckets/badges
    • only updated badge if new badge inna higher bucket

• implement color changes according to post and author badge field on frontend

  • just used badgeName as switch and chose class based off that instead of hard coded badges ranges
    • still bad that this is hardcoded but oh well

• increase user score everytime the number of votes they cast exceeds a certain number

  • 10 reputation per 100 votes?
  • needa get all votes by user id
    • could possible countDocuments too using user id as filter
  • would needa check everytime new vote created
  • now it's possible to return the updated author user and/or the updated voter user from the creation of vote
  • when voter reputation exceeds badge threshold via casting enough votes
    • badgeName field not updated
    • possibly bc badgeName only updated when Above, not w/ on top of threshold value
      • verified thru voting more to get user over threshold val
        • badgeName updated properly
      • could remedy this by moving threshold values all down by 1 value
      • or only use bin method when score isn't exactly on top of a medal value
        • but then badgeName would be updated twice if user increases score after
      • tried remedying thru changing bin index function comparison from < to <=
        • worked great!
  • needa ensure users returned aren't showing their passwords or emails

• link vote to user via username, not id

  • makes so many operations and linkage easier
  • readability is also higher
  • main advantage to using user id seems to be during user deletion
    • just passed in username and userid during deletion then
  • simplified a couple functions which is nice
  • verified that votes deleted during manual user act deletion
  • notes can be created, updated, and gotten via api using username instead of userId now
  • validated UI voting still works

• verify that vote "linkedId" is valid and actually retrieves a post or comment

  • should be done every post creation

• dynamically alloc post badge color so voter can see change

  • change to post rep
  • need to see thru finding a post on the cusk of badge change and making a vote
    • can only do thru updating a post to cusp thru postman API

• dynamically update author badge color + rep score linked to post or comment
  -not sure how to do this since SinglePost component isolated from sidebar

  • could abstract it out into the page instead of leave as separate component
  • not super important since doesnt happen often
  • decided to call a method stored in their parent comment to communicate the change
    • had to chain together a state var from comment section to comment
    • then another state var from singlepostpage to singlepost for post voting and to comment section for comment voting
  • verify post to post author scoring updating thru:
    • create act1
    • create a post w/ act1
    • create act2
    • create a vote of 49 from act2 on that post thru postman
      • worked fine
    • create act3
    • upvote post to hit 50
      • threw an error, but only on upvoting and not downvoting
      • minor bug discovered and fixed
    • see if any errors in console
    • see if sidebar reflects new author score of 25 and badge color of silver
      • worked perfectly
  • verify comment to post author scoring updating thru:
    • using act1 comment on authored post
    • create a vote of 499 from act2 on that comment thru postman
      • didn't updated badge color on comment
    • use act3 to upvote comment to hit 500
      • comment badge color implemented properly here
    • see if sidebar reflects new author score of 275 and badge color of gold
      • it did so perfectly
  • verify that non-authored comments reaching a new badge level don't affect post author reputation
    • worked!

• clean wipe posts and users so that scoring lines up with badges

  • requires #13 improvements for properly inserted automated data

• every negative badge achieved, decrease author's score by 5

  • with #32 implemented, much more difficult to downvote people
  • worked properly
  • implemented negative author badge changes
    • but no negative badge changed for linked models like comments or posts

• every x amt of comments, increase author's reputation

  • changed to every 2 times for testing
  • did 10 for future
  • should return updated author to update user context if it's for the user
  • but will also needa update local sidebar and topebar if final comment made on post they authored
    • topbar auto updated
  • sidebar didn't auto update
    • changed context API user to be passed in if retrieved sidebar user is them
    • so, changes to user now auto-reflected in sidebar if it's the local user there

• every x amt of posts, increase author's reputation

  • changed every 5 posts created
  • no chance of needing to locally update author
  • should i export author rep update method from votes.js?
    • placed in a diff js module for helper functs
    • had to use CommonJS module.exports to export its functs tho
    • prolly due to env setup diffs tween API and Client
    • keeps saying "File is a CommonJS module; it may be converted to an ES module."
      • but seems to be working okay
  • inconsistency tween topbar and sidebar user rep caused for some reason

• don't allow updating of post/user rep directly

  • unless admin act
  • did thru jwt auth

• don't allow values other than -1, 0, or 1 at vote score

  • only allow admins or while in dev env to do this
  • only let admins do this
  • also only let admins update alota other model fields

• combine the code that's updating the post badge into code updating user badge

  • similar but alota differences once catch for negative score badge impl'd in updateAuthor()
    • but author badgeName not updated, only their score

• only allow non-authors of post to vote on post thru serverside verification too

  • post linked via username but vote linked via user id
    • changing linkage thru username would allow individuals to find author of votes easier which is bad
    • but otherwise wouldnt require too much alteration

[ENHANCEMENT] Add an automated way to populate the website with fake data

Is your feature request related to a problem? Please describe.

• Yes, the website looks empty and some aspects can't be tested without additional posts

Describe the solution you'd like

• Add an automated way to populate the website with fake data

Additional context

• could possibly use FakerJS
• shouldn't be done until more model architecture is finalized

Development

• research FakerJS and other possible solutions

  • decided to use FakerJS and build a separate script for fake data injection

• get post image to stop changing every refresh and be different

  • tried generated a random image each time
    • but now none of the links work
    • had to pass in dimensions and now it works

• fix categories not being linked to posts properly

  • had to map each chosen category to a name for insertion

• "Fake" category shouldn't be injected into DB since only devs should be able to use it

• Votes should also be injectable into the system or posts should be created with a random reputation score

  • votes could be linked to fake users so they already have basis w/ logged into
    • but would be more difficult to test what would happen at different reputation scores
    • would needa create an insane amt of votes + ensure each one's properly contributed to an appropriate post if a certain score needs reaching for testing
    • but creating votes would allow for testing if user rep increases if they contribute enough votes
    • also, all user votes should be shown somewhere
    • so should prolly do a combination of random rep score along with specified number of votes

• user linked votes aren't deleted with them

  • bc delete votes w/ user if deleted, but only during the API call
  • needa do in node script
  • after #11 change from vote authorId to username, simple deletion call

• create a specified number of votes based on if option

  • to properly model system, should model each vote originating from a user
  • so need as many users as upper bounds of reputation desired by a post
    • which should go all to a little over the highest badge
    • author can't vote on their own post so shouldn't be exact
      • can manufacture more users explicitly to create the votes and not have them author any posts
    • would require
  • tried creating enough votes to put each post into a different badge range
    • realized everytime create a vote, post rep doesnt automatically increase
    • only increased bc of call api does
    • same for why badge updated
  • so could just straightup create new votes with a new user for each
    • wouldn't needa try to get votes allocated properly at all

• add badges to posts

  • have to rando alloc post rep score
  • then test to see where within badges bounds falls
    • can do same way did in API using sorted list + insertion index

• add badges to users

  • bu for user badges and bp for post badges?
  • could just pass a "-b" to indicate want there to be badges on everything that can have them
    • no reason to have a limited number of badges i suppose
    • or to just give posts badges and not users
  • add badges by default now, not dependent on option

• randomize some post scores

• randomize some user scores based on if option

• determine why all users and votes not always deleted + fix

  • 1 user and their votes survived it last time
  • happens bc not all users are guaranteed authors of a fake post
    • so they aren't deleted at deletion time
    • happens by random chance
    • could assign each user a random post, then in subsequent posts choose the author randomly
      • would require posts >= users

• fake publish date of posts

  • adding a "createAt" date to the fake post worked perfectly!

• allow for entering of options in any order for insertion

  • installed minimalist-lite package instead of using a for-loop
    • parsed cmd line args into a dict for position independent option entering

• fake post comments

  • structured in the same way as votes
    • since wanted each post to contain comments under it given by each user
  • rolled a random every comment creation to see if a reply to any previous comments would be created
    • rolled another random to decide the comment to be replied to
    • then added the new replied to comment to the root comment's replies
      • in API, only root comment has replies arr added to tho
      • so I had to change it to do the same
  • replyId not being set for some reason
    • or replies array
    • because _id field not init'd till posted to db
    • so need create fake comments, post to db, then create fake replied from those
      • then gonna have to update originally posted comments too since replies field changed
      • due to the complexity of this, just gonna post og comments, create replies, delete og's, then post all of them
      • did this and worked but had to compare object id's in special way
  • haven't been able to verify whether replies to other replies are being faked occasionally
    • seems like they aren't tho

• make sure replies to other replies are being created

  • everytime not replying to root comment directly, reply not added to root comment replies
    • bc root comment can't be found
    • bc new reply comment not having its replyId set properly
      • should possibly set it as a string??
      • not the problem
  • since reply comment not posted to database yet, doesn't have _id field
    • so, would have to post og comments, post reply comment, then post reply to reply comments
    • shouldn't require any comment deletion
      • wrong since still adding replies to already posted comments
      • so could once again try updating since now only picking comment to reply to from explicit pool
      • could update same way deleting rn i think
    • could also reuse same method for both reply comment creation

• create realistic fake comment dating

  • bounded it between time of post creation
  • should bound between comment replying to if there is one
    • unfortunately, replies ordered by when they were added in display
    • so this way of adding dates works but doesn't display well

• delete fake comments

  • delete comments author'd by fake usernames

• speed up updating of root comments

  • did so thru performing a "Bulk Write"
  • could've allegedly used aggregation pipeline but couldn't get working
  • https://stackoverflow.com/questions/56752249/mongodb-how-to-update-array-of-objects-with-id-and-updated-values
    • bulk write example
  • https://stackoverflow.com/questions/63779855/mongoose-update-many-from-an-array-of-ids?noredirect=1&lq=1

• only add up to 2 cats per post

  • since users also assigned this restriction
  • 3rd will be the "Fake" cat
  • only allowed for constant number of cats to be chosen
  • so sliced out first two cats before randomly picking one or both

• determine why faked images suddenly won't render

  • w/ tried to nav to src url, asked for login
  • happened after fake posts were on website for a day or two
  • problem resolved itself

• delete all comments replying to comments author'd by fake usernames

  • otherwise they'll just sit in DB without being displayed

• populate post descriptions with faked html for better visualization

• figure out why images take so long to load

  • likely due to images being retrieved from HTTP request
  • for test data atleast

• figure out + fix how urls generated for social media links are dead

  • couldn't figure it out
  • tried passing a suggested format but it didnt work
  • could instead use image urls
    • these dont go anywhere so that failed too

• figure out why test data images occasionally change + fix them

  • tried using diff functs for generating the pictures
    • food images dont seem to be changing
    • false! they changed eventually
    • so all types of pics eventually change if generated by faker??
      • could potentially download post pics into FS to get them to not change
      • would need to figure out how to download image from url of image in automated fashion
      • then place the images in the proper place + get/gives their names

[ENHANCEMENT] Post description editor

Is your feature request related to a problem? Please describe.

• yes, text aspects such as font, size, and line spacing is unchangeable in the post editor

Describe the solution you'd like

• a post description editor

Additional context

• CkEditor is recommended
  • React component https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html

Development

• decide what rich text editor to use

  • https://artisansweb.net/top-free-rich-text-editor-web-application/
  • https://blog.hubspot.com/website/best-wysiwyg-html-editor?hubs_content=blog.hubspot.com%2Fwebsite%2Fbest-wysiwyg-html-editor&hubs_content-cta=free%20WYSIWYG%20editors
  • on both recommendation lists, CkEditor highly rated
    • but can't import or export a word-like document for free
    • so #17 impossible

• decide which CKEditor 5 build to use

  • feature comparison: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#list-of-plugins-included-in-the-ckeditor-5-predefined-builds
  • Superbuild has the most features but "should be considered for evaluation purposes and tests rather, than for the production environment"
    • bc of its size
  • Document Editor:
    • similar to native word processor
    • be for documents printed or exported to PDFs later
  • Classic Editor:
    • less features than document editor
    • toolbar with editing area
    • doesnt allow different
    • unlike Document Editor:
      • no FontBackgroundColor, FontColor, FontFamily, FontSize
      • no image resize
      • no indent block
      • no list props
      • no underline
      • no alignment
  • decided to create my own
    • chose Simple upload adapter:
      • An image upload tool. It allows for uploading images to an application running on your server using the XMLHttpRequest API with a minimal editor configuration
      • Only free option mentioned https://stackoverflow.com/a/46773627/13046931

• decide where to store the post description HTML

  • it all gets converted into HTML
  • could possibly use CkEditor's cloud with CkBox
    • free with 1GB storage a month
    • only allows 5 concurrent users tho
  • could just store the html in my MongoDB database as the new description
    • https://stackoverflow.com/questions/34457805/how-to-save-ckeditor-content-in-mysql-database
    • MongoDb Atlas has 512MB to 5GB of storage in its free tier

• figure out how to render HTML stored in a JS object

  • have to use "dangerouslySetInnerHTML"?
    • this invites a cross-site scripting atk
    • also couldn't get it work anyways
      • was previewing the wrong page
  • could use react parser component to strip out malicious code
    • react-html-parser isn't supported for React 17
    • html-react-parser is susceptible to cross site scripting attacks
      • so will use this in conjunction with sanitize-html package
      • if unncessary html is stripped out, should try just using html sanitization package without parsing package
  • instead used a module specifically for sanitizing html
    • smaller than sanitize-html package
    • called dompurify
    • https://www.npmjs.com/package/dompurify
    • more popular too
  • should only sanitize HTML right before rendering it
    • not before storing it in DB
    • so need to sanitize in post page and singlePostPage

• integrate CkEditor as post description editor on Write page

  • made same txt color + font size as single post page so better indication of how it'll appear

• integrate CkEditor as post description editor on Single Post page w/ Edit

• fix rendering uploaded tables not working properly or get rid of them as an option

  • possibly caused by data sanitation module
  • seem to be rendering fine now

• store images uploaded to CkEditor + ret their urls

  • should they be stored in the same spot as the profile pic + post images?
  • someone did the same with .NET https://stackoverflow.com/a/58164649/13046931
  • copying the images from another source seems to display alright
    • since src url of image accessed upon render
  • need to change file upload api method to return the url that the file can be accessed at
    • fairly hardcoded for now
    • did so
  • tried reusing same file upload method with alteration
    • didn't work w/ Simple Upload Adapter bc form data not submitted in the same form
    • only file uploaded, not filename
    • and file uploaded with "upload" key, not file key
    • so, tried downloading current version of simple upload adapter
      • added the filename and "file" key
      • didn't work bc "Uncaught CKEditorError: ckeditor-duplicated-modules
        Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules"
      • not supposed to use plugins with a non-source code build
      • but I built mine custom? i guess it doesnt matter
      • even removing the simple upload adapter package from the ckeditor custom build didnt work
      • would have to build entire ckeditor from src and import all the plugins and toolbar icons
  • when i use a proxy to upload the file, no problem
    • but using the full url results in a CORS auth error
    • possible issue for w/ deploying
  • started building my own file upload adapter but seemed pretty extensive
    • if creating a new file upload api method specifically for ckeditor doesnt work, will do this instead
    • got stuck in a problem with CkEditor being null so had to rollback to a previous package version
    • "The "path" argument must be of type string. Received undefined" w/ trying to upload the file via the "upload" key
  • ended up creating my own using https://www.youtube.com/watch?v=nL2KVcKa5ug as a reference
    • since made a plugin, had to refresh the page to reload ckeditor every change

• resize user input images dynamically

  • messes up content display on home page if image too large
    • was able to strip out img tags
    • added "{FORBID_TAGS: ['img']}" as an arg to DOMPurify's sanitize()
  • could look into how resizing was done for title image of posts
    • bc also a problem on single post page
    • fixed problem through applying a general img css style of default img
      • width == 100%
      • and obj_fit to cover

• only preview first 4 lines of paragraph tag

  • so, unnecessary to display images during preview anyways
  • adding "{ALLOWED_TAGS: ['p']}" strictly only allows paragraph tag
    • strips header tags but leaves their contents
    • had to add "KEEP_CONTENT: false" option to strip removed tags contents
    • this also remove p tag text so had to also allow '#text'
  • now just need to strip out all paragraph tags containing purely whitespace
    • could strip out any and all whitespace
  • for now, decided to strip out all html for a standardized presentation format

• fix font size not working

  • possibly clashing with allocated headers + paragraphs?
  • doesnt work in singlepost
    • but has same "text-size" tag still attached
    • but font size defined under ".ck-content .text-tiny" css
  • "The CSS definition for the classes (presets) must be included in the web page styles where the edited content is rendered."
  • "You can enable support for all font sizes by using the config.fontSize.supportAllValues option."
    • by default, "all font-size values that are not specified in the config.fontSize.options are stripped"
    • "preserve pasted font size values by switching the supportAllValues option to true"
    • to preserve pasted font size tho, numerical pixel values needa be used
      • better to use presents and "em" units to size headings and paragraphs approply
      • rather than a one size-fits all type of deal
      • but that's how regular document editors do it
      • libreoffice uses point (pt) unit
  • so used CSS presets
    • they recommend namespacing by prefacing with ".ck-content"
    • but didnt seem necessary
    • and would require the use of that class wherever html from ckeditor imported to

• fix media upload button

  • inserts video preview into text area alright, but isn't displayed after publishing
  • verify this issue isn't caused by data sanitation module
    • it isn't
    • but it is stripping out the oembed tag and url
  • should use the same upload adapter mocked up for images?
  • when try pasting youtube url, get a CORS error
    • also prohibits youtube post request
  • "media embed feature lets you insert embeddable media such as YouTube or Vimeo videos and tweets into your rich text content"
  • concerning non-previewable media, "the media embed feature is often not able to request those services due to same-origin policy."
    • can be overcome with proxy services like iframely or embedly
  • allowed oembed tag and url attribute thru the data sanitizer bc it was throwing them out
    • should undo this if not needed once proxy service setup
  • was able to get ckeditor to render the media thru its data
    • but only works for previewable media
    • would need to use a proxy service for non-previewable media like facebook + insta and other posts
  • Names of providers with previews:
    • 'dailymotion',
    • 'spotify',
    • 'youtube',
    • 'vimeo'.
  • Names of providers without previews:
    • 'instagram',
    • 'twitter',
    • 'googleMaps',
    • 'flickr',
    • 'facebook'.
    • could potentially just remove these media providers
      • did so for now
  • removed bypasses to sanitization and previews still rendered
    • so for now, oembed tag and url attr not let thru
  • could only verify it works for Youtube
    • after allowing iframe thru the data sanitizer and its attributes

• style the editor

  • textarea background should be transparent
    • gives better impression of what it'll look like once published

• shift post description down once published

  • since toolbar takes up that space when editing

• change the editor's width depending on screen width

  • controlled via ckeditor builtin CSS class additional fields added
  • used view-widwth and view-height units, but not all browsers support this

• switch to different type of editor or shift toolbar down

  • when scrolling down, editor sticks to the top of the screen
    • covers topbar which is bad
    • could change to "balloon block" editor
    • balloon editor is similar to what Medium uses
  • set css class to move the sticky toolbar down to avoid it covering the topbar

• figure out why styles dropdown is empty

  • have to manually add own styles
  • some defaults mentioned
  • https://ckeditor.com/docs/ckeditor5/latest/features/style.html

• allow html in post preview description

  • will likely need to strip out white space from cleaned html
  • did this thru stripping out whitespace lines using regex

• remove all unused component from custom ckeditor

  • watchdog
  • simple upload editor
  • styles
  • custom html insertion
  • etc.
  • cant use destructor import
  • had to use "import Editor from 'ckeditor5-custom-build/build/ckeditor';" this time
  • could do a wrapping toolbar
    • but since not explicitly stating where every icon goes
    • dont have as much control over where it wraps
    • also would take up alota extra space in mobile + tablet view

• allow for resizing of media iframe in ckeditor

  • may possibly need to use a diff preview format like that presented by iframely
  • feature request for this ckeditor/ckeditor5#6593 (comment)
    • so may not be possible rn
    • implementation question asked
  • allegedly, it can be accomplished through embedding a YouTube video into a table
    • verified thru using a single celled table
    • not sure how but could put a media embed into a single cell table every time inserted
  • found a variety of extra modules and work arounds on drupal
    • but have no idea how to apply them
  • another way would be to allow creators to edit the iframe html width and height

• look into implementing various toolbars

  • they're installed but not used (i think)
  • such as media and image toolbars

• turn toolbar into 2 layers, hiding the overflow

• Add word and character count

  • module already installed

• destroy images upon removal from ckeditor 5

  • currently just left in the db to take up space

• more securely embed iframes

  • only allow them in a certain insertion context like how the embed media structures them
  • could potentially use hooks during 'onsantize' event https://github.com/cure53/DOMPurify#hooks
    • tried using a hook to erase an iframe's src if it wasn't formatted properly
      • if do this, can't let user insert custom html into ckeditor
      • but custom html insertion would also get caught by the data santizer too i think
    • there's gotta be a better way to vet an iframe tho

• allow for non-previewable media providers thru iframely or another proxy service

  • should be implemented if deemed necessary
  • may need to let oembed tag and url attr thru the data sanitizer again to do so
    • // extend the existing array of allowed tags and attributes
    • const sanitizeConfig = { ADD_TAGS: ['oembed'], ADD_ATTR: ['url'] };

• add styles to styles dropdown

  • i've never actually used the styles dropdown in normal text editors
  • so, this is deemed unnecessary for now

• allow imported text to use their predefined font size

  • would have to change to using pixels units instead of em

• re-add watchdog editor to ckeditor

  • can restore editor with previous state if crashes
  • https://ckeditor.com/docs/ckeditor5/latest/features/watchdog.html
  • seems like unnecessary overhead and complexity for now

[ENHANCEMENT] Allow users to link their common social media

Is your feature request related to a problem? Please describe.

• Yes, user's have social media icons but no way to change their destinations

Describe the solution you'd like

• Add several more fields to user model for social media urls

Development

• Add several more fields to user model for social media urls
• Link the urls to the social media icons under player profile sidebar
• Link the urls to the social media icons of logged in player in topbar
  • used link component, but that links to website links, not external ones
    • changed html "Link" to an "a" tag then "to" to "href"
• Don't show social media icons in topbar/sidebar if that url isn't provided
  • easier to make changes to both social media icons in top + side bars w/ 1 comp rendering both
• Don't show Follow At section in sidebar if no social media icons provided
  • created a new var to indicate whether any links set
• Add places to add social media links when updating user on settings page
  • had to use state vars like for bio
  • also had to add to updated user

[ENHANCEMENT] Add an About page

Is your feature request related to a problem? Please describe.

• Yes, people don't know where to file issues or who to contact for support

Describe the solution you'd like

• A short blurb about what Book Club is
• A link to the issues page on Github
• My email address for support

Describe alternatives you've considered

• Not including an about page

Additional context

• should be fairly minimal

Development

• Link in topbar to about page
• Construct about page to include:
  • A short blurb about what Book Club is
  • A link to the issues page on Github
  • Made the links icons so more aesthetically pleasing
    • used font awesome
  • gave the page a local image as bg
  • made all links open to new tabs/windows
    • did so for social media links too

[ENHANCEMENT] Implement Consistency Score

Is your feature request related to a problem? Please describe.

• Yes, a key feature of a reputation system is how it factors in consistency.

Describe the solution you'd like

• Implement Consistency Score described in #42:
  • determine user consistency thru:
    - hiding post + comment + user reputation badge and scores
    - telling user to cast enough fresh votes to earn a consistency score
    - and the privilege to view rep badges + scores again
    - scoreable vote = vote cast on a post/comment w/ rep != 0
    - each scoreable vote takes up 10% of user's consistency score
    - each vote is given 0-10% based on if post/comment:
    - scored >= 500, 10%
    - scored >= 100, 8%
    - score >= 50, 6%
    - score >= 10, 4%
    - score >= 1, 2%
    - score isn't in the same direction as the vote cast, 0%
    • can display consistency score as separate modifier on user sidebar
      • could be a three part color bar of red if < 33%, yellow if 33% < consistency score < 66%, or green if > 66%
      • would be filled dependent on what percentage display
      • would display the percentage too
      • tooltip would tell of its issue date and that it was the consistency score
    • every act created with isTesting: true so cant see rep scores or badges anymore
      • would have to dissallow guests this privilege too if want it more fool proof
      • if isTesting, sidebar displays a tip to vote enough to see post+comment+user scorings and get a consistency score
    • everytime isTesting is set back to false, a random interval would be generated tween 7-14 days of elapsed time
      • w/ user logs in, would check if consistency interval has run out since the consistency score issue time
        • if so, isTesting set true and not falsified till enough scoreable posts voted on
        • if so, consistency score would be wiped and set to 0
      • once enough votes given, isTesting = false, new randomized grace period given, and consistency score timestamp would be updated
    • could enable and disable consistency scoring at will via user settings page
      • should be checkbox and have tooltip telling of what it is via a question mark
    • so, each vote while isTesting = true should update user model w/ new consistency score and number of test vote
      • once test vote count reaches interval of 10, isTesting = false and
    • so, consistency score setup would require fields:
      • useConsistencyScoring
      • isTesting
      • consistencyScore
      • consistencyGracePeriod
      • consistencyScoreCreatedAt
      • scoreableVotesCast
      • Some could be put into a new "consistencyScoring" model
      • Or could keep in user model
    • should add isTesting to jwt for server and client side auth
      • could only update consistency scoring related fields if isTesting true
      • could decode jwt client side to make sure testing users cant see any rep icons or scores
        • but they'd still be able to see them via API responses contained within their respective models

Additional context

• Should be followed up by an ML model
  • to alter the number of votes taken on a per user and global baseline basis
  • described in #42

Development

• • ...

[BUG] Find out why and fix the api categories proxy error

Describe the bug

• api categories proxy error

To Reproduce
Steps to reproduce the behavior:

1. startup api
2. startup client
3. shutdown api
4. notice the error occur

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• Figure out why it throws:
  • "Proxy error: Could not proxy request /categories from localhost:3000 to http://localhost:5000/api/."
  • "See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED)."
  • Only happens when api goes offline, so it's of no concern

[ENHANCEMENT] Add an admin account

Is your feature request related to a problem? Please describe.

• Yes, there should be some features available for maintenance and additional not available to regular users

Describe the solution you'd like

• Add an admin account that can create new categories, and do other things

Describe alternatives you've considered

• these things could be added as needed manually thru mongoDB Atlas interface

Additional context

• could be implemented through manual change to user model using a "isAdmin" boolean field
  • then use this field to differentiate between logged in users + logged in admin users

Development

• manual change to user model using an "isAdmin" boolean field

  • not done during #19
  • implemented now

• manually make an account an admin

  • password should be very strong
  • done during #19
  • impls server side auth thru JWT since isAdmin field held within JWT and it's decoded by verify method

• let them delete or update any post

  • isAdmin not properly set within jwt
    • possibly bc isAdmin init'd to a boolean?
    • change to user model had not been impl'd yet

• let them update any comment

  • comment deletion not yet implemented

• let them delete any user

  • linked btn on sidebar
  • ensured jwt auth'd to check isAdmin

• let them delete comments

  • proposed in #34 for author too
  • root comment deletion works properly
  • when try to delete a reply comment, deletes it but doesnt rm it from root comment's replies arr
    • would be easier if every reply comment had a "rootComment" field
    • wouldn't have to follow the chain of replyId's
    • did alota this rework in #38
  • used the pull operation to rm the subdocument from the root comment
  • verified it worked on all manner of comment types by author and admin

• let them delete categories

  • would also needa delete the category from the posts it's linked under if any?

• create + let them access admin dashboard

  • but should only be accessible by admins
  • all admin privileges and responsibilities should be consolidated here
    • such as all posts or comments that've been flagged
    • and fake data insertion/deletion

• allow admin to remove all flags from a post/comment

  • requires #47

• could allow them access to running fake data insertion and deletion script via a form

  • not sure how to link cmd line script to frontend tho

[BUG] username, email, and password fields can be left empty when updating user settings

Describe the bug

• username, email, and password fields can be left empty when updating user settings

To Reproduce
Steps to reproduce the behavior:

1. login to an account
2. go to settings page
3. upload a new profile picture
4. leave every other field empty
5. notice how u can't log back into act + their fields are empty in database

Expected behavior

• require correct password to update user settings
• auto-fill username, email, and profile picture
• allow password reset via email

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• require username and email in settings form submission

• require correct password to update user settings

  • upon submission need to:
    • try and get a user using the user's username/id before change
  • safer to not return hashed password to client side likely
    • so, during the user update, use passed in password for validation rather than to update
  • told user when settings updating failed

• auto-fill username + email, like profile picture

  • used state vars
  • had to init them using useEffect() w/ either getUser() api call or context user
    • used api call but context user prolly woulda been faster

• required retyping of password for confirmation w/ registering

• set minimum security requirements on password validation w/ registering

  • installed a pakage off npm
  • https://www.npmjs.com/package/react-password-checklist?activeTab=readme
  • very helpful and also work in confirming password
  • just had to disable submission btn under valid
  • also change registration API so threw more specific error msgs
    • so they could be shown on frontend

• update vote author username when username changed

  • simple to do

• update comment username & reply username & comment username in root comment replies w/ username changed or disable username update

  • disabled username update
  • possible but annoyingly complex
  • not unheard of to not allow username changing too

[ENHANCEMENT] Add dynamic user bio

Is your feature request related to a problem? Please describe.

• Yes, users can't set/update their bio

Describe the solution you'd like

• User model should be changed to include a bio + UI to should be added to update the bio in settings + add it at registration time

Describe alternatives you've considered

• bio at registration time not required since not typical

Development

• update user model

  • simple to add bio field

• show user pic and bio in sidebar comp

  • had to query user context info with ? after just incase on homepage + nobody logged in

• allow bio setting/update in user settings page

  • used a corresponding bio state var
  • also added bio to user update payload
  • had to init bio state var using useEffect()

[ENHANCEMENT] Registration Page Improvements

Is your feature request related to a problem? Please describe.

• Yes, the registration page lacks some basic functionality + info wrt username

Additional context

• ...

Development

• notify user on registration page that username can't be changed once set

  • ...

• search db everytime username changes to verify whether username is unique or not

  • currently only know after submission rejected

• require user to agree to terms of service

  • will allow for flagging if violated

[ENHANCEMENT] Add Security Mechanisms to Image Upload and Deletion

Is your feature request related to a problem? Please describe.

• Yes, image upload and deletion doesn't require credentials

Describe the solution you'd like

• Verify user via jwt before allow image upload or deletion

Additional context

• need to research about CSRF protection regarding image upload

Development

• implement security mechanisms like authentication and CSRF protection when image uploaded through Ckeditor

  • ...

• gate post title image upload and deletion via jwt

  • should just be able to pass in middlewares as a list of functs
    • https://stackoverflow.com/questions/31928417/chaining-multiple-pieces-of-middleware-for-specific-route-in-expressjs
  • not sure how to access decoded jwt in image upload middleware beofore file upload tho

[BUG] Fix search by post categories

Describe the bug

• searching via post category ends in failure and the wrong/no query

To Reproduce
Steps to reproduce the behavior:

1. Make a post and add any number of categories
2. Go to the home page
3. Select one of the categories
4. Notice how no query and fails

Expected behavior

• should query posts by that category

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• figure out why url is wrong
  • constructed query wrong with link tag initially
• fix still not querying by cat correctly
  • categories must be replaced with "categories.name" to delve into an array object's fields

[ENHANCEMENT] Hide models instead of deleting them

Is your feature request related to a problem? Please describe.

• yes, this would solve #45

Describe the solution you'd like

• Hide models instead of deleting them

Additional context

• could only allow admins to fully delete things

Development

• • ...

[ENHANCEMENT] Use Jason Web Token (JWT) for verification

Is your feature request related to a problem? Please describe.

• Yes, user access should be more secure

Describe the solution you'd like

• Use Jason Web Token (JWT) for verification instead of userid

Describe alternatives you've considered

• Keeping the api as-is

Additional context

• useful tutorial: https://www.youtube.com/watch?v=Yh5Lil03tpI

Development

• watch and take notes JWT

  • https://www.youtube.com/watch?v=Yh5Lil03tpI
    • need client side storage for Context API
    • can auth user connection to API via Session Cookie
      • session stored on server
        • problematic if several servers used for an app
    • can auth user performance of particular actions via JWT
      • JWT consists of headers, user payload info, and verification signature
    • JWT stored by user
    • JWT can be reused for diff servers
    • impl'd rest on my own personal project below
      • way he implemented token refresh didn't work for me
      • since every rerender triggered the addition of another request middleware method

• impl JWT for deletion + updating

  • Currently, can change user username since stored on client side in local storage
    • would allow another user to delete anyone's post/comment since auth's thru username compare
  • Created new JWT everytime user logs in and rets it to them
    • includes important user info in JWT like user id and whether they're the admin
  • JWT sent as an Authorization header
  • For some reason, included "Bearer " before jwt value
  • since access and refresh token not stored in db besides refreshtoken in user's arr
    • have to combine updated user ret'd from db with local user to keep local tokens
  • Attached "verify" middleware to post, comment, and vote updating and deletion
    • no vote deletion currently
    • comment deletion can't be reached from frontend yet
    • should verify these
  • added token fresh API method
    • send a refresh token and if it's verified as urs
    • it's rm'd from ur db arr and a new one's added
    • rets new response token and new access token
  • added username to jwt for easier auth w/ can't use just id
    • decreases # of db retrieval calls this way
  • was trying to use AXIOS middleware to add headers during applicable api calls
    • tried to refresh the access token w/ it'd expired too
    • but api call made to refresh token called axios middleware again + inf looped
    • so, stopped invoking headers on axios post calls
  • axios middleware kept being double invoked every API call
    • changed config auth header to only be set w/ access token updated but that didn't help
    • only thing that solved it was changing to no longer use StrictMode
    • but now also being double-invoked if page not refreshed after first submission attempt
  • user via context api isn't getting their accessToken properly updated
    • possibly bc of placement in root component?
  • scrapped axios middleware and just imported retrieval of axios headers everytime they're needed
    • only had to update local tokens w/ updating user
    • would retrieve a new refresh + access token if needed

• fix wrong accessToken being sent as auth header occasionally

  • possibly bc of how auth header configed globally
  • page refresh usually solves problem
  • stopped using axios middleware which solved this

• shorten token expire to 5-15s before push to prod

  • added an env var to indicate whether in DEV or PROD
    • in DEV, tokens take 15 mins to expire
    • in PROD, tokens take 5s to expire
  • verified dev issued jwt using https://jwt.io/
  • Will need to change ENV var

• check users jwt to enable post, comment, and vote posting

  • didn't do so for category & badge posting bc models don't have any user data storage
    • they don't necessarily require auth
  • ensured new tokens were propogated to updated user
    • untested but similar to previous changes

[BUG] Comment related bugs

Describe the bug

• Can't reply to comment replies

To Reproduce
Steps to reproduce the behavior:

1. Create a post
2. Comment on the post
3. reply to the comment
4. reply to the reply comment
5. notice how the final comment acts as a root comment

Expected behavior

• reply to reply comment should mention comment replying to's username and be ordered beneath it

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Additional Information

• only verified to occur with test data generated comments

Development

• fix pre-voted on comments sometimes not retaining proper score after refresh

  • seemingly only happens when vote on ur own comment?
    • wrong
  • only happens to when vote on non-root comment
    • regardless of whether fake generated or own comment
    • but proper score and badge color alloc'd locally
  • tried updating the proper comment held within a root comments replies too
    • but sometimes doesn't update at all
    • and other times does
    • seems to fail on initial vote post, but not on post update
      • fixed thru discovering vote post used a string linkedId instead of an ObjectID
      • so converted it to objectID at top of api method
    • doesn't seem very optimized
    • but atleast all post comments not deleted with post
      • is that a good thing?
      • maybe

• verify whether problem occurs with non-faked comments too

  • it doesnt

• ensure fake comments generated properly + the same as real ones

  • reply comments are incorrectly added to the root comment's replies arr before being posted to DB
    • so the reply comments retrieved from replies have no ObjectId
  • also leads to key being undefined resulting in unique key error
  • should be self contained
    • so comments should be created that reference non-fake posts
  • so, forced to post all newly created comment before creating replies or replies to their replies
  • solving this solved all the below probs

• reply to reply comment should mention comment replying to's username and be ordered beneath it

  • the replyId field is empty when reply to fake reply comment

• fix can't upvote or downvote reply comments

• fix replying to a reply comment may render multiple response boxes

• fix editing a reply comment not changing the root comment's reply arr

  • every time comment posted, if it was a reply I added its root comment id to the comment model
    • didn't require the field to be passed to api, found it out through derivation
    • would prolly be more efficient to pass to it
    • but this way, less changes in how frontend works w/ comment
    • and the backend logic was already there
  • allowed for easy linkage to update the root comment during comment update and deletion
    • needa figure out to remove an element from an array for deletion
    • verified client-side comment editing of a root and reply comment works
  • bc of how rootCommentId now being used on API endpoints, had to change how fake comments generated
    • their reply comment id's are needed before adding them to the root comments, so they must be inserted first
    • but they must be inserted with knowledge of who their root comment is
    • was able to see if comment being replied to was replying to another comment
      • took that to be rootComment since only 2 layers of comment depth in fake comment generation
      • then just added that id to the fake reply comment's root comment id field
      • had to also check if replyId is empty, bc if so comment depth only 1 not 2, so replyComment is root comment
    • tested thru removing all fake posts and creating 10 new ones
      • then used admin act to edit a reply comment
    • need to verify that Vote route's updateLinkedModel() still works if it's updating a comment
      • method triggers whenever a vote is cast
      • certain branches only followed if a new badge is given
        • but nothing located there was changed so shouldnt needa test that
      • tested by voting on a root, reply, and reply to a reply comment
        • ensured comment score dynamically and permanently changed
        • didn't work for a root comment reply
          • but still allowed vote to be cast, just didn't affect rep permanently
        • changed local comment to being updated everytime vote, not just w/ a badgeName present
          • bc needa propogate rep change

• fix bypassing of vote rep restriction

  • had to gate updating with same restrictions as vote posting
    • bc could post an upvote, then update it to a downvote even if dont have high enough rep for downvote
    • created a new middleware for this purpose
    • easier to return a response from middleware than inner funct bc would need to propogate it back out

[BUG] Right after login, the next couple links selected fail

Describe the bug

• Right after login, the next couple links selected fail

To Reproduce
Steps to reproduce the behavior:

1. login to an account
2. click on a post title
3. notice how nothing renders in the browser

Expected behavior

• the requested page should show up

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Development

• find out why the problem occurs + fix it

  • console shows: "No routes matched location "/login/singlePostPage/63d352d6f9e8def9a42d905a""
  • seems to only happen right after user login
  • due to how navigating from login -> home page doesnt get rid of "login" in url
    • so further url navigating gets messed up
    • fixed thru replacing the home page in the url after successful login

• fix choppy window.location.replace() transition

  • using "window.location.replace()" results in very choppy transition
    • couldn't figure out how to do otherwise tho
    • clicking on a "Link" element is much cleaner
    • tried using window.location.assign() but still just as slow
    • also tried window.open() with the same result
  • could potentially try useNavigate() and navigate()
    • this fixed choppy problem
    • and still allows for single back arrow reversal of navigation

[BUG] Picture Upload Resets Darkmode Slider

Describe the bug

• Picture Upload Resets Darkmode Slider

To Reproduce
Steps to reproduce the behavior:

1. Turn on light mode
2. Create a post without a picture
3. Edit it and add a picture
4. Update the post
5. notice how the screen refreshes and dark mode re-enables

Expected behavior

• the page shouldnt refresh or reset darkmode slider

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 109.0 (64-bit)

Additional context

• previous problems with picture deletion and insertion in another issue

Development

• • ...

[ENHANCEMENT] Implement search capabilities

Is your feature request related to a problem? Please describe.

• Yes, posts can't be queried by a trivial keyword

Describe the solution you'd like

• Search bar in the topbar

Additional context

• About and Contact sections could be removed to make room for it
• should be able to search by:
  • exact match of username
  • substring of post title
  • exact match of category
  • substring of description contents

Development

• research search bar using MongoDB

  • seems to be a MongoDB Atlas specific search functionality
  • includes autocomplete
    • likely out of scope for custom implementation so this would be great
  • "App Services are free until you exceed the free tier."
    • so it's possible these will start being accrued once the website is deployed?

• research installable modules to easily configure

  • https://www.youtube.com/watch?v=jnxnhbTO2RA
  • "Atlas Search Index"
    • "The Visual Editor does not currently support custom analyzers"
    • "Atlas Search indexes cannot be created for time series collections"
      • so can't query by creation or update date?
    • config methods:
      • Visual Editor = guided experience
        • tried this first
      • JSON editor = edit raw index definition
      • Can also create, edit, mng Atlas Search index using Atlas API
    • specific to a db + collection
    • index configs:
      • index analyzer = creates searchable terms from data to be index
      • search analyzer = parse $search queries into searchable terms
      • dynamic mapping = auto index common data types in collection
      • field mappings = def data types + input params for specific fields
        • not impl'd
      • stored src fields = makes all data available for lookup on search
        • not impl'd
      • synonyms mappings = enables def'd syn matching for like terms
        • not impl'd
    • ran $search query on and rets docs from highest to lowest score
      • score based on relevance
      • can add a $project to return documents with their rated score
      • uses the Lucene scoring alg
      • can export search query syntax to diff langs
        • allegedly
    • normally uses * path to search across any field in document
  • Indexes talked ab in LinkedIn Quiz

• investigate default Atlas Search Index config capabilities

  • Only does exact searching by default
    • no synonym or substring searching
    • but does match entire words in description
      • so it seems to do a form of substring matching thru entire words
    • can turn on "fuzzy searching" to allow + try and account for mispellings or shortened words
      • just used the defaults w/o any additional params

• implement API method

  • had to implement pagination since could be returning alot of posts
  • ended up combining it into the post retrieval method called by a search param changes

• link frontend to API

  • need to communicate search results + pagination from topbar -> homepage -> posts
  • running into issues with pagination
    • bc pagination changes page query param
    • but the method that's run to retrieve the posts after pagination btn clicked isn't the topbar search method
    • but search bar doesnt navigate to search url
    • and when it was forced to, the posts were reloaded and overwritten
      • bc auto-fetched posts matching new url query params
      • but didn't use Search bar functionality to do so
      • which resultant in erroneous results
  • once search functionality combo'd into the other get posts method
    • just had to add search param to url

• implement dynamic search bar

  • when click search icon, search box should appear in the middle of topbar
  • closes everytime unfocussed
    • called "onBlur" for some reason
  • focus on it everytime opened
  • had trouble centering search bar since it was displayed w/ diff widths and absolutely
  • had to use onMouseDown() bc onClick() doesnt run before onBlur()

• force scrolled user to top of page everytime search or page number changed

  • was able to use window scroll funct call

• impl autocomplete functionality

  • Had to create a new index for this
  • also needed a new api method to use the new pipeline variant
  • interfaced w/ pipeline from frontend everytime searchterm changed
    • then display returned results beneath searchbar
    • need to line up returned results with searchbar tho

• return and display scoring of search alg on each displayed post