Skip to content

Commit 2ea65ae

Browse files
brbcodingbrbcoding
committed
add basePath for image assets
1 parent 1baeaba commit 2ea65ae

File tree

6 files changed

+95
-90
lines changed

6 files changed

+95
-90
lines changed

Diff for: ‎src/app/components/ModalPopup/index.tsx

+50-49
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,60 @@
1-
import './index.scss';
1+
import "./index.scss";
22

3-
import { ReactNode, useEffect } from 'react';
4-
import ReactModal from 'react-modal';
3+
import { ReactNode, useEffect } from "react";
4+
import ReactModal from "react-modal";
55
import Image from "next/image";
66

7-
7+
import { useBasePath } from "@/app/utils/useBasePath";
88

99
interface ModalPopupProps {
10-
isOpen: boolean;
11-
onClose: () => void;
12-
children: ReactNode;
13-
styles?: {
14-
width?: string;
15-
height?: string;
16-
};
10+
isOpen: boolean;
11+
onClose: () => void;
12+
children: ReactNode;
13+
styles?: {
14+
width?: string;
15+
height?: string;
16+
};
1717
}
1818

1919
const ModalPopup = ({ isOpen, onClose, children, styles }: ModalPopupProps) => {
20-
const parentId = "main-app";
21-
22-
const customStyles = {
23-
overlay: {
24-
backgroundColor: 'rgba(0, 0, 0, 0.6)',
25-
zIndex: 1000,
26-
},
27-
content: {
28-
padding: 0,
29-
width: styles?.width || '80%',
30-
height: styles?.height || '80%',
31-
//to center the modal
32-
inset: '0px',
33-
margin: 'auto',
34-
},
35-
};
36-
37-
useEffect(() => {
38-
ReactModal.setAppElement(`#${parentId}`);
39-
}, []);
40-
41-
return (
42-
<ReactModal
43-
isOpen={isOpen}
44-
onRequestClose={onClose}
45-
style={customStyles}
46-
parentSelector={() => document.getElementById(parentId) || document.body}
47-
>
48-
<div className="comp-modal-popup">
49-
<div className="icon-close" onClick={onClose}>
50-
{/* <i className="fa fa-times"></i> */}
51-
<Image src="/icons/close.svg" alt="close" width={20} height={20} />
52-
</div>
53-
{children}
54-
</div>
55-
</ReactModal>
56-
);
20+
const parentId = "main-app";
21+
22+
const customStyles = {
23+
overlay: {
24+
backgroundColor: "rgba(0, 0, 0, 0.6)",
25+
zIndex: 1000,
26+
},
27+
content: {
28+
padding: 0,
29+
width: styles?.width || "80%",
30+
height: styles?.height || "80%",
31+
//to center the modal
32+
inset: "0px",
33+
margin: "auto",
34+
},
35+
};
36+
37+
const closeSvg = useBasePath("/icons/close.svg");
38+
39+
useEffect(() => {
40+
ReactModal.setAppElement(`#${parentId}`);
41+
}, []);
42+
43+
return (
44+
<ReactModal
45+
isOpen={isOpen}
46+
onRequestClose={onClose}
47+
style={customStyles}
48+
parentSelector={() => document.getElementById(parentId) || document.body}
49+
>
50+
<div className="comp-modal-popup">
51+
<div className="icon-close" onClick={onClose}>
52+
<Image src={closeSvg} alt="close" width={20} height={20} />
53+
</div>
54+
{children}
55+
</div>
56+
</ReactModal>
57+
);
5758
};
5859

59-
export default ModalPopup;
60+
export default ModalPopup;

Diff for: ‎src/app/page-components/PgCardPanel/PgCardHeader.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import './PgCardHeader.scss';
22

33
import { useState } from 'react';
4+
import { useBasePath } from "@/app/utils/useBasePath";
45

