@wayke-se/components-react 2.15.0 → 3.0.0-beta.1

package/src/@types/search.ts

@@ -0,0 +1,118 @@
+export interface Stats {
+  totalHits: number;
+  searchEngineTimeInMillis: number;
+  searchEngineRoundTripTimeInMillis: number;
+  searchProcessingTimeInMillis: number;
+}
+
+export interface Branch {
+  id: string;
+  name: string;
+}
+
+export interface Format {
+  format: string;
+  id: string;
+  url: string;
+}
+
+export interface File {
+  formats: Format[];
+  id: string;
+  sortOrder: number;
+  url: string;
+}
+
+export interface FeaturedImage {
+  files: File[];
+  id: string;
+  sortOrder: number;
+  type: 'Image';
+}
+
+export interface PaginationPage {
+  displayName: string;
+  selected: boolean;
+  query: string;
+}
+
+export interface Pagination {
+  offset: number;
+  hitsPerPage: number;
+  firstPage: string | null;
+  previousPage: string | null;
+  nextPage: PaginationPage | null;
+  pages: PaginationPage[];
+}
+
+export interface SortOption {
+  displayName: string;
+  selected: boolean;
+  query: string;
+}
+
+export interface DocumentList {
+  id: string;
+  displayName: string;
+  numberOfHits: number;
+  documents: Document[];
+  pagination: Pagination;
+  sortOptions: SortOption[];
+}
+
+export interface Document {
+  _id: string;
+  _type: string;
+  branches: Branch[];
+  deductibleVat: boolean;
+  featuredImage: FeaturedImage;
+  gearboxType: string;
+  hasManufacturerPackaging: boolean;
+  itemPublished: string;
+  itemUpdated: string;
+  manufacturer: string;
+  mileage: number;
+  modelSeries: string;
+  modelYear: number;
+  fuelType: string;
+  price: number;
+  oldPrice?: number;
+  registrationNumber: string;
+  salesName: string;
+  shortDescription: string;
+  title: string;
+  leasingPrice?: number;
+}
+
+export interface FacetFilter {
+  displayName: string;
+  selected: boolean;
+  query: string;
+  count: number;
+  children: any[];
+}
+
+export interface Facet {
+  id: string;
+  displayName: string;
+  selectionType: 'OR';
+  multipleLevels: boolean;
+  filters: FacetFilter[];
+}
+
+export interface Query {
+  displayName: string;
+  id: string;
+  parameters: string | null;
+  queryString: string | null;
+}
+
+export interface Search {
+  stats: Stats;
+  query: Query | null;
+  documentList: DocumentList;
+  facets: Facet[];
+  spell: null;
+  quickLinks: null;
+  errorMessages: string[];
+}

package/src/@types/theme.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '../layout/theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}

package/src/@types/vehicle-properties.ts

@@ -0,0 +1,33 @@
+export interface Property {
+  value: string | number | boolean | string[];
+  name: string;
+  type: string;
+  unit: string | null | undefined;
+  hint: string | null | undefined;
+}
+
+export interface Category {
+  id: number;
+  name: string;
+  properties: Property[];
+  subCategories: Category[];
+}
+
+export interface Tree {
+  categories: Category[];
+}
+
+export interface EnhancedProperty {
+  value: number | string | boolean | string[];
+  name: string;
+  type: string;
+  unit: string | undefined | null;
+  category: ItemCategory | undefined | null;
+  hint: string | undefined | null;
+}
+
+export interface ItemCategory {
+  name: string;
+  id: number;
+  subCategory: ItemCategory | undefined | null;
+}

package/src/State/CentralStorage/CentralStorageContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+export interface CentralStorageContextProps {
+  centralStorageId?: string | null;
+  setCentralStorageId: (id?: string) => void;
+}
+
+export const CentralStorageContext = createContext<CentralStorageContextProps>({
+  setCentralStorageId: (_) => {},
+});

package/src/State/CentralStorage/CentralStorageProvider.tsx

@@ -0,0 +1,21 @@
+import React, { useCallback } from 'react';
+import { CentralStorageContext } from './CentralStorageContext';
+import useSessionStorage from '../../hooks/useSessionStorage';
+
+interface CentralStorageProviderProps {
+  children: React.ReactNode;
+}
+
+const CentralStorageProvider = ({ children }: CentralStorageProviderProps) => {
+  const { value, set, remove } = useSessionStorage('centralStorage');
+
+  const setCentralStorageId = useCallback((id?: string) => (id ? set(id) : remove()), []);
+
+  return (
+    <CentralStorageContext.Provider value={{ centralStorageId: value, setCentralStorageId }}>
+      {children}
+    </CentralStorageContext.Provider>
+  );
+};
+
+export default CentralStorageProvider;

