feat(#1316): Implemented search bar on org home page

Dockerfile

@@ -13,4 +13,5 @@ COPY . .
 RUN yarn run build
 
 FROM nginx:alpine
+COPY --from=build /usr/src/app/deploy/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /usr/src/app/build /usr/share/nginx/html

README.md

@@ -2,12 +2,16 @@
 
 **npm run build**
 
-# publish
+### docker build
 
-docker tag sphinx-tribes sphinxlightning/sphinx-tribes-frontend:0.1.0
+docker build -t sphinx-tribes-frontend .
 
-docker push sphinxlightning/sphinx-tribes-frontend:0.1.0
+### docker publish
 
-docker tag sphinx-tribes sphinxlightning/sphinx-tribes-frontend:latest
+docker tag sphinx-tribes-frontend sphinxlightning/sphinx-tribes-frontend:0.1.3
+
+docker push sphinxlightning/sphinx-tribes-frontend:0.1.3
+
+docker tag sphinx-tribes-frontend sphinxlightning/sphinx-tribes-frontend:latest
 
 docker push sphinxlightning/sphinx-tribes-frontend:latest

deploy/nginx.conf

@@ -0,0 +1,41 @@
+server {
+    listen 80;
+    listen [::]:80;
+    server_name localhost;
+
+    ## Your only path reference.
+    root /usr/share/nginx/html;
+
+    ## This should be in your http block and if it is, it's not needed here.
+    index index.html;
+
+    autoindex off;
+
+    location = /favicon.ico {
+        log_not_found off;
+        access_log off;
+    }
+
+    location = /manifest.json {
+        allow all;
+        log_not_found off;
+        access_log off;
+    }
+
+    location = /robots.txt {
+        allow all;
+        log_not_found off;
+        access_log off;
+    }
+
+    location / {
+        if (!-e $request_filename){
+            rewrite ^(.*)$ /index.html break;
+        }
+    }
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
+        expires max;
+        log_not_found off;
+    }
+}

deploy/staging/docker-compose.yml

