-
Notifications
You must be signed in to change notification settings - Fork 27
/
project-extension-image-regex.tsx
121 lines (110 loc) · 3.63 KB
/
project-extension-image-regex.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import {
type ComponentType,
type ReactNode,
createContext,
useContext,
useEffect,
} from 'react';
import { useQuery } from '@apollo/client/react';
import warning from 'tiny-warning';
import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
import { reportErrorToSentry } from '@commercetools-frontend/sentry';
import type {
TFetchProjectExtensionImageRegexQuery,
TFetchProjectExtensionImageRegexQueryVariables,
TImageRegexOptions,
} from '../../types/generated/settings';
import getDisplayName from '../../utils/get-display-name';
import FetchProjectExtensionImageRegex from './fetch-project-extension-image-regex.settings.graphql';
export type TImageRegexContext = {
isLoading: boolean;
imageRegex?: {
small?: Pick<TImageRegexOptions, 'flag' | 'replace' | 'search'> | null;
thumb?: Pick<TImageRegexOptions, 'flag' | 'replace' | 'search'> | null;
} | null;
};
type ProviderProps = {
skip?: boolean;
children: ReactNode;
};
type ConsumerProps = {
render: (imageRegex: TImageRegexContext) => ReactNode;
children?: never;
};
const useWarning = (condition: boolean, message: string) => {
useEffect(() => {
warning(condition, message);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
};
const Context = createContext<TImageRegexContext>({ isLoading: false });
const useProjectExtensionImageRegex = () => {
const { isLoading, imageRegex } = useContext(Context);
return { isLoading, imageRegex };
};
const ProjectExtensionProviderForImageRegex = (props: ProviderProps) => {
const { loading, data } = useQuery<
TFetchProjectExtensionImageRegexQuery,
TFetchProjectExtensionImageRegexQueryVariables
>(FetchProjectExtensionImageRegex, {
skip: props.skip,
onError: reportErrorToSentry,
context: { target: GRAPHQL_TARGETS.SETTINGS_SERVICE },
});
return (
<Context.Provider
value={{
isLoading: loading,
imageRegex:
data && data.projectExtension && data.projectExtension.imageRegex,
}}
>
{props.children}
</Context.Provider>
);
};
ProjectExtensionProviderForImageRegex.displayName =
'ProjectExtensionProviderForImageRegex';
const GetProjectExtensionImageRegex = (props: ConsumerProps) => {
useWarning(
false,
`@commercetools-frontend/application-shell-connectors: It is not recommended to use the 'GetProjectExtensionImageRegex' anymore. Please use the 'useProjectExtensionImageRegex' hook instead.`
);
return (
<Context.Consumer>
{(imageRegexContext) => props.render(imageRegexContext)}
</Context.Consumer>
);
};
GetProjectExtensionImageRegex.displayName = 'GetProjectExtensionImageRegex';
function withProjectExtensionImageRegex<Props extends {}>(
propKey = 'imageRegexData'
) {
return (Component: ComponentType<Props>) => {
const WrappedComponent = (props: Props) => {
useWarning(
false,
`@commercetools-frontend/application-shell-connectors: It is not recommended to use the 'withProjectExtensionImageRegex' high order component anymore. Please use the 'useProjectExtensionImageRegex' hook instead.`
);
const imageregexContext = useProjectExtensionImageRegex();
return (
<GetProjectExtensionImageRegex
render={() => (
<Component {...props} {...{ [propKey]: imageregexContext }} />
)}
/>
);
};
WrappedComponent.displayName = `withProjectExtensionImageRegex(${getDisplayName<Props>(
Component
)})`;
return WrappedComponent;
};
}
// Exports
export {
GetProjectExtensionImageRegex,
ProjectExtensionProviderForImageRegex,
withProjectExtensionImageRegex,
useProjectExtensionImageRegex,
};