package/src/State/CentralStorage/useCentralStorage.ts

@@ -0,0 +1,37 @@
+import { useContext, useEffect } from 'react';
+import { CentralStorageContext } from './CentralStorageContext';
+import { Vehicle } from '../../@types/codegen';
+import useSearchItemBranch from '../../hooks/useSearchItemBranch';
+
+const useCentralStorage = (vehicle?: Vehicle | null) => {
+  const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
+
+  const connections = vehicle?.branch?.connections;
+  const branchId = centralStorageId
+    ? connections?.find((x) => x.id === centralStorageId)?.id
+    : undefined;
+
+  const { data, loading } = useSearchItemBranch(vehicle?.id, branchId);
+
+  useEffect(() => {
+    if ((connections?.length || 0) > 0) {
+      const match = centralStorageId
+        ? connections?.find((x) => x.id === centralStorageId)
+        : undefined;
+
+      if (!match) {
+        const first = connections?.[0];
+        if (first) {
+          setCentralStorageId(first.id);
+        }
+      }
+    }
+  }, [connections]);
+
+  return {
+    vehicle: (connections?.length || 0) > 0 ? data?.vehicle : vehicle,
+    loading,
+  };
+};
+
+export default useCentralStorage;

package/src/State/Path/PathContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export interface PathContextProps {
+  path: string;
+  previousPath?: string;
+  id?: string;
+  pushState: (id: string) => void;
+  replaceState: (id: string) => void;
+}
+
+export const PathContext = createContext<PathContextProps | undefined>(undefined);

package/src/State/Path/PathProvider.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
+import usePrevious from '../../hooks/usePrevious';
+
+import { PathContext, PathContextProps } from './PathContext';
+import reducer, { initialState, SET_PATH } from './reducer';
+
+const regexGuidAnyWhere =
+  /(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}/g;
+const POP_STATE = 'popstate';
+
+interface PathProviderProps {
+  children: React.ReactNode;
+}
+
+const PathProvider = ({ children }: PathProviderProps) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const previousPath = usePrevious(state.path);
+
+  useEffect(() => {
+    const onPopState = () => {
+      dispatch({ type: SET_PATH, path: window.location.pathname });
+    };
+
+    window.addEventListener(POP_STATE, onPopState);
+    return () => {
+      window.removeEventListener(POP_STATE, onPopState);
+    };
+  }, []);
+
+  const pushState = useCallback((path: string) => {
+    const h1 = window.location.hash;
+    history.pushState(null, '', `${path}`);
+    const h2 = window.location.hash;
+    if (h1.localeCompare(h2) !== 0) {
+      window.dispatchEvent(new HashChangeEvent('hashchange'));
+    }
+    dispatch({ type: SET_PATH, path });
+  }, []);
+
+  const replaceState = useCallback((path: string) => {
+    const h1 = window.location.hash;
+    history.replaceState(null, '', path);
+    const h2 = window.location.hash;
+    if (h1.localeCompare(h2) !== 0) {
+      window.dispatchEvent(new HashChangeEvent('hashchange'));
+    }
+    dispatch({ type: SET_PATH, path });
+  }, []);
+
+  const id = useMemo(() => state.path.match(regexGuidAnyWhere)?.pop(), [state.path]);
+
+  const value: PathContextProps = useMemo(
+    () => ({
+      ...state,
+      previousPath,
+      id,
+      pushState,
+      replaceState,
+    }),
+    [state]
+  );
+
+  return <PathContext.Provider value={value}>{children}</PathContext.Provider>;
+};
+
+export default PathProvider;

package/src/State/Path/reducer.ts

@@ -0,0 +1,30 @@
+import { BaseAction } from '../../@types/action';
+
+export const SET_PATH = 'SET_PATH';
+type SET_PATH_TYPE = BaseAction<typeof SET_PATH> & {
+  path: string;
+};
+
+type PathAction = SET_PATH_TYPE;
+
+interface PathState {
+  path: string;
+}
+
+export const initialState: PathState = {
+  path: window.location.pathname,
+};
+
+const pathReducer = (state: PathState, action: PathAction) => {
+  const next = { ...state };
+  switch (action.type) {
+    case SET_PATH:
+      next.path = action.path;
+      return next;
+
+    default:
+      throw new Error(`Unsupported action type`);
+  }
+};
+
+export default pathReducer;

