Fetch Mock Json data to client end #36

BorDevTech · 2025-12-29T22:37:19Z

No description provided.

Co-authored-by: Jay Gee <JMG3000@users.noreply.github.com>

… for user input

…gration with NextLink

Copilot

Pull request overview

This PR implements search functionality with mock JSON data on the client side, along with various code cleanup improvements across multiple files.

Adds a Combobox-based search feature that filters mock data from a JSON file
Updates icon exports to include MinusIcon and PlusIcon
Refactors code quality improvements (const vs let, removing unused imports)

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
`src/components/ui/icons/index.ts`	Adds MinusIcon and PlusIcon exports from react-icons/fa
`src/app/stop-the-stigma/page.tsx`	Refactors variable declarations from let to const and removes unused MdMoon import
`src/app/search/page.tsx`	Implements main search functionality with Combobox component and mock data integration
`src/app/search/mock.json`	Adds new mock data file with searchable items containing title, link, and dataValue fields
`src/app/page.tsx`	Removes unused useBreakpointValue import
`src/app/contact/page.tsx`	Removes unused BodyTemplate and SectionTemplate imports
`src/app/about-us/page.tsx`	Adds asChild prop to ChakraImage components for proper composition with NextImage

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-29T22:40:09Z

src/app/search/page.tsx

 import {
-  Container, Box, Text, CloseButton, Input, InputGroup, Button, AbsoluteCenter, VStack, HStack, Heading,
-  Link as ChakraLink, Center, SimpleGrid, GridItem, Stack, Card, Image as ChakraImage
+  Container, Box, Text, CloseButton, Input, InputGroup, AbsoluteCenter, VStack, HStack, Heading,
+  SimpleGrid
 } from '@chakra-ui/react';
 import { useRef, useState } from "react"
-import { poppins } from '../../components/ui/fonts';
-import checkDeviceSize from '../../components/ui/breakpoints';
+import { poppins } from '@/components/ui/fonts';
+import checkDeviceSize from '@/components/ui/breakpoints';
+import mockData from '@/app/search/mock.json'
+
+
+import {
+  Combobox,
+  Portal,
+  useFilter,
+  useListCollection,
+} from "@chakra-ui/react"


The Chakra UI imports are split across two separate import statements (lines 4-7 and lines 14-19), both importing from "@chakra-ui/react". These should be consolidated into a single import statement for better code organization and readability.

Copilot · 2025-12-29T22:40:09Z

src/app/search/page.tsx

+
+                  <InputGroup endElement={endElement} _light={{ color: "white" }}>
+                    <Input
+                      list={searchlist.toString()}


The 'list' prop is being set to 'searchlist.toString()' which will convert the array to a string representation like "[object Object],[object Object],...". This is not a valid use of the HTML 'list' attribute. If you're trying to create a datalist, you need to provide the ID of a datalist element. Otherwise, this prop should be removed as the Combobox component above already handles the search suggestions.

Copilot · 2025-12-29T22:40:09Z

src/app/search/page.tsx

+                    <Input
+                      list={searchlist.toString()}
+                      ref={inputRef}
+                      placeholder="Email"


The placeholder text is "Email" but this appears to be a general search input, not an email field. The placeholder should be updated to reflect the actual purpose of this input field (e.g., "Search..." or similar).

Copilot · 2025-12-29T22:40:09Z

src/app/search/page.tsx

-                  <InputGroup endElement={endElement}>
+                  <InputGroup endElement={endElement} >
                    <Input
+                      list={searchlist.toString()}


The 'list' prop is being set to 'searchlist.toString()' which will convert the array to a string representation like "[object Object],[object Object],...". This is not a valid use of the HTML 'list' attribute. If you're trying to create a datalist, you need to provide the ID of a datalist element. Otherwise, this prop should be removed.

Copilot · 2025-12-29T22:40:10Z

src/app/search/page.tsx

                    <Input
+                      list={searchlist.toString()}
                      ref={inputRef}
                      placeholder="Email"


The placeholder text is "Email" but this appears to be a general search input, not an email field. The placeholder should be updated to reflect the actual purpose of this input field (e.g., "Search..." or similar).

Copilot · 2025-12-29T22:40:10Z

