fearlesstech / reentry Goto Github PK

Describe the bug
The PostModal that appears when you click start a post is ugly and has an outdated look.

Expected behavior
Please, update the css to make the postModal more modern looking and blend with the current style of the site.

File path: src/components/RightSide/RightSide.jsx
This file needs to be rewritten to show real news articles relevent to reentry success in maine. The articles publishing date needs to start on the day the link was posted and number of readers needs to reflect the sites users.

If you see something on this page you would like to work on, drop a comment here and I will make the issue and assign you to it.

The video upload is not rendering when you post a mp4. The file is being stored to the database but not displaying in the post box on main.jsx

i'll like to Join this comunity and contribute to this open source projecr, am a Javascript Web developer, Kindly assign some issues to me @4-Leafs-Code

Description

When landing page opens, several event listeners are added on "mouseover" event. This is done to implement the parallax effect on the birds background. But the event listener(s) are not removed on navigating away from the landing page.
I believe this can be solved by writing a cleanup function which removes the event listeners before the component unmounts.

Steps to recreate the issue:

1. Open landing page (log out if logged in already)
2. While on the landing page, observe the console in dev tools. There will be no error messages.
3. Click on login button while keeping the dev tool open, and move the pointer, you should this this error: "Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')".

Screencap:

File paths:
src/components/Login.jsx

This page will show people in your network. It should show sent pending status and received request accept or deny. You should also be able to search for a user by name or email.

I'd like this drawer on the left to automatically be open on larger devices and some Margin or padding applied between the drawer and text

From the home screen, when the user clicks start a post, the post modal opens. The post button is grayed out until the user enters a message in the text area or a media file.

The bug is that even if a file is uploaded into the post, the post button is still disabled until a message is wrote in to the text area.

In src/components/PostModal.jsx on lines 120-124

<PostButton
  disabled = {!editorText || !FileUploader ? true : false  }     // if editorText or file is empty, 
  onClick = {(event) => postArticle(event)} >                    // disable the button
  Post
</PostButton>

Description, please be as detailed as possible:
When a post has 2 or more likes and 1 like is deleted the likes counter sets to 0 until the page is reloaded. On reload it will display the correct # of likes.

Please correct this so it displays the correct number without reloading the page.

This search bar will need to accept a users input as a keyword and query the database for the keyword.
You will need to make the search results return in a pop up model or make a newpage. This is only a functionality issue and does not require much css but your more then welcome to style your design if you would like.

This should only query for user profiles, resources, and post. The post messages are stored in the articles collection db.collection('articles') I do not have the other collections set up yet but please add html style comments to the top of the readme file with name's you've chosen for for the other collection.

Change the background color the AboutUs divs

Description, please be as detailed as possible:

The fields in the aplication need validators to check for problems before sending data to the database;
This validations can include:

• null or undefined fields;
• fields without valid text (spaces cannot validade);
• Be creative; if you think of something that can be checked, include this;

Some fields that need to be validated:

• Login and Sign-in Forms;
• Posts;
• Comment editions;
• Messages (if page is done);

Tips:

• New comments (see code in src/components/Posts/comments/addComments/index.jsx) already have a basic validation that can be found in the services folder (src/services/validators/messagingValidations);
• All validations should be in the validators folder;

I'm using short circuit validation (example below) but, feel free to use another pattern.

Describe the bug
When you click on a users image on a post, it should redirect you to that users profile.

When the user post a video it is stored in the firestore and returned back to the site to be displayed.

• The bug is that the video is being stored in the database as and image.
• When firebase returns the video to the site as an image, it is not being displayed in the <ReactPlayer> on line 78 of src/components/Main.jsx.
  • The firebase const for the articles collection are in src/actions/index.jsx
• The src/components/PostModal.jsx needs a button that opens users file explorer and allows user to upload video files only.
• Please verify that the video will be stored in the collection as a video.
• Post a video to make sure it is rendering.

Note: .gif are stored an an image
Link for free videos: https://coverr.co/stock-video-footage

Above you'll see what I would like the profile page to look like. Please fill the check list below as much as you are able to and if there are things you are unable to do, do what you can and I'll make a new issue for the rest. Please comment on this post if you would like to be assigned this.

• The profile should be saved in the firebase database per user.
• If the user is viewing their own profile they should see edit buttons for each section.
• User should be able to update their Picture.
• If the user is viewing someone else's profile the edit buttons should be hidden.
• The resource boxes should use the resources.json for the names of each resource the user selects. When the user selects a type of resource, the next level of options should appear until there is not anymore options. The user can choose as many boxes per section as they like.
• There should be an option for the user to select standard profile or Advocates profile.
• If a standard profile the resources section will not be displayed. If an advocate profile then all of the advocates posted resources should be displayed.
• In the post section all of the users post should display up to one line of characters from each of the users post.

