TRI-220. Create a custom component

manifest.json

@@ -1,12 +1,13 @@
 {
-  "vendor": "vtex",
+  "vendor": "trika",
   "name": "store-theme",
   "version": "5.2.0",
   "builders": {
     "styles": "2.x",
     "store": "0.x",
     "sitemap": "0.x",
-    "docs": "0.x"
+    "docs": "0.x",
+    "react": "3.x"
   },
   "mustUpdateAt": "2018-09-05",
   "scripts": {

react/ContactUsWrapper.js

@@ -0,0 +1,3 @@
+import ContactUsWrapper from "./components/ContactUs";
+
+export default ContactUsWrapper

react/components/ContactUs/index.css

@@ -0,0 +1,29 @@
+
+table {
+    width: 70%;
+    border-collapse: collapse;
+    font-family: sans-serif;
+    margin-top: 1rem;
+    align-items: center;
+  }
+
+  th, td {
+    border: 1px solid #ccc;
+    padding: 12px 16px;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  thead {
+    background-color: #f5f5f5;
+  }
+
+  tr:nth-child(even) {
+    background-color: #fafafa;
+  }
+
+  td, th {
+    align-items: center;
+    justify-content: flex-start; 
+  }
+

react/components/ContactUs/index.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import './index.css';
+
+interface ContactUsProps {
+    firstName: string;
+    lastName: string;
+    contactNumber: number;
+    location: string;
+    id: number;
+}
+
+interface ContactUsData {
+    contactUsData: ContactUsProps[];
+}
+interface Props{
+    title: string
+    pageSize: number
+}
+
+
+const ContactUsTable = ({ contactUsData }: { contactUsData: ContactUsProps[] }) => {
+    return (
+        <div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>First Name</th>
+                        <th>Last Name</th>
+                        <th>Contact Number</th>
+                        <th>Location</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {contactUsData.map((contactUs: { firstName: string; lastName: string; contactNumber: number; location: string; id: number }) => {
+                        return <tr key={contactUs.id}>
+                            <td>{contactUs.firstName}</td>
+                            <td>{contactUs.lastName}</td>
+                            <td>{contactUs.contactNumber}</td>
+                            <td>{contactUs.location}</td>
+                        </tr>
+                    })}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+const getContactUsDataFromBackend = async ({ start, end }: { start: number, end: number }) => {
+    try {
+        const config = {
+            method: 'get',
+            url: '/_v/dataEntities',
+            params: {
+                start,
+                end
+            },
+            timeout: 5000,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        };
+
+        const response = await axios.request(config);
+        return response.data;
+    } catch (error) {
+        console.error('Error details:', error);
+        throw error;
+    }
+};
+
+const getContactUsData = async ({ start, end }: { start: number, end: number }, setIsPageLimitReached: (isPageLimitReached: boolean) => void) => {
+    const response = await axios.get('/api/dataentities/NC/search?_size=5&_fields=_all', {
+        headers: {
+            'Accept': 'application/vnd.vtex.ds.v10+json',
+            'Content-Type': 'application/json',
+            'X-VTEX-API-AppKey': 'vtexappkey-trika-EGMFAJ',
+            'X-VTEX-API-AppToken': 'PMBEGIZOAKIJMNJPTEHUEGCMEPNACEGLWWMHTWGQAAHMXWQEQDVFERPKDWXIJIRHFLHITNITFTWNTYDETOASVOWJJWEWRQMAKVSQODHHMMTAVZXBVVCLIXHAOXHZSOWB',
+            'REST-Range': `resources=${start}-${end}`
+        },
+        baseURL: window.location.origin,
+    });
+    const responseRange = response.headers['rest-content-range'];
+    const totalItems = responseRange.split('/')[1];
+    if (totalItems <= end) {
+        setIsPageLimitReached(true);
+    }
+    return response.data;
+}
+const ContactUs = ({ pageSize, title }: Props) => {
+    const [contactUsData, setContactUsData] = useState<ContactUsProps[]>([]);
+    const [isPageLimitReached, setIsPageLimitReached] = useState(false);
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await getContactUsDataFromBackend({ start: 0, end: pageSize });
+                setContactUsData(response);
+            } catch (error) {
+                console.error('Error in useEffect:', error);
+            }
+        };
+
+        fetchData();
+    }, [pageSize]);
+
+    const handleLoadMore = async () => {
+        try {
+            const response = await getContactUsDataFromBackend({ 
+                start: contactUsData.length, 
+                end: contactUsData.length + pageSize 
+            });
+            setContactUsData([...contactUsData, ...response]);
+            if (response.length < pageSize) {
+                setIsPageLimitReached(true);
+            }
+        } catch (error) {
+            console.error('Error loading more data:', error);
+        }
+    }
+
+    return (
+        <div>
+            <ContactUsTable contactUsData={contactUsData} />
+            <h3>{title}</h3>
+            <button onClick={handleLoadMore} disabled={isPageLimitReached}>Load More</button>
+        </div>
+    )
+}
+
+export default ContactUs;

react/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react",
+  "version": "1.0.0",
+  "description": "Packages required for the the react app",
+  "main": "index.js",
+  "scripts": {
+    "test": "dev"
+  },
+  "author": "Naveen",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.7.9",
+    "@types/react-slick": "^0.23.10",
+    "apollo-client": "^2.6.8",
+    "moment": "2.29.4",
+    "react": "^16.12.0",
+    "react-apollo": "^3.1.3",
+    "react-dom": "^16.12.0",
+    "react-intl": "^3.12.0",
+    "react-slick": "^0.29.0"
+  },
+  "devDependencies": {
+    "@apollo/react-testing": "^3.1.3",
+    "@types/node": "^13.9.8",
+    "@types/react": "^16.9.31",
+    "@vtex/test-tools": "^3.3.2",
+    "@vtex/tsconfig": "^0.4.4",
+    "apollo-cache-inmemory": "^1.6.5",
+    "graphql": "^14.6.0",
+    "typescript": "3.9.7",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles"
+  }
+}

react/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "ContactUsWrapper.js"],
+  "exclude": ["node_modules"]
+}