@@ -0,0 +1,126 @@
+version: "2"
+
+services:
+  reverse-proxy:
+    # The official v2 Traefik docker image
+    image: traefik:v2.2.1
+    # Enables the web UI and tells Traefik to listen to docker
+    # command: --configFile=/home/ec2-user/sphinx-deploy/traefik.yaml
+    ports:
+      # The HTTP port
+      - 80:80
+      # The Web UI (enabled by --api.insecure=true)
+      - 8080:8080
+      # entrypoints
+      - 443:443
+      - 8883:8883
+    volumes:
+      # So that Traefik can listen to the Docker events
+      - /var/run/docker.sock:/var/run/docker.sock
+      - /home/ec2-user/sphinx-deploy/traefik.yaml:/etc/traefik/traefik.yaml
+      - /home/ec2-user/letsencrypt:/letsencrypt
+    environment:
+      - AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID
+      - AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY
+      - AWS_REGION=$AWS_REGION
+    logging:
+      options:
+        max-size: 10m
+    ulimits:
+      nproc: 65535
+      nofile:
+        soft: 1000000
+        hard: 1000000
+
+  auth:
+    image: sphinx-auth
+    depends_on:
+      - reverse-proxy
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.auth.rule=Host(`auth-test.sphinx.chat`)"
+      - "traefik.http.services.auth.loadbalancer.server.port=9090"
+      - "traefik.http.routers.auth.tls=true"
+      - "traefik.http.routers.auth.tls.certresolver=myresolver"
+      - "traefik.http.routers.auth.entrypoints=websecure"
+    restart: on-failure
+    environment:
+      - JWT_KEY=$JWT_KEY
+      - CLIENT_KEYS=$CLIENT_KEYS
+      - OAUTH_TIMEOUT=$OAUTH_TIMEOUT
+      - HOST=auth-test.sphinx.chat
+
+  tribes:
+    image: sphinx-tribes
+    depends_on:
+      - auth
+      - reverse-proxy
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.tribes.rule=Host(`api.tribes-test.sphinx.chat`) || Host(`api.people-test.sphinx.chat`) || Host(`api.community-test.sphinx.chat`)"
+      - "traefik.http.services.tribes.loadbalancer.server.port=5002"
+      - "traefik.http.routers.tribes.tls=true"
+      - "traefik.http.routers.tribes.tls.certresolver=myresolver"
+      - "traefik.http.routers.tribes.entrypoints=websecure"
+    restart: on-failure
+    environment:
+      - DATABASE_URL=$DATABASE_URL
+      - PODCAST_INDEX_SECRET=$PODCAST_INDEX_SECRET
+      - PODCAST_INDEX_KEY=$PODCAST_INDEX_KEY
+      - YOUTUBE_KEY=$YOUTUBE_KEY
+      - GITHUB_TOKEN=$GITHUB_TOKEN
+      - LN_SERVER_BASE_URL=https://people-test.sphinx.chat
+      - LN_JWT_KEY=$LN_JWT_KEY
+      - RELAY_URL=$RELAY_URL
+      - RELAY_AUTH_KEY=$RELAY_AUTH_KEY
+      - RELAY_URL_BACKUP=$RELAY_URL_BACKUP
+      - RELAY_AUTH_KEY_BACKUP=$RELAY_AUTH_KEY_BACKUP
+      - HOST=people-test.sphinx.chat
+      - REDIS_URL=$REDIS_URL
+      - ADMIN_PUBKEYS=$ADMINS
+      - ADMINS=$ADMINS
+      - AWS_SECRET_ACCESS=$AWS_SECRET_ACCESS_KEY
+      - AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID
+      - AWS_REGION=us-east-1
+      - S3_BUCKET_NAME=sphinx-tribes
+      - S3_FOLDER_NAME=metrics
+      - S3_URL=https://sphinx-tribes.s3.amazonaws.com
+    ulimits:
+      nproc: 65535
+      nofile:
+        soft: 1000000
+        hard: 1000000
+
+  tribes-frontend:
+    image: sphinxlightning/sphinx-tribes-frontend:latest
+    depends_on:
+      - tribes
+      - reverse-proxy
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.tribes-frontend.rule=Host(`tribes-test.sphinx.chat`) || Host(`people-test.sphinx.chat`) || Host(`community-test.sphinx.chat`)"
+      - "traefik.http.services.tribes-frontend.loadbalancer.server.port=80"
+      - "traefik.http.routers.tribes-frontend.tls=true"
+      - "traefik.http.routers.tribes-frontend.tls.certresolver=myresolver"
+      - "traefik.http.routers.tribes-frontend.entrypoints=websecure"
+    restart: on-failure
+
+  mqtt:
+    image: sphinx-mqtt
+    depends_on:
+      - auth
+      - reverse-proxy
+    labels:
+      - "traefik.enable=true"
+      - "traefik.tcp.routers.mqtt.rule=HostSNI(`tribes-test.sphinx.chat`)"
+      - "traefik.tcp.services.mqtt.loadbalancer.server.port=1883"
+      - "traefik.tcp.routers.mqtt.tls=true"
+      - "traefik.tcp.routers.mqtt.tls.certresolver=myresolver"
+      - "traefik.tcp.routers.mqtt.entrypoints=mqttsecure"
+      - "traefik.tcp.routers.mqtt.service=mqtt"
+    restart: on-failure
+    ulimits:
+      nproc: 65535
+      nofile:
+        soft: 1000000
+        hard: 1000000

src/pages/tickets/org/orgHeader/index.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { PostModal } from 'people/widgetViews/postBounty/PostModal';
+import { SearchBar } from '../../../../components/common/index.tsx';
+import { useStores } from '../../../../store';
+import { colors } from '../../../../config';
 import addBounty from './Icons/addBounty.svg';