Describe the bug
The black line that you will see under the home Icon in the Navbar is only set to the Home Page.

Expected behavior
It needs to move to whatever the active pages icon is.

Additional context
Also, please change the color and post to this issue if there are any further instructions for future pages that have yet to be built.

On the login page if a person clicked the guest button I would like to set up a guest account to browse the resource posted but it should not have access to interact with any features. I have enabled the Anonymous sign in method in firebase.

I'd like to update all firebase cade to version 9. We are currently running [email protected]. Firebase 9 is easier to understand, write, and debug. If a collaborator is good with version 9, please help.

src/components/Posts/PostModal.jsx needs a delete button that only displays to the owner of the post and after a accepting a confirmation popup the post is deleted from the firestore database.

Description, please be as detailed as possible:
I'm working in a way of save the post images in localstorage to avoid

Steps to recreate the issue:
to avoid too much usage in firebase; for the first time i have to download the image programmatically but i am getting CORS errors as i have to configure the rules using gsutil; I intend to set this up another day when I have more patience, but I'll leave this issue in case anyone wants to venture out.

cors configuration;

   async function generateUrl(url, callback) {
     const xhr = new XMLHttpRequest();
     xhr.onload = () => {
       var reader = new FileReader();
       reader.onloadend = () => {
         callback(reader.result);
       };
       reader.readAsDataURL(xhr.response);
     };
     xhr.open("GET", url);
     xhr.responseType = "blob";
     xhr.send();
   }

   function setArticleImages(article) {
     const urlList = [];
     // article.forEach((article) => {
     // if (article.sharedImg) {
     // (async() => {
     // const file = await generateUrl(article.sharedImg, () => {

     // });
     // console.log(file);
     // })();
     // }
     // });
     return true;
   }

This is the section where the request is made, the function must be able to store the blob, which will be read by the FileReader and later saved in localstorage with a uid of the image as the key. (currently the images are being generated with the original name, this should be changed so that all post media have their uid as fileName).

Also, There are other ways to do this, like loading the image in the img tag the first time and then generating the blob.

The post is only displaying media. the postArticleAPI needs to be rewritten to display text only post as well.

The Post modal is out of date looking. It needs the css upgraded

i'll like to Join this comunity and contribute to this open source projecr, am a Javascript Web developer, Kindly assign some issues to me @4-Leafs-Code

Will one of you please set up the auth for the Facebook, Twitter, and Microsoft providers? I can not go to these pages developer sites to get the information to link the site. It's no hurry, this is not a priority, I just can't do it.

For my non english-speaking friends: I've copied and pasted below from the post above for your browsers to translate.

Step1: When a user clicks the comment button it should extend the length of the post and display a text box for a new comment input. The comment button should be disabled while the text box is empty. You can find a similar code by looking at the post modal Post button.

Step 2: The firebase snapshot will need to be updated with each added, edited, or removed comment.

Step 3: The user should be able to right click on any of their personal post or comments (even on other users post) to edit or delete it. The user should be able to delete other users comments from the users personal post but the user can not delete other users post or other users comments from other users post.

If you would like to work on one of these steps, please leave a comment below with your choice of steps and I will assign this issue to you. Thank you for contributing and helping me get this site launched sooner because the sooner launched, the sooner our work will start improving prisoner reentry.

Will someone close this security advisory. I've been trying and I can not figure it out.

In the left side div the user should be able to:

• Search for resources
• Post a resource (this will open the postResource modal)
• View there resources (I forgot to add this in the figma)
• Click on a popular query button to query the database for these resources

In the right side div the query results should display as cards. Before the user query's a choice this should display the most recent
resources posted and please make this div a hidden scroll instead of the entire page scrolling. If you would like to pick up this issue please comment below and a member of FearlessTech will assign you this issue.

The colors of the welcome screens nave need to be changed to the emerald color were updating the color schema to but I can not find where this blue is assigned.

This whole folder needs to be rewrote
Resource.jsx to be moved to the components folder and the return needs to be configured into something like this:

