Skip to content

Latest commit

 

History

History
155 lines (86 loc) · 12.7 KB

p-cleanup.md

File metadata and controls

155 lines (86 loc) · 12.7 KB

Week 13 — Personal Cleanup

These are the tasks I completed as my own determination to make my app look and work better.

✅ Fixed DynamoDB Direct Messaging Bugs
✅ Fixed SignIn and SignUp Page Errors
✅ Prevented users from Editing the Profiles of other users (Frontend)
✅ Created new python flask endpoint that checks the DynamoDB table if two users have an exisiting message group or not
✅ Better Direct Messaging Flow for Frontend
✅ Created User For GitHub Actions using CloudFormation
✅ Implemented Github Actions to Sync My Cloudfront frontend when I create a PR to `prod` branch
✅ Worked on Replies
✅ Improved Email Confirmation Flow
✅ Display of User Avatar In Profile, Messages, Cruds and Replies

✅ Fixed DynamoDB Direct Messaging Bugs

I noticed in production that after creating a message with another user, it errors out when sending a follow up message. I tried checking if it was a mistake with the DB table name, but it was not.

I then checked my logs from Cloudwatch to see what could be the issue, and I found an error that said I was passing in the wrong data type into the table SK.

The last line has the message Invalid type for parameter Item.sk.S, value: 2023-07-09 19:06:18.153176, type: <class "datetime. datetime'>, valid types: «class'str'>. With that Information I went to my ddb.pyfile, and noticed in the create_message function, my variable created_at was being passed the datatime.now() value which is of type datetime, I had to make sure a string is passed so I added in te .isoformat() method. Noticed that this is also what Andrew Did on his own implementation. Fix Commit

I tested the fix on my Local GitPod Environment, and made a pull request to merge the changes into production.

Messaging Using Gitpod Environment

Messaging In Production

✅ Fixed SignIn and SignUp Page Errors

I fixed the error message for the SignIn and SignUp pages. Fix Commit.

I just passed in the error message as an array because the FormErrors components maps through them, so If any other data type is passed in, it will error out as it is NOT an array.

Previous Error

Error Message After Fix

✅ Prevented users from Editing the Profiles of other users (Frontend)

  • While Updating the Frontend I fixed the Issue making the MessagesIcon to glow when active. Here is the commit
  • In order to prevent this, I did not allow the Edit Profile Button to render If you are not the owner of a profile, instead a Direct Message Icon shows up which takes you to chat with the user. Here is the commit. I had to edit the Profile Heading Component too.
  • I also started working on my Github Actions Workflow. I didnt test it yet, but would debug it a bit later. Here is the commit

Direct Messaging Button For Other Profile

✅ Created new python flask endpoint that checks the DynamoDB table if two users have an exisiting message group or not

For my New Endpoint I created a new service that takes the cognito_user_id of a user and gets all message groups they have, this service is used in the new route where I loop through the messageGroups to find one with the handle is the same as the receiver's user handle, as this is the user you are trying to text, if there is a match that means you and the user already have a message group, the endpoint returns true and the message_group_uuid, if there is no match the endpoint returns false. The Endpoint looks like this /api/messages/exist/<string:receiver_user_handle>.

NOTE: My Method of checking for if two users have a message group is not that efficient as I am querying for ALL message groups of a user, I will plan on studying up DynamoDB Queries to make a better fitting query that will be more efficient, but for the time being this one works well

✅ Better Direct Messaging Flow for Frontend

Lastly I updated the Frontend to Make use of the message_group_exists endpoint, I created a Direct Message Button Component that uses this endpoint to know if to redirect the user to a NEW message group with another user or an already exising one.

Endpoint and Flow In Action

✅ Created User For GitHub Actions using CloudFormation

I used CloudFormation to create a User that will provide Access Keys to my GitHub in order to Sync My frontend using Github Actions. I added Roles to prevent the keys from making any further actions in my AWS account. Here is the commit

TEMPLATE

CFN Changeset

CrdGithubActionsUser CFN Stack

✅ Implemented Github Actions to Sync My Cloudfront frontend when I create a PR to prod branch

This implementation took a lot of time, testing, trials and errors. But I got it working after it all. Here are some Major Changes I made to the previous Workflow Andrew provided.

  • I noticed I had to stack commands on each other to work well, for example If I wanted to cd to a directory and run npm ci in it I had to write the commands together not seperately. do this was my build command cd frontend-react-js && npm ci && npm run build. COMMIT.
  • I disabled ESLINT when building as the warnings given were treated as ERRORS by Github Actions and didnt let the build to pass even when it was alright. COMMIT.
  • I created a new static-build script that was made specifically for Github Actions, as the previous one was made using the PATHS of Gitpod. COMMIT 1 and COMMIT 2. Here is the new Script static-build-prod.
  • Next I needed to pass in env vars to the sync script, I tried running the ./bin.frontend/generate-env script but it was not working. After looking at the docs I found out we can pass the env to the command DOCS. So I hardcoded the needed VARs, COMMIT 1. after this commit I was still having errors and had to change the PATHS of my ENVars, COMMIT 2, this one worked. I also put the SYNC_AUTO_APPROVE VAR to true as we cannot approve to SYNC on github actions.

After these changes the workflow completed running but still had a major error. It only made DELETES to CloudFront instead of Updates and Creates and completely removed the functionality from my Live Site.

Only DELETES

I felt it was a Permissions Issue to the ActionsUser, and had to take a look at the aws_s3_website_sync gem, to see how it works and where the issue might be from. ChatGPT pointed out that it might be deleting only because the script doesnt see any files, so It thinks I have deleted all my files, this made me start checking if it is a PATH issue, maybe I am pointing at the wrong Build File. After making changes to the path it finally started making UPDATES and CREATES, COMMIT. It was all continous Trial and Error to get it working 😎.

CREATES and UPDATES

Final Results

✅ Worked on Replies

  • I worked on the HomePage SQL query to only return actual Cruds not Replies too, I made a little change to the SQL, COMMIT.
  • Made an update to the Reply Endpoint and code, that increases the number of Replies shown on a Crud when a new reply is made, COMMIT. I did this by creating a new SQL file that increases the replies_count value, and I made come changes on the frontend that makes the value to be increased by 1 as the user submits the reply.

✅ Improved Email Confirmation Flow

I improved the flow when users are confirming their account, they don't have to put in their email address after signing up, it is done by react automatically, Confirmation Page Flow Improvement COMMIT.

✅ Display of User Avatar In Profile, Messages, Cruds and Replies

This integration took a while and I had to do a lot of debuging, mostly because of CORS, I had to change the Allowed Origin URL for both the Uplaod Lamdba and the Uplaod S3 Bucket, in order to let requests from my site to be handled.

Updating CORS for Lambda

Updating CORS for S3 Bucket

Lastly I had to make multiple changes on my frontend to display User Avatars in the places they are needed. Here are my commits:

Improved UI

User Avater Redenring in Home Page and Replies