-import searchIcon from './Icons/searchIcon.svg';
 import file from './Icons/file.svg';
 
 const Header = styled.div`
@@ -96,35 +98,6 @@ const Label = styled.label`
   letter-spacing: 0.15px;
 `;
 
-const SearchWrapper = styled.div`
-  height: 40px;
-  padding: 0px 16px;
-  align-items: center;
-  gap: 10px;
-  flex: 1 0 0;
-  display: flex;
-  position: relative;
-`;
-
-const Icon = styled.img`
-  position: absolute;
-  right: 30px;
-`;
-
-const SearchBar = styled.input`
-  display: flex;
-  height: 40px;
-  padding: 0px 16px;
-  padding-left: 30px;
-  align-items: center;
-  gap: 10px;
-  flex: 1 0 0;
-  border-radius: 6px;
-  background: var(--Input-BG-1, #f2f3f5);
-  outline: none;
-  border: none;
-`;
-
 const SoryByContainer = styled.span`
   justify-content: center;
   align-items: center;
@@ -179,6 +152,8 @@ export const OrgHeader = () => {
   const handlePostBountyClose = () => {
     setIsPostBountyModalOpen(false);
   };
+  const { main, ui } = useStores();
+  const color = colors['light'];
 
   return (
     <>
@@ -201,10 +176,48 @@ export const OrgHeader = () => {
               <Label htmlFor="statusSelect">Skill</Label>
               <Skill id="statusSelect" />
             </SkillContainer>
-            <SearchWrapper>
-              <SearchBar placeholder="Search" disabled />
-              <Icon src={searchIcon} alt="Search" />
-            </SearchWrapper>
+            <SearchBar
+              name="search"
+              type="search"
+              placeholder="Search"
+              value={ui.searchText}
+              style={{
+                width: '384px',
+                height: '40px',
+                background: color.grayish.G950,
+                fontFamily: 'Barlow',
+                color: color.text2,
+                gap: '10px',
+                flex: '1 0 0',
+                display: 'flex',
+                position: 'relative',
+                marginLeft: '20px',
+                alignItems: 'center',
+                borderRadius: '6px',
+                border: 'none',
+                outline: 'none'
+              }}
+              onChange={(e: any) => {
+                ui.setSearchText(e);
+              }}
+              onKeyUp={(e: any) => {
+                if (e.key === 'Enter' || e.keyCode === 13) {
+                  const currentPath = window.location.pathname;
+                  const pathSegments = currentPath.split('/');
+                  const paramValue = pathSegments[pathSegments.length - 1];
+                  main.getPeopleBounties({
+                    page: 1,
+                    resetPage: true,
+                    search: e.target.value,
+                    org_uuid: paramValue
+                  });
+                }
+              }}
+              TextColor={color.grayish.G100}
+              TextColorHover={color.grayish.G50}
+              iconColor={color.grayish.G300}
+              iconColorHover={color.grayish.G50}
+            />
           </FiltersRight>
           <SoryByContainer>
             <Label htmlFor="statusSelect">Sort by:Newest First</Label>

src/people/widgetViews/__tests__/OrgHeader.spec.tsx

@@ -2,8 +2,17 @@ import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { OrgHeader } from 'pages/tickets/org/orgHeader';
+import { mainStore } from 'store/main';
 
 describe('OrgHeader Component', () => {
+  beforeEach(() => {
+    jest.spyOn(mainStore, 'getPeopleBounties').mockReset();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders the component correctly', () => {
     render(<OrgHeader />);
     expect(screen.getByText('Post a Bounty')).toBeInTheDocument();
@@ -23,4 +32,32 @@ describe('OrgHeader Component', () => {
     expect(screen.getByText('284')).toBeInTheDocument();
     expect(screen.getByText('Bounties')).toBeInTheDocument();
   });
+
+  it('should calls getPeopleBounties with correct parameters', () => {
+    const orgUuid = 'cmkln4tm098m49vhlt80';
+    Object.defineProperty(window, 'location', {
+      value: {
+        pathname: `/org/bounties/${orgUuid}`
+      },
+      writable: true
+    });
+
+    render(<OrgHeader />);
+
+    // Simulate entering search text
+    const searchText = 'sample search';
+    const searchInput = screen.getByPlaceholderText('Search') as HTMLInputElement;
+    fireEvent.change(searchInput, { target: { value: searchText } });
+
+    // Simulate pressing Enter key
+    fireEvent.keyUp(searchInput, { key: 'Enter', code: 'Enter' });
+
+    // Check if getPeopleBounties is called with correct parameters
+    expect(mainStore.getPeopleBounties).toHaveBeenCalledWith({
+      page: 1,
+      resetPage: true,
+      search: searchText,
+      org_uuid: orgUuid
+    });
+  });
 });

src/store/main.ts

@@ -184,6 +184,7 @@ export interface QueryParams {
   search?: string;
   resetPage?: boolean;
   languages?: string;
+  org_uuid?: string;
 }
 
 export interface ClaimOnLiquid {