src/app/search/page.tsx


 export default function Search() {
+  //Retrieve mock data from json file
+  const [searchlist, setSearchlist] = useState(mockData)


The state variable 'searchlist' is initialized but the setter 'setSearchlist' is never used in the component. Since the mock data is static, this should be a regular constant rather than state. If you need it to be state for future updates, consider removing the unused setter or using it appropriately.

Suggested change

const [searchlist, setSearchlist] = useState(mockData)

const searchlist = mockData

Copilot · 2025-12-29T22:40:10Z

src/app/search/page.tsx

+                          {collection.items.map((item) => (
+                            <Combobox.Item key={item.title} item={item}>


Using 'item.title' as the key for list items can cause issues if there are duplicate titles in the mock data. The key should be unique for each item. Consider adding a unique 'id' field to each item in the mock data and using that as the key instead.

Suggested change

{collection.items.map((item) => (

<Combobox.Item key={item.title} item={item}>

{collection.items.map((item, index) => (

<Combobox.Item key={`${item.title}-${index}`} item={item}>

Copilot · 2025-12-29T22:40:10Z

src/app/search/page.tsx

+
+                  <InputGroup endElement={endElement} _light={{ color: "white" }}>
+                    <Input
+                      list={searchlist.toString()}
+                      ref={inputRef}
+                      placeholder="Email"
+                      value={value}
+                      onChange={(e) => {
+                        setValue(e.currentTarget.value)
+                      }}
+                    />
+                  </InputGroup>


There are two separate search input implementations in this component (Combobox on lines 85-110 and InputGroup on lines 112-122). They appear to serve the same purpose but are not synchronized, which can confuse users. Consider removing the redundant InputGroup or clarifying the distinct purposes of these two inputs.

Suggested change

<InputGroup endElement={endElement} _light={{ color: "white" }}>

<Input

list={searchlist.toString()}

ref={inputRef}

placeholder="Email"

value={value}

onChange={(e) => {

setValue(e.currentTarget.value)

}}

/>

</InputGroup>

Copilot · 2025-12-29T22:40:11Z

src/app/search/page.tsx

+

 export default function Search() {
+  //Retrieve mock data from json file


The comment delimiter lacks proper spacing. It should be formatted as '// Retrieve mock data from json file' with a space after the double slashes for better readability.

Suggested change

//Retrieve mock data from json file

// Retrieve mock data from json file

Copilot · 2025-12-29T22:40:11Z

src/app/stop-the-stigma/page.tsx


 import { FaRegObjectGroup as FaObjectGroup, FaRegListAlt as FaListAlt, FaRegNewspaper as FaNewspaper, FaRegKeyboard as FaKeyboard } from "react-icons/fa";
-import { MdBrightness4 as MdMoon, MdBrightness5 as MdSun } from 'react-icons/md';
+import { MdBrightness5 as MdSun } from 'react-icons/md';


Unused import MdSun.

Suggested change

import { MdBrightness5 as MdSun } from 'react-icons/md';

BorDevTech

Great work no bugs! 👍

BorDevTech and others added 5 commits December 28, 2025 18:42

Refactor imports in multiple components for consistency and clarity

43b5bdd

Merge branch 'master' into DevellR/ChakraUI

9dbae6b

Abstracted all icons into index file for easy import

a4fdfc1

Co-authored-by: Jay Gee <JMG3000@users.noreply.github.com>

Add mock data for search functionality and implement Combobox element…

5a7d931

… for user input

Refactor ChakraImage components to use 'asChild' prop for better inte…

483c3b7

…gration with NextLink

BorDevTech self-assigned this Dec 29, 2025

Copilot AI review requested due to automatic review settings December 29, 2025 22:37

Copilot started reviewing on behalf of BorDevTech December 29, 2025 22:37 View session

BorDevTech mentioned this pull request Dec 29, 2025

Fetch temporary JSON data #34

Closed

Copilot AI reviewed Dec 29, 2025

View reviewed changes

BorDevTech commented Dec 29, 2025

View reviewed changes

BorDevTech merged commit c4e670c into master Dec 29, 2025
6 checks passed

BorDevTech linked an issue Dec 29, 2025 that may be closed by this pull request

Fetch temporary JSON data #34

Closed

BorDevTech mentioned this pull request Dec 29, 2025

Create New Mokse search page #18

Open

	const [searchlist, setSearchlist] = useState(mockData)
	const searchlist = mockData

		{collection.items.map((item) => (
		<Combobox.Item key={item.title} item={item}>



		export default function Search() {
		//Retrieve mock data from json file

	//Retrieve mock data from json file
	// Retrieve mock data from json file

Fetch Mock Json data to client end #36

Fetch Mock Json data to client end #36

Uh oh!

Conversation

BorDevTech commented Dec 29, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

BorDevTech left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant