refactor: removed devilbox and added lando

Author: SkipTheDragon

app/.env .env.example

@@ -1,4 +1,5 @@
-
+.DS_Store
+.idea
 ###> symfony/framework-bundle ###
 /.env.local
 /.env.local.php
@@ -15,3 +16,4 @@
 npm-debug.log
 yarn-error.log
 ###< symfony/webpack-encore-bundle ###
+.env

app/.gitignore .gitignore

@@ -0,0 +1,59 @@
+# https://docs.lando.dev/plugins/symfony/config.html
+
+name: hyper-search
+recipe: symfony
+config:
+  webroot: ./public
+  php: '8.2'
+  via: nginx
+  cache: memcached
+services:
+  appserver:
+    run:
+      - composer install
+      - bin/console manticore:migrate
+      - bin/console manticore:seed
+    overrides:
+      ports:
+        - 1241
+    scanner:
+      okCodes:
+        - 426
+  node:
+    type: node:18
+    run:
+      - yarn
+      - yarn build
+  manticore:
+    api: 3
+    type: lando
+    services:
+      image: manticoresearch/manticore:6.2.12
+      command: /usr/local/bin/docker-entrypoint.sh  su - manticore -c '/usr/bin/searchd -c /etc/manticoresearch/manticore.conf --nodetach'
+      ports:
+        - 9306:9306
+        - 9308:9308
+      volumes:
+        - manticore_volume:/var/lib/manticore
+      ulimits:
+        nproc: 65535
+        nofile:
+          soft: 65535
+          hard: 65535
+        memlock:
+          soft: -1
+          hard: -1
+    volumes:
+      manticore_volume: {}
+tooling:
+  node:
+    service: node
+  npm:
+    service: node
+  yarn:
+    service: node
+  pnpm:
+    service: node
+proxy:
+  appserver:
+    - ws.lndo.site:1241

.lando.yml

@@ -11,21 +11,35 @@ import React from "react";
 import {SearchIcon} from "@chakra-ui/icons";
 import NotFound from "./NotFound";
 import Bar from "./Bar";
+import ResultItem from "./ResultItem";
+
+export interface SearchResultProps {
+    _id: string;
+    _score: number;
+    _source: {
+        description: string;
+        title: string;
+        location: string;
+        link: string;
+    }
+}
 
 export interface ResultProps {
     isWarpStarted: boolean;
+    data: SearchResultProps[];
 }
 
 const Result: React.FC<ResultProps> = (
     {
         isWarpStarted,
+        data,
     }) => {
     const buttonData: {
             id: number;
             label: string;
             icon?: React.ReactElement;
             backgroundColor?: string;
-        }[] = [
+        }[] = [ // TODO: Make dynamic
             {id: 1, label: 'Documentations', icon: <Icon as={IoDocumentTextSharp}/>, backgroundColor: '#FF6384'},
             {id: 2, label: 'Knowledgebases', icon: <Icon as={IoBulbSharp}/>, backgroundColor: '#36A2EB'},
             {id: 3, label: 'Forums', icon: <Icon as={IoChatbubblesSharp}/>, backgroundColor: '#FFCE56'},
@@ -38,7 +52,7 @@ const Result: React.FC<ResultProps> = (
     const borderColor = useColorModeValue('secondaryGray.200', 'gray.800');
     const bgColor = useColorModeValue('gray.100', 'navy.700');
     const bgColorHover = useColorModeValue('gray.200', 'navy.800');
-
+    const [currentLocation, setCurrentLocation] = React.useState<string | null>(null);
 
     return (
         <Collapse in={isWarpStarted}>
@@ -54,11 +68,15 @@ const Result: React.FC<ResultProps> = (
                               flexDirection='column'
                               borderRight={'1px'}
                               borderColor={borderColor}>
-                        {buttonData.map((button) => (
+                        {buttonData.map((button, index) => (
                             <Button
                                 _hover={{bg: bgColorHover}}
                                 _focusVisible={{bg: bgColorHover}}
                                 boxShadow={'none'}
+                                bg={currentLocation === button.label ? bgColorHover : bgColor}
+                                onFocus={() => setCurrentLocation(button.label)}
+                                onMouseOver={() => setCurrentLocation(button.label)}
+                                onClick={() => setCurrentLocation(button.label)}
                                 leftIcon={
                                     <>
                                         <Box
@@ -81,7 +99,7 @@ const Result: React.FC<ResultProps> = (
                                 borderRadius={0}
                                 paddingX={'1rem'}
                                 paddingY={'2rem'}
-                                key={button.id}
+                                key={index}
                                 variant='ghost'
                             >
                                 <div>
@@ -93,14 +111,33 @@ const Result: React.FC<ResultProps> = (
                                                 fontSize: '0.65rem',
                                                 textAlign: 'left',
                                             }
-                                        }>0 results</Text>
+                                        }>{data.filter(result => result._source.location === button.label).length} results</Text>
                                 </div>
 
                             </Button>
                         ))}
                     </GridItem>
 
-                    <NotFound/>
+                    {
+                        data.length === 0 ?
+                            <NotFound/>
+                            :
+                            <Grid gap={0}  maxHeight={'500px'} overflowY={'auto'}>
+                                {data.map((result, index) => (
+                                    <React.Fragment key={index}>
+                                        {
+                                            currentLocation === null ?
+                                                <ResultItem {...result._source}/>
+                                                :
+                                                result._source.location === currentLocation ?
+                                                    <ResultItem {...result._source}/>
+                                                    :
+                                                    null
+                                        }
+                                    </React.Fragment>
+                                ))}
+                            </Grid>
+                    }
 
                     <GridItem
                         w='100%'