Skip to content

Commit 635b3ca

Browse files
brbcodingbrbcoding
authored
Merge pull request #4 from redis-developer/hotfix/basepath-assets
fix basePath calls
2 parents bc37501 + 8184527 commit 635b3ca

File tree

7 files changed

+47
-27
lines changed

7 files changed

+47
-27
lines changed

‎next.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
22
enabled: false, //process.env.ANALYZE === 'true',
33
});
44

5-
const isProd = process.env.VERCEL_ENV === "production"; // or NODE_ENV === 'production'
5+
const isProd = process.env.VERCEL_ENV === "production";
66

77
module.exports = withBundleAnalyzer({
88
swcMinify: true,

‎src/app/components/ModalPopup/index.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface ModalPopupProps {
1818

1919
const ModalPopup = ({ isOpen, onClose, children, styles }: ModalPopupProps) => {
2020
const parentId = "main-app";
21+
const closeIconPath = useBasePath("/icons/close.svg");
2122

2223
const customStyles = {
2324
overlay: {
@@ -34,8 +35,6 @@ const ModalPopup = ({ isOpen, onClose, children, styles }: ModalPopupProps) => {
3435
},
3536
};
3637

37-
const closeSvg = useBasePath("/icons/close.svg");
38-
3938
useEffect(() => {
4039
ReactModal.setAppElement(`#${parentId}`);
4140
}, []);
@@ -49,7 +48,7 @@ const ModalPopup = ({ isOpen, onClose, children, styles }: ModalPopupProps) => {
4948
>
5049
<div className="comp-modal-popup">
5150
<div className="icon-close" onClick={onClose}>
52-
<Image src={closeSvg} alt="close" width={20} height={20} />
51+
<Image src={closeIconPath} alt="close" width={20} height={20} />
5352
</div>
5453
{children}
5554
</div>

‎src/app/page-components/PgCardPanel/PgCardHeader.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,13 @@ enum HeaderIcon {
2222

2323

2424
const PgCardHeader = ({ headerTitle, infoIconContent, infoIconContentType, showCopyIcon, showSwitchViewIcon, handleIconClick }: PgCardHeaderProps) => {
25-
2625
const [copied, setCopied] = useState(false);
27-
const basePath = useBasePath;
26+
27+
// Pre-compute all paths at the top level
28+
const infoIconPath = useBasePath("/icons/info.svg");
29+
const columnsIconPath = useBasePath("/icons/columns.svg");
30+
const checkIconPath = useBasePath("/icons/check.svg");
31+
const copyIconPath = useBasePath("/icons/copy.svg");
2832

2933
const handleClick = (icon: HeaderIcon) => {
3034
if (handleIconClick) {
@@ -47,21 +51,21 @@ const PgCardHeader = ({ headerTitle, infoIconContent, infoIconContentType, showC
4751
{headerTitle}
4852

4953
{infoIconContent && (
50-
<TooltipIcon imgSrc={basePath("/icons/info.svg")} imgWidth="0.875rem" imgHeight="0.875rem"
54+
<TooltipIcon imgSrc={infoIconPath} imgWidth="0.875rem" imgHeight="0.875rem"
5155
title={infoIconContent} titleType={infoIconContentType} />
5256
)}
5357

5458

5559
</div>
5660
<div className="header-buttons">
57-
{showSwitchViewIcon && <TooltipIcon imgSrc={basePath("/icons/columns.svg")} imgWidth="1.25rem" imgHeight="1.25rem"
61+
{showSwitchViewIcon && <TooltipIcon imgSrc={columnsIconPath} imgWidth="1.25rem" imgHeight="1.25rem"
5862
title="Switch View"
5963
onClick={() => handleClick(HeaderIcon.switchView)}
6064
/>
6165
}
6266

6367
{showCopyIcon &&
64-
(copied ? <TooltipIcon imgSrc={basePath("/icons/check.svg")} imgWidth="1.25rem" imgHeight="1.25rem" title="Copied" /> : <TooltipIcon imgSrc={basePath("/icons/copy.svg")} imgWidth="1.25rem" imgHeight="1.25rem" title="Copy" onClick={() => handleClick(HeaderIcon.copy)} />)}
68+
(copied ? <TooltipIcon imgSrc={checkIconPath} imgWidth="1.25rem" imgHeight="1.25rem" title="Copied" /> : <TooltipIcon imgSrc={copyIconPath} imgWidth="1.25rem" imgHeight="1.25rem" title="Copy" onClick={() => handleClick(HeaderIcon.copy)} />)}
6569

6670
</div>
6771
</div>

‎src/app/page-components/PgMainHeader/index.tsx

+14-7
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,14 @@ const PgMainHeader = () => {
9898
} = usePlaygroundContext();
9999

100100
const [isRunButtonDisabled, setIsRunButtonDisabled] = useState(false);
101-
const basePath = useBasePath;
101+
102+
// Pre-compute all paths at the top level
103+
const logoPath = useBasePath(logoImgPath);
104+
const playIconPath = useBasePath('/icons/play.svg');
105+
const redoIconPath = useBasePath('/icons/redo.svg');
106+
const redoHoverPath = useBasePath('/icons/redo-hover.svg');
107+
const arrowUpRightPath = useBasePath('/icons/arrow-up-right.svg');
108+
const arrowUpRightHoverPath = useBasePath('/icons/arrow-up-right-hover.svg');
102109

103110
const handleRunQuery = async () => {
104111
setQueryResponse(null);
@@ -198,7 +205,7 @@ const PgMainHeader = () => {
198205
return (
199206
<div className="pg-main-header-container">
200207
<div className="header-logo">
201-
<Image src={basePath(logoImgPath)} alt="logo" width={84} height={28} />
208+
<Image src={logoPath} alt="logo" width={84} height={28} />
202209
</div>
203210
<div className="header-right-container">
204211
<div className="header-right-top">
@@ -207,15 +214,15 @@ const PgMainHeader = () => {
207214
</div>
208215
<div className="header-buttons">
209216
<IconButton buttonLbl={labels.buttonRun}
210-
imgSrc={basePath('/icons/play.svg')} imgWidth="1.5rem" imgHeight="1.5rem"
217+
imgSrc={playIconPath} imgWidth="1.5rem" imgHeight="1.5rem"
211218
buttonCls="header-run-btn" onClick={handleRunQuery} buttonType={IconButtonType.SUCCESS} isDisabled={isRunButtonDisabled} />
212219
<IconButton buttonLbl={labels.buttonReset}
213-
imgSrc={basePath('/icons/redo.svg')} imgWidth="1.25rem" imgHeight="1.25rem"
214-
imgHoverSrc={basePath('/icons/redo-hover.svg')}
220+
imgSrc={redoIconPath} imgWidth="1.25rem" imgHeight="1.25rem"
221+
imgHoverSrc={redoHoverPath}
215222
buttonCls="header-reset-btn" onClick={handleResetQuery} />
216223
<IconButton buttonLbl={labels.buttonShare}
217-
imgSrc={basePath('/icons/arrow-up-right.svg')} imgWidth="1.25rem" imgHeight="1.25rem"
218-
imgHoverSrc={basePath('/icons/arrow-up-right-hover.svg')}
224+
imgSrc={arrowUpRightPath} imgWidth="1.25rem" imgHeight="1.25rem"
225+
imgHoverSrc={arrowUpRightHoverPath}
219226
buttonCls="header-share-btn" onClick={handleShareQuery} />
220227
</div>
221228
</div>

‎src/app/page-components/PgQueryTemplate/index.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,16 @@ const highlightClassName = "pg-highlighted-text";
2323

2424
const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
2525
const { setSelectedQuery, queryTemplateData, setQueryTemplateData, fnLoadQueryTemplateData } = usePlaygroundContext();
26-
const basePath = useBasePath;
2726

2827
const [filteredTemplateData, setFilteredTemplateData] = useState<IQueryTemplateData[]>(queryTemplateData);
2928
const [isShowLoader, setIsShowLoader] = useState(false);
3029
const [searchValue, setSearchValue] = useState("");
3130

31+
// Pre-compute all paths at the top level
32+
const searchIconPath = useBasePath("/icons/search.svg");
33+
const closeIconPath = useBasePath("/icons/close.svg");
34+
const arrowRightSlimRedPath = useBasePath("/icons/arrow-right-slim-red.svg");
35+
3236
useEffect(() => {
3337
if (queryTemplateData?.length === 0) {
3438
const fetchQueryTemplateData = async () => {
@@ -107,10 +111,10 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
107111
<div className="query-search-bar-container">
108112
<div className="query-search-bar">
109113
{/* <i className="fa fa-search"></i> */}
110-
<ImageIcon imgSrc={basePath("/icons/search.svg")} alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
114+
<ImageIcon imgSrc={searchIconPath} alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
111115
<input type="text" placeholder={labels.searchPlaceholder} onChange={handleSearchChange} className="query-search-input" value={searchValue} />
112116
{/* {searchValue && <i className="fa fa-times clear-icon" onClick={handleClearSearch}></i>} */}
113-
{searchValue && <TooltipIcon imgSrc={basePath("/icons/close.svg")} className='clear-icon' imgWidth="1rem" imgHeight="1rem" title="Clear" onClick={handleClearSearch} />}
117+
{searchValue && <TooltipIcon imgSrc={closeIconPath} className='clear-icon' imgWidth="1rem" imgHeight="1rem" title="Clear" onClick={handleClearSearch} />}
114118
</div>
115119
</div>
116120
<div className="query-sidebar-content">
@@ -119,7 +123,7 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
119123
<div className="query-sidebar-item-label">
120124
{queryTmpl.category}
121125
</div>
122-
<ImageIcon imgSrc={basePath("/icons/arrow-right-slim-red.svg")} alt={queryTmpl.category} />
126+
<ImageIcon imgSrc={arrowRightSlimRedPath} alt={queryTmpl.category} />
123127
</div>
124128

125129
))}

‎src/app/page-components/PgSidebar/index.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ const PgSidebar = () => {
2323
const [selectedCategory, setSelectedCategory] = useState<IQueryTemplateData | null>(null);
2424
const [modalIsOpen, setModalIsOpen] = useState(false);
2525

26-
const basePath = useBasePath;
26+
const moveIconPath = useBasePath("/icons/move.svg");
27+
const arrowRightSlimPath = useBasePath("/icons/arrow-right-slim.svg");
28+
const refreshIconPath = useBasePath("/icons/refresh.svg");
29+
const profilerIconPath = useBasePath("/icons/profiler.svg");
30+
const universityIconPath = useBasePath("/icons/university.svg");
31+
const cloudIconPath = useBasePath("/icons/cloud-midnight.svg");
2732

2833
useEffect(() => {
2934
if (selectedQuery) {
@@ -46,17 +51,17 @@ const PgSidebar = () => {
4651
{
4752
label: "Docs",
4853
url: "https://redis.io/docs/latest/",
49-
image: basePath("/icons/profiler.svg")
54+
image: profilerIconPath
5055
},
5156
{
5257
label: "Redis University",
5358
url: "https://university.redis.io/",
54-
image: basePath("/icons/university.svg")
59+
image: universityIconPath
5560
},
5661
{
5762
label: "Redis Cloud",
5863
url: "https://cloud.redis.io/",
59-
image: basePath("/icons/cloud-midnight.svg")
64+
image: cloudIconPath
6065
},
6166
]
6267

@@ -68,7 +73,7 @@ const PgSidebar = () => {
6873
</div>
6974
<div className="pg-list-item anime-line-hover" onClick={() => setModalIsOpen(true)}>
7075
<div className="pg-list-item-icon">
71-
<ImageIcon imgSrc={basePath("/icons/move.svg")} alt="move" imgWidth="1rem" imgHeight="1rem" />
76+
<ImageIcon imgSrc={moveIconPath} alt="move" imgWidth="1rem" imgHeight="1rem" />
7277
</div>
7378
<div className="pg-list-item-label select-query-label">
7479
{labels.selectQuery}
@@ -89,7 +94,7 @@ const PgSidebar = () => {
8994
onClick={() => handleQueryItemClick(item.queryId, selectedCategory?.categoryId)}>
9095

9196
<div className="pg-list-item-icon">
92-
<ImageIcon imgSrc={basePath("/icons/arrow-right-slim.svg")} alt={item.label} imgWidth="1rem" imgHeight="1rem" />
97+
<ImageIcon imgSrc={arrowRightSlimPath} alt={item.label} imgWidth="1rem" imgHeight="1rem" />
9398
</div>
9499
<div className="pg-list-item-label">
95100
{item.label}
@@ -120,7 +125,7 @@ const PgSidebar = () => {
120125

121126
<div className="pg-list-item anime-line-hover" key="replay-tour" onClick={handleReplayTourClick}>
122127
<div className="pg-list-item-icon">
123-
<ImageIcon imgSrc={basePath("/icons/refresh.svg")} alt="rotate" imgWidth="1rem" imgHeight="1rem" />
128+
<ImageIcon imgSrc={refreshIconPath} alt="rotate" imgWidth="1rem" imgHeight="1rem" />
124129
</div>
125130
<div className="pg-list-item-label pg-replay-tour-lbl">
126131
{labels.replayTour}

‎src/app/utils/useBasePath.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export function useBasePath(path: string) {
22
const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
3+
console.log("base", base);
34
return `${base}${path}`;
45
}

0 commit comments

Comments
 (0)