Merge pull request #26 from tazo90/feat/24-default-app-configs

Feat/24 default app configs

next.config.js

@@ -13,6 +13,15 @@ module.exports = withBundleAnalyzer(withImages({
   images: {
     disableStaticImages: true
   },
+  webpack: function (config) {
+    config.module.rules.push(
+      {
+        test: /\.ya?ml$/,
+        use: 'js-yaml-loader',
+      },
+    )
+    return config
+  },
   async headers() {
     return [
       {

package.json

@@ -36,6 +36,7 @@
     "bcryptjs": "^2.4.3",
     "cssnano": "^5.1.7",
     "dayjs": "^1.11.2",
+    "js-yaml-loader": "^1.2.2",
     "maplibre-gl": "^2.1.6",
     "next": "12.1.0",
     "next-auth": "^4.3.1",

src/apps/base-app.tsx

@@ -37,6 +37,23 @@ type BaseAppProps = {
   searchFields?: string[];
 };
 
+function AppFilters(props) {
+  const { brands, countries } = props;
+  const { config } = useSelector((state: any) => state.app);
+
+  const filters: any = {
+    brand: <BrandFilter brands={brands} />,
+    country: <CountryFilter countries={countries} />,
+    more: <MoreFilter />,
+  };
+
+  if (!config.filters) return null;
+
+  return config.filters.map((filter: string, index: number) => (
+    <div key={index}>{filters[filter]}</div>
+  ));
+}
+
 export default function BaseApp(props: BaseAppProps) {
   const {
     isAuthorized,
@@ -213,9 +230,7 @@ export default function BaseApp(props: BaseAppProps) {
             <div className="hidden md:block lg:hidden bg-gray-300 h-3/5 w-0.5 ml-2" />
           </div>
           <div className="flex overflow-x-auto items-center py-2">
-            <BrandFilter brands={brands} />
-            <CountryFilter countries={countries} />
-            <MoreFilter />
+            <AppFilters brands={brands} countries={countries} />
           </div>
         </nav>
       </section>
@@ -256,7 +271,6 @@ export default function BaseApp(props: BaseAppProps) {
         </section>
         {/* Drawer */}
         <Drawer isOpen={isDrawerOpen} setDrawerOpen={setDrawerOpen}>
-          {/* <StoreDetail isOpen={isDrawerOpen} /> */}
           {isDrawerOpen && <DetailView isOpen={isDrawerOpen} apiKey={apiKey} />}
         </Drawer>
       </div>

src/apps/jobs/config.yml

@@ -0,0 +1,37 @@
+map:
+  marker:
+    name: "jobMarker"
+    attributes:
+      - jobs_count
+      - store_rate
+
+listview:
+  attributes:
+    - image
+    - address
+    - phone
+    - opening_hours
+    - rate
+    - reviews
+  sorting:
+    name_asc:
+      label: "Name: Asc"
+      key: name
+      order: asc
+    name_desc:
+      label: "Name: Desc"
+      key: name
+      order: desc
+    rate_highest:
+      label: "Rate: Highest"
+      key: rate
+      order: desc
+    rate_lowest:
+      label: "Rate: Lowest"
+      key: rate
+      order: asc
+
+filters:
+  - brand
+  - country
+  - more

src/apps/jobs/index.tsx

@@ -1,8 +1,12 @@
 import dynamic from "next/dynamic";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 
 import { useJobsQuery } from "@api/organization/jobs/get-all-jobs";
 import { ListboxJob } from "@apps/jobs/listbox-job/listbox-job";
+import { setAppConfig } from "@slices/app.slice";
+
+import appConfig from "@apps/jobs/config.yml";
 
 const BaseApp = dynamic(() => import("@apps/base-app"));
 const JobDetail = dynamic(() => import("@apps/jobs/job-detail"));
@@ -13,10 +17,15 @@ type JobsAppProps = {
 };
 
 export default function JobsApp(props: JobsAppProps) {
+  const dispatch = useDispatch();
   const { apiKey } = props;
   const [isAuthorized, setIsAuthorized] = useState<boolean | null>(null);
   const organization = "amrest";
 
+  useEffect(() => {
+    dispatch(setAppConfig(appConfig));
+  }, []);
+
   const { data, isLoading }: any = useJobsQuery(
     {
       org: organization,

src/apps/jobs/listbox-job/listbox-job-details.tsx

@@ -1,11 +1,15 @@
-import { Rating } from "@components/ui/rating";
+import { ListItemFields } from "@components/listbox/listbox-item/listbox-item-details";
 import icons from "@constants/icons";
-import { LocationMarkerIcon } from "@heroicons/react/solid";
 import { classNames } from "@lib/classnames";
 
-export function ListboxJobDetails({ job, distance }) {
+export function ListboxJobDetails({ job, distance, attributes }) {
   return (
-    <div className="flex flex-col h-full w-full xs:w-[78%]">
+    <div
+      className={classNames(
+        "flex flex-col h-full w-full",
+        attributes.includes("image") ? "xs:w-[78%]" : "xs:w-full"
+      )}
+    >
       <div className="flex items-center justify-between relative pl-3 pr-4 min-h-fit w-full rounded-3xl bg-white dark:bg-gray-100 text-gray-900 dark:text-gray-800">
         <div className="flex relative h-7 w-7">
           <img
@@ -25,34 +29,11 @@ export function ListboxJobDetails({ job, distance }) {
         <div className="flex relative bottom-1.5 right-0 w-2 h-2 rounded-full bg-green-600"></div>
       </div>
       <div className="text-[0.82rem] leading-snug pt-2 space-y-0.5">
-        <p className="truncate">
-          <span className="font-bold">Address:</span> {job.address}
-        </p>
-        <div
-          className={classNames(
-            "flex",
-            job.phone ? "justify-between" : "justify-end"
-          )}
-        >
-          {job.phone && (
-            <p>
-              <span className="font-bold">Phone:</span> {job.phone}
-            </p>
-          )}
-          {distance && (
-            <div className="flex items-center justify-end">
-              <LocationMarkerIcon className="w-3 h-3 mr-0.5" />
-              <span className="text-xs">{distance.toFixed(1)} km</span>
-            </div>
-          )}
-        </div>
-        <div className="flex justify-between">
-          <p>
-            <span className="font-bold">Hours:</span> 08:00 - 16:00 -{" "}
-            <span className="font-semibold text-green-500">Open</span>
-          </p>
-          <Rating count={120} rate={3.6} stars={1} textSize="text-xs" />
-        </div>
+        <ListItemFields
+          item={job}
+          distance={distance}
+          attributes={attributes}
+        />
       </div>
     </div>
   );