package/src/State/Path/usePath.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { PathContext, PathContextProps } from './PathContext';
+
+const usePath = (): PathContextProps => {
+  const context = useContext(PathContext);
+
+  if (!context) {
+    throw new Error('usePath must be used within a PathProvider');
+  }
+
+  return context;
+};
+export default usePath;

package/src/State/RelatedSearch/RelatedSearchContext.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+import { Search } from '../../@types/search';
+
+export interface RelatedSearchContextProps {
+  moreLikeThisUrl: boolean;
+  loading: boolean;
+  response?: Search;
+  error: boolean;
+  fetchRelated: (searchParmas: URLSearchParams) => void;
+}
+
+export const RelatedSearchContext = createContext<RelatedSearchContextProps>({
+  moreLikeThisUrl: false,
+  loading: false,
+  error: false,
+  response: undefined,
+  fetchRelated: (_) => {},
+});

package/src/State/RelatedSearch/RelatedSearchProvider.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useCallback } from 'react';
+
+import { Search } from '../../@types/search';
+import { QueryFilter } from '../../@types/queryFilter';
+import useFetch from '../../hooks/useFetch';
+import { RelatedSearchContext } from './RelatedSearchContext';
+
+interface RelatedSearchProviderProps {
+  url: string;
+  urlMlt?: string;
+  apiKey?: string;
+  children: React.ReactNode;
+}
+
+const RelatedSearchProvider = ({ url, urlMlt, apiKey, children }: RelatedSearchProviderProps) => {
+  const [queryFilter, setQueryFilter] = useState<QueryFilter>();
+
+  const query = queryFilter?.searchParams.toString();
+  const {
+    loading,
+    data: response,
+    error,
+  } = useFetch<Search>(
+    `${urlMlt || url}${query ? `?${query}` : ''}`,
+    {
+      headers: apiKey
+        ? {
+            'x-api-key': apiKey,
+          }
+        : {},
+    },
+    !queryFilter
+  );
+
+  const fetchRelated = useCallback(
+    (searchParams: URLSearchParams) =>
+      setQueryFilter({
+        searchParams,
+      }),
+    []
+  );
+
+  const value = {
+    moreLikeThisUrl: !!urlMlt,
+    loading,
+    error,
+    response,
+    queryFilter,
+    fetchRelated,
+  };
+
+  return <RelatedSearchContext.Provider value={value}>{children}</RelatedSearchContext.Provider>;
+};
+
+export default RelatedSearchProvider;

package/src/State/RelatedSearch/useRelatedSearch.ts

@@ -0,0 +1,20 @@
+import { useContext, useEffect } from 'react';
+
+import { RelatedSearchContext } from './RelatedSearchContext';
+
+const useRelatedSearch = (id: string) => {
+  const data = useContext(RelatedSearchContext);
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams();
+    searchParams.set('hits', '3');
+    if (data.moreLikeThisUrl && id) {
+      searchParams.set('id', id);
+    }
+    data.fetchRelated(searchParams);
+  }, [id]);
+
+  return data;
+};
+
+export default useRelatedSearch;

package/src/State/Search/SearchContext.ts

@@ -0,0 +1,27 @@
+import { createContext } from 'react';
+import { Facet, Document, Search } from '../../@types/search';
+import { QueryFilter } from '../../@types/queryFilter';
+
+export interface SearchContextProps {
+  loading: boolean;
+  response?: Search;
+  error: boolean;
+  documents?: Document[];
+  initialFacets?: Facet[];
+  queryFilter: QueryFilter;
+  onFilterUpdate: (nextQuery: string) => void;
+  onLoadMore: () => void;
+  onInitialize: (initialQueryParams?: URLSearchParams) => void;
+}
+
+export const SearchContext = createContext<SearchContextProps>({
+  loading: false,
+  error: false,
+  response: undefined,
+  documents: undefined,
+  initialFacets: undefined,
+  queryFilter: { searchParams: new URLSearchParams() },
+  onFilterUpdate: (_) => {},
+  onLoadMore: () => {},
+  onInitialize: (_) => {},
+});