Merge remote-tracking branch 'origin/main'

.github/workflows/ci-cd-pipeline.yaml

@@ -1,8 +1,11 @@
 name: CI/CD Pipeline
 
-on:
+on:  # Trigger events for the workflow
   push:
-    branches: [main, prod-ready]
+    branches: 
+      - main
+      - prod-ready
+
 jobs:
   # Determines the environment to deploy the backend to
   setenv:
@@ -21,6 +24,7 @@ jobs:
           if [[ "${{github.base_ref}}" == "prod-ready" || "${{github.ref}}" == "refs/heads/prod-ready" ]]; then
             echo "env=prod" >> "$GITHUB_OUTPUT"
           fi
+
   # Change detection for filtering jobs
   changes:
     runs-on: ubuntu-latest
@@ -41,6 +45,7 @@ jobs:
               - 'backend/**'
             frontend:
               - 'frontend/**'
+
   frontend:
     defaults:
       run:
@@ -49,22 +54,31 @@ jobs:
       id-token: write
       contents: read
     needs: changes
-    if: ${{needs.changes.outputs.frontend == 'true'}}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm install
+      - run: |
+          if [[ "${{ needs.setenv.outputs.env }}" == "staging" ]]; then
+            echo "REACT_APP_COGNITO_DOMAIN=${{ secrets.REACT_APP_COGNITO_DOMAIN_STAGING }}" >> .env
+            echo "REACT_APP_COGNITO_POOL_ID=${{ secrets.REACT_APP_COGNITO_POOL_ID_STAGING }}" >> .env
+            echo "REACT_APP_COGNITO_CLIENT_ID=${{ secrets.REACT_APP_COGNITO_CLIENT_ID_STAGING }}" >> .env
+          elif [[ "${{ needs.setenv.outputs.env }}" == "prod" ]]; then
+            echo "REACT_APP_COGNITO_DOMAIN=${{ secrets.REACT_APP_COGNITO_DOMAIN_PROD }}" >> .env
+            echo "REACT_APP_COGNITO_POOL_ID=${{ secrets.REACT_APP_COGNITO_POOL_ID_PROD }}" >> .env
+            echo "REACT_APP_COGNITO_CLIENT_ID=${{ secrets.REACT_APP_COGNITO_CLIENT_ID_PROD }}" >> .env
+          fi
       - run: npm run build
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:
           role-to-assume: arn:aws:iam::035306758865:role/gh-short-lived-creds
           aws-region: us-east-1
       - run: aws s3 sync build/ s3://flatini.formulathoughts.com
-      - run: aws cloudfront create-invalidation --distribution-id ${{secrets.DISTRIBUTION_ID}} --paths "/*"
+      - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"
 
   backend:
     needs: [changes, setenv]

.gitignore

@@ -186,7 +186,7 @@ celerybeat-schedule.*
 *.sage.py
 
 # Environments
-.env*
+client/.env*
 .venv
 env/
 venv/

client/background.js

@@ -13,3 +13,13 @@ chrome.runtime.onInstalled.addListener(function (details) {
 chrome.sidePanel
   .setPanelBehavior({ openPanelOnActionClick: true })
   .catch((error) => console.error(error));
+
+chrome.runtime.onMessage.addListener((message, sender) => {
+  // The callback for runtime.onMessage must return falsy if we're not sending a response
+  (async () => {
+    if (message.type === "open_side_panel") {
+      // This will open a tab-specific side panel only on the current tab.
+      await chrome.sidePanel.open({ tabId: sender.tab.id });
+    }
+  })();
+});

client/content.js

@@ -37,3 +37,8 @@ function getAllTextEndingWithPCM(element) {
 
   return textContent.trim();
 }
+
+document.querySelector("#openFlatiniSidebar").addEventListener("click", () => {
+  console.log("testing?", chrome);
+  chrome.runtime.sendMessage({ type: "open_side_panel" });
+});

client/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0",
+  "version": "1.1.5",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0bsGuxRgS5/cSnoPznlD7Wf09ouEtlf06G7N+FtVrw0LFurO3uOQIkxXIRwFN4uxOPdEjjNNZK/82VGdxo/PUGWH013DsZaFho2CvvpByn/hqlqfhhw8NqqyaGfIz369Tg1VOOY6p4qbXOydj9AH0eQrvcPUm5LjEv0sqEqzyKBMmJnjt5M5WFvOOHaJnxIQv4qt0AeieM4MmohDWVOe5upTVj0m0I4eOXTvURrRXtH/yAYu3i5uDaTFR+bwpI7tMbBtMfHb5jcwSpmx7Lv6tnbpRwQqcVmbjeYivaxI2Oav6KwD8d1+wUS76gcml1Z6WzBgwvA6xDNv0qlXE3OnCQIDAQAB",
   "manifest_version": 3,
   "name": "Flatini",

client/package.json

@@ -18,6 +18,7 @@
     "axios": "^1.5.0",
     "cheerio": "^1.0.0-rc.12",
     "dotenv": "^16.4.5",
+    "flatini-fe-library": "^0.2.13",
     "javascript-time-ago": "^2.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/AddRedFlag.tsx

@@ -1,13 +1,11 @@
 import { useLocation, useNavigate } from "react-router-dom";
-import Text, { TextTypes } from "./flatini-library/components/Text";
 import ColorLayout from "./layouts/ColorLayout";
 import styled from "styled-components";
-import InputText from "./flatini-library/components/InputText";
 import { useState } from "react";
-import Button from "./flatini-library/components/Button";
 import { _addRedFlag } from "./utils/resources";
 import { useProvider } from "./context/AppProvider";
 import { FaArrowLeft } from "react-icons/fa";
+import { Button, InputText, Text, TextTypes } from "flatini-fe-library";
 
 const Wrapper = styled.div`
   display: flex;
@@ -73,12 +71,12 @@ const AddRedFlags = () => {
           <span style={{ fontWeight: "bold" }}>{activeFlatData?.title}</span>.
           Don't worry, it's 100% anonymous.
         </Text>
-        <EditableDiv
-          contentEditable
-          data-placeholder="Enter your text here..."
-          onInput={(element) => {
-            const target = element.target as HTMLElement;
-            setNewRedFlag(target.innerText); // Or target.innerHTML if you need HTML content
+        <InputText
+          name="text"
+          placeholder="Enter your text here..."
+          style={{ width: "100%", minHeight: "150px" }}
+          onChange={(value) => {
+            setNewRedFlag(value);
           }}
         />
         <Button

client/src/App.tsx

@@ -13,6 +13,7 @@ import ErrorPage from "./views/ErrorPage";
 import Explore from "./views/Explore";
 import RedFlags from "./RedFlags";
 import AddRedFlag from "./AddRedFlag";
+import JoinGroup from "./views/JoinGroup";
 
 function App() {
   const navigate = useNavigate();
@@ -131,6 +132,7 @@ function App() {
       <>
         <Routes>
           <Route path="/" element={<CreateGroup />} />
+          <Route path="/JoinGroup" element={<JoinGroup />} />
         </Routes>
       </>
     );