56
import TooltipIcon from '../../components/TooltipIcon';
67
import { TooltipIconType } from '../../components/TooltipIcon';
@@ -23,6 +24,7 @@ enum HeaderIcon {
2324
const PgCardHeader = ({ headerTitle, infoIconContent, infoIconContentType, showCopyIcon, showSwitchViewIcon, handleIconClick }: PgCardHeaderProps) => {
2425

2526
const [copied, setCopied] = useState(false);
27+
const basePath = useBasePath;
2628

2729
const handleClick = (icon: HeaderIcon) => {
2830
if (handleIconClick) {
@@ -45,21 +47,21 @@ const PgCardHeader = ({ headerTitle, infoIconContent, infoIconContentType, showC
4547
{headerTitle}
4648

4749
{infoIconContent && (
48-
<TooltipIcon imgSrc="/icons/info.svg" imgWidth="0.875rem" imgHeight="0.875rem"
50+
<TooltipIcon imgSrc={basePath("/icons/info.svg")} imgWidth="0.875rem" imgHeight="0.875rem"
4951
title={infoIconContent} titleType={infoIconContentType} />
5052
)}
5153

5254

5355
</div>
5456
<div className="header-buttons">
55-
{showSwitchViewIcon && <TooltipIcon imgSrc="/icons/columns.svg" imgWidth="1.25rem" imgHeight="1.25rem"
57+
{showSwitchViewIcon && <TooltipIcon imgSrc={basePath("/icons/columns.svg")} imgWidth="1.25rem" imgHeight="1.25rem"
5658
title="Switch View"
5759
onClick={() => handleClick(HeaderIcon.switchView)}
5860
/>
5961
}
6062

6163
{showCopyIcon &&
62-
(copied ? <TooltipIcon imgSrc="/icons/check.svg" imgWidth="1.25rem" imgHeight="1.25rem" title="Copied" /> : <TooltipIcon imgSrc="/icons/copy.svg" imgWidth="1.25rem" imgHeight="1.25rem" title="Copy" onClick={() => handleClick(HeaderIcon.copy)} />)}
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)} />)}
6365

6466
</div>
6567
</div>

Diff for: ‎src/app/page-components/PgMainHeader/index.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { QueryResultFormat } from '@/app/constants';
1414
import { IconButtonType } from '@/app/components/IconButton';
1515
import Loader from "@/app/components/Loader";
1616
import { infoToast } from '@/app/utils/toast-util';
17+
import { useBasePath } from "@/app/utils/useBasePath";
1718

1819
const logoImgPath = '/redis.png';
1920
const labels = {
@@ -97,7 +98,7 @@ const PgMainHeader = () => {
9798
} = usePlaygroundContext();
9899

99100
const [isRunButtonDisabled, setIsRunButtonDisabled] = useState(false);
100-
101+
const basePath = useBasePath;
101102

102103
const handleRunQuery = async () => {
103104
setQueryResponse(null);
@@ -197,7 +198,7 @@ const PgMainHeader = () => {
197198
return (
198199
<div className="pg-main-header-container">
199200
<div className="header-logo">
200-
<Image src={logoImgPath} alt="logo" width={84} height={28} />
201+
<Image src={basePath(logoImgPath)} alt="logo" width={84} height={28} />
201202
</div>
202203
<div className="header-right-container">
203204
<div className="header-right-top">
@@ -206,15 +207,15 @@ const PgMainHeader = () => {
206207
</div>
207208
<div className="header-buttons">
208209
<IconButton buttonLbl={labels.buttonRun}
209-
imgSrc='/icons/play.svg' imgWidth="1.5rem" imgHeight="1.5rem"
210+
imgSrc={basePath('/icons/play.svg')} imgWidth="1.5rem" imgHeight="1.5rem"
210211
buttonCls="header-run-btn" onClick={handleRunQuery} buttonType={IconButtonType.SUCCESS} isDisabled={isRunButtonDisabled} />
211212
<IconButton buttonLbl={labels.buttonReset}
212-
imgSrc='/icons/redo.svg' imgWidth="1.25rem" imgHeight="1.25rem"
213-
imgHoverSrc='/icons/redo-hover.svg'
213+
imgSrc={basePath('/icons/redo.svg')} imgWidth="1.25rem" imgHeight="1.25rem"
214+
imgHoverSrc={basePath('/icons/redo-hover.svg')}
214215
buttonCls="header-reset-btn" onClick={handleResetQuery} />
215216
<IconButton buttonLbl={labels.buttonShare}
216-
imgSrc='/icons/arrow-up-right.svg' imgWidth="1.25rem" imgHeight="1.25rem"
217-
imgHoverSrc='/icons/arrow-up-right-hover.svg'
217+
imgSrc={basePath('/icons/arrow-up-right.svg')} imgWidth="1.25rem" imgHeight="1.25rem"
218+
imgHoverSrc={basePath('/icons/arrow-up-right-hover.svg')}
218219
buttonCls="header-share-btn" onClick={handleShareQuery} />
219220
</div>
220221
</div>

Diff for: ‎src/app/page-components/PgQueryTemplate/index.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { usePlaygroundContext } from "../PlaygroundContext";
99
import Loader from "@/app/components/Loader";
1010
import ImageIcon from "@/app/components/ImageIcon";
1111
import TooltipIcon from '@/app/components/TooltipIcon';
12+
import { useBasePath } from "@/app/utils/useBasePath";
1213

1314
interface IQueryTemplateProps {
1415
onClose?: () => void;
@@ -22,6 +23,7 @@ const highlightClassName = "pg-highlighted-text";
2223

2324
const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
2425
const { setSelectedQuery, queryTemplateData, setQueryTemplateData, fnLoadQueryTemplateData } = usePlaygroundContext();
26+
const basePath = useBasePath;
2527

2628
const [filteredTemplateData, setFilteredTemplateData] = useState<IQueryTemplateData[]>(queryTemplateData);
2729
const [isShowLoader, setIsShowLoader] = useState(false);
@@ -105,10 +107,10 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
105107
<div className="query-search-bar-container">
106108
<div className="query-search-bar">
107109
{/* <i className="fa fa-search"></i> */}
108-
<ImageIcon imgSrc="/icons/search.svg" alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
110+
<ImageIcon imgSrc={basePath("/icons/search.svg")} alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
109111
<input type="text" placeholder={labels.searchPlaceholder} onChange={handleSearchChange} className="query-search-input" value={searchValue} />
110112
{/* {searchValue && <i className="fa fa-times clear-icon" onClick={handleClearSearch}></i>} */}
111-
{searchValue && <TooltipIcon imgSrc="/icons/close.svg" className='clear-icon' imgWidth="1rem" imgHeight="1rem" title="Clear" onClick={handleClearSearch} />}
113+
{searchValue && <TooltipIcon imgSrc={basePath("/icons/close.svg")} className='clear-icon' imgWidth="1rem" imgHeight="1rem" title="Clear" onClick={handleClearSearch} />}
112114
</div>
113115
</div>
114116
<div className="query-sidebar-content">
@@ -117,7 +119,7 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
117119
<div className="query-sidebar-item-label">
118120
{queryTmpl.category}
119121
</div>
120-
<ImageIcon imgSrc="/icons/arrow-right-slim-red.svg" alt={queryTmpl.category} />
122+
<ImageIcon imgSrc={basePath("/icons/arrow-right-slim-red.svg")} alt={queryTmpl.category} />
121123
</div>
122124

123125
))}

Diff for: ‎src/app/page-components/PgSidebar/index.tsx

+23-28
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
77
import { usePlaygroundContext } from "../PlaygroundContext";
88
import ModalPopup from '@/app/components/ModalPopup';
99
import ImageIcon from "@/app/components/ImageIcon";
10+
import { useBasePath } from "@/app/utils/useBasePath";
1011

1112
import PgQueryTemplate from '../PgQueryTemplate';
1213

@@ -17,32 +18,13 @@ const labels = {
1718
replayTour: "Replay Tour"
1819
}
1920

20-
const linkItems = [
21-
{
22-
label: "Docs",
23-
//icon: "fa fa-book",
24-
url: "https://redis.io/docs/latest/",
25-
image: "/icons/profiler.svg"
26-
},
27-
{
28-
label: "Redis University",
29-
//icon: "fa fa-user-graduate",
30-
url: "https://university.redis.io/",
31-
image: "/icons/university.svg"
32-
},
33-
{
34-
label: "Redis Cloud",
35-
//icon: "fa fa-cloud",
36-
url: "https://cloud.redis.io/",
37-
image: "/icons/cloud-midnight.svg"
38-
},
39-
]
40-
4121
const PgSidebar = () => {
4222
const { selectedQuery, setSelectedQuery, fnGetSelectedQueryTemplate, runTour, setRunTour, fnSetTourCompleted } = usePlaygroundContext();
4323
const [selectedCategory, setSelectedCategory] = useState<IQueryTemplateData | null>(null);
4424
const [modalIsOpen, setModalIsOpen] = useState(false);
4525

26+
const basePath = useBasePath;
27+
4628
useEffect(() => {
4729
if (selectedQuery) {
4830
const result = fnGetSelectedQueryTemplate();
@@ -60,6 +42,23 @@ const PgSidebar = () => {
6042
setRunTour(true);
6143
}
6244

45+
const linkItems = [
46+
{
47+
label: "Docs",
48+
url: "https://redis.io/docs/latest/",
49+
image: basePath("/icons/profiler.svg")
50+
},
51+
{
52+
label: "Redis University",
53+
url: "https://university.redis.io/",
54+
image: basePath("/icons/university.svg")
55+
},
56+
{
57+
label: "Redis Cloud",
58+
url: "https://cloud.redis.io/",
59+
image: basePath("/icons/cloud-midnight.svg")
60+
},
61+
]
6362

6463
return <div className="pg-sidebar">
6564

@@ -69,8 +68,7 @@ const PgSidebar = () => {
6968
</div>
7069
<div className="pg-list-item anime-line-hover" onClick={() => setModalIsOpen(true)}>
7170
<div className="pg-list-item-icon">
72-
{/* <i className="fa fa-arrows-up-down-left-right"></i> */}
73-
<ImageIcon imgSrc="/icons/move.svg" alt="move" imgWidth="1rem" imgHeight="1rem" />
71+
<ImageIcon imgSrc={basePath("/icons/move.svg")} alt="move" imgWidth="1rem" imgHeight="1rem" />
7472
</div>
7573
<div className="pg-list-item-label select-query-label">
7674
{labels.selectQuery}
@@ -91,8 +89,7 @@ const PgSidebar = () => {
9189
onClick={() => handleQueryItemClick(item.queryId, selectedCategory?.categoryId)}>
9290

9391
<div className="pg-list-item-icon">
94-
{/* <i className="fa fa-arrow-right"></i> */}
95-
<ImageIcon imgSrc="/icons/arrow-right-slim.svg" alt={item.label} imgWidth="1rem" imgHeight="1rem" />
92+
<ImageIcon imgSrc={basePath("/icons/arrow-right-slim.svg")} alt={item.label} imgWidth="1rem" imgHeight="1rem" />
9693
</div>
9794
<div className="pg-list-item-label">
9895
{item.label}
@@ -113,7 +110,6 @@ const PgSidebar = () => {
113110
{linkItems.map(item => (
114111
<div className="pg-list-item anime-line-hover" key={item.label} onClick={() => window.open(item.url, '_blank', 'noopener,noreferrer')}>
115112
<div className="pg-list-item-icon">
116-
{/* <i className={item.icon}></i> */}
117113
<ImageIcon imgSrc={item.image} alt={item.label} imgWidth="1rem" imgHeight="1rem" />
118114
</div>
119115
<div className="pg-list-item-label" >
@@ -124,8 +120,7 @@ const PgSidebar = () => {
124120

125121
<div className="pg-list-item anime-line-hover" key="replay-tour" onClick={handleReplayTourClick}>
126122
<div className="pg-list-item-icon">
127-
{/* <i className="fa fa-rotate"></i> */}
128-
<ImageIcon imgSrc="/icons/refresh.svg" alt="rotate" imgWidth="1rem" imgHeight="1rem" />
123+
<ImageIcon imgSrc={basePath("/icons/refresh.svg")} alt="rotate" imgWidth="1rem" imgHeight="1rem" />
129124
</div>
130125
<div className="pg-list-item-label pg-replay-tour-lbl">
131126
{labels.replayTour}

Diff for: ‎src/app/utils/useBasePath.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function useBasePath(path: string) {
2+
const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
3+
return `${base}${path}`;
4+
}

0 commit comments

Comments
 (0)