return (
    <styleContainer className="resource">         == <Resource>
      <div className="resource_left">                  == <ResourceLeft>

resource.css needs to me reformatted into stylesResource.jsx and stored in the src/styles folder

.resource {                     == const Resource = styled.div`
    ...                                             ...
  }                                           `;
  
  .resource_left {             == const ResourceLeft = styled.div`
   ...                                              ...
}                                              `;

                                           export { Resource, ResourceLeft, };

Then in Resource.jsx:

import { Resource, ResourceLeft, } from "../styles/Resource";

Plus the popup.jsx and popup.css needs to be converted into ResourcePopup.jsx and stylesResourcePopup.jsx, moved and rewrote.

It's all yours if you want it but it's a big job.

I'd like to use the following color schema with a light yellow. If you tackel this please let me know what yellow your using.

• The resource should be saved in the firebase database per user.
• If the user is viewing their own resource post they should see edit buttons for each section.
• User should be able to add a organizations image.
• If the user is viewing someone else's resource post modal the edit buttons should be hidden.
• The resource boxes should use the resources.json for the names of each resource the user selects. When the user selects a type of resource, the next level of options should appear until there is not anymore options. The user can choose as many boxes per section as they like.
• The user should be able to edit their resource post as needed and firebase should update with the corrected post

The Likes button on the posted articles need functionality.

If a user clicks on Likes, they should be added to a list so they can not like the post twice. Plus, the firebase snapshot needs to be updated to reflect the current number of likes.

The user's profile is not rendering at the moment. When I rebuilt the navbar, it created a bug. I have not been able to find it yet but if you like bug hunting... also the userSlice.jsx needs to be removed and everything updated to use the userReducer.jsx

On the login page. I would Like to set up the join now button to open a modal where the user can enter there username email and password that they choose for there account on this site

Our project has this error when you go to run the app from the terminal. I found this article: https://stackoverflow.com/questions/70469717/cant-load-a-react-app-after-starting-server

The most voted answer does correct the issue:
In file: node_modules/react-scripts/config/webpackDevServer.config.js change this:

onBeforeSetupMiddleware(devServer) {
    // Keep `evalSourceMapMiddleware`
    // middlewares before `redirectServedPath` otherwise will not have any effect
    // This lets us fetch source contents from webpack for the error overlay
    devServer.app.use(evalSourceMapMiddleware(devServer));

    if (fs.existsSync(paths.proxySetup)) {
    // This registers user provided middleware for proxy reasons
    require(paths.proxySetup)(devServer.app);
    }
},
onAfterSetupMiddleware(devServer) {
    // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
    devServer.app.use(redirectServedPath(paths.publicUrlOrPath));

    // This service worker file is effectively a 'no-op' that will reset any
    // previous service worker registered for the same host:port combination.
    // We do this in development to avoid hitting the production cache if
    // it used the same host and port.
    // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
    devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},

to this:

setupMiddlewares: (middlewares, devServer) => {
    if (!devServer) {
        throw new Error('webpack-dev-server is not defined')
    }

    if (fs.existsSync(paths.proxySetup)) {
        require(paths.proxySetup)(devServer.app)
    }

    middlewares.push(
        evalSourceMapMiddleware(devServer),
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
    )

    return middlewares;
},

A user in this article said, "It is not advised to change files in the node_modules folder. Any changes there will be destroyed once dependencies are installed which should be happening on a production build or CI to ensure your deps are "clean" If, and I stress IF there is a need to update node_modules dependencies then the safer solution is to use patch-package. But this should be as limited as possible and when no other solution is possible, the better and longer term solution is to either open a PR with the changes or jump over to an existing PR and subscribe to it to get updates when it is merged."

The issue here is to figur out what solution solves the problem without altering the node_modules.

src/App.js
Line 32:6: React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when any prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

Description, please be as detailed as possible:
There are some bugs on the post deleting functionality, the post deleting should delete the stored file atached to it, also, for some reason some posts doesn't give the delete option.

Steps to recreate the issue:

• get the url of the file
• delete the post
• search the url

src/components/Posts/SinglePost.jsx
Line 58:6: React Hook useEffect has missing dependencies: 'article.likedBy', 'id', and 'user.uid'. Either include them or remove the dependency array

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

The Login and Signup forms need to save a user to firebase and allow them to login if the email is not currently in the users database. We are currently using firebase v8. Extra: Please remove the close button in the upper right corner.

The settings icon on right side of the post navbar should show a dropdown menu when clicked or hovered over. This will be very similar to the code that displays the choices when you hover over more in the top navbar. You can see a dropdown in the image below.
The drop down menu should offer the user 3 choices:

• my post
• my network
• recent post

Extra: The firebase snapshots need to be queried for each choice. If you complete the first part of this issue but can not do this part then I will close the issue and write a new one for this.

Set up src/components/Network/RightBottom.jsx to display other users information. I tryed to set to show signed in user for now but there is a bug. Happy hunting!