Skip to content

Commit 9588879

Browse files
atapasatapas
committed
feat: Refactored the code further to move the Shape listing in a separate util component
1 parent 30f0f81 commit 9588879

3 files changed

Lines changed: 142 additions & 122 deletions

File tree

‎components/core/App.js‎

Lines changed: 6 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,15 @@ import { harperFetch } from "../../utils/HarperFetch";
66

77
// Dummy Shape Data
88
// import { shapes } from "../../data/shapes";
9-
10-
// Toast
11-
import toast from "react-hot-toast";
12-
13-
// Clip-Path
14-
const Shape = dynamic(import("react-clip-path"), { ssr: false });
15-
16-
// Switch
17-
import Switch from "react-switch";
18-
199
// loader
2010
import Loader from "react-loader-spinner";
2111

22-
import {
23-
ShapeCards,
24-
ShapeCard,
25-
ShapeName,
26-
ShapePallete,
27-
ShapeDetailsItems,
28-
ShapeCardSwitch,
29-
ShapeActions,
30-
ShapeCardHeader,
31-
CopyIcon,
32-
DownloadIcon,
33-
LikeIcon,
34-
} from "../utils/StyledComponents";
12+
// ShapeListing
13+
import { ShapeList } from '..';
3514

3615
const App = (props) => {
3716
const [data, setData] = useState([]);
38-
const [loading, setLoading] = useState(false);
17+
const [loading, setLoading] = useState(true);
3918

4019
useEffect(async () => {
4120
setData([]);
@@ -46,48 +25,19 @@ const App = (props) => {
4625
operation: "sql",
4726
sql: "SELECT * FROM tryshape.shapes",
4827
});
49-
5028
console.log(shapes);
5129
let modifiedShapes = shapes.map((shape, index) => {
5230
shape.showAdvanced = false;
5331
return shape;
5432
});
33+
5534
console.log(modifiedShapes);
5635

5736
await setData(modifiedShapes);
5837
setLoading(false);
5938
}, []);
6039

61-
const handleSwicth = (shapeName) => {
62-
console.log(shapeName);
63-
64-
let modifiedShapes = data.map((shape, index) => {
65-
if (shape.name === shapeName) {
66-
return {
67-
...shape,
68-
showAdvanced: !shape.showAdvanced,
69-
};
70-
}
71-
return shape;
72-
});
73-
console.log(modifiedShapes);
74-
setData(...[modifiedShapes]);
75-
};
76-
77-
const getShapeFileName = (name) => {
78-
return name.split(" ").join("-");
79-
};
80-
81-
async function performCopy(event, formula) {
82-
event.preventDefault();
83-
try {
84-
await navigator.clipboard.writeText(formula);
85-
toast.success("Successfully Copied!");
86-
console.log("The clip-path formula copied to clipboard");
87-
} catch (err) {
88-
console.error("Failed to copy: ", err);
89-
}
90-
}
40+
9141

9242
return (
9343
<>
@@ -100,72 +50,7 @@ const App = (props) => {
10050
width={300}
10151
/>
10252
) : (
103-
<ShapePallete>
104-
<ShapeCards>
105-
{data.map((shape, index) => (
106-
<React.Fragment key={index}>
107-
<ShapeCard>
108-
<ShapeCardHeader>
109-
<ShapeName>{shape.name}</ShapeName>
110-
<ShapeActions>
111-
<span title="Like">
112-
<LikeIcon size={24} />
113-
</span>{" "}
114-
<span title="Download">
115-
<DownloadIcon
116-
size={24}
117-
onClick={(event) =>
118-
saveAsPng(
119-
event,
120-
`${getShapeFileName(shape.name)}-id`,
121-
getShapeFileName(shape.name)
122-
)
123-
}
124-
/>
125-
</span>
126-
</ShapeActions>
127-
</ShapeCardHeader>
128-
<Shape
129-
width="300px"
130-
height="300px"
131-
name={shape.name}
132-
id={`${getShapeFileName(shape.name)}-id`}
133-
backgroundColor="#eb3d86"
134-
showShadow={shape.showAdvanced}
135-
/>
136-
137-
<ShapeCardSwitch>
138-
<label htmlFor={`${getShapeFileName(shape.name)}-form`}>
139-
<span>Show Clip-Path Info</span>{" "}
140-
<Switch
141-
onChange={() => handleSwicth(shape.name)}
142-
checked={shape.showAdvanced}
143-
id={`${getShapeFileName(shape.name)}-form`}
144-
/>
145-
</label>
146-
</ShapeCardSwitch>
147-
148-
{shape.showAdvanced && (
149-
<ShapeDetailsItems>
150-
<span>
151-
<b>Clip-Path:</b>{" "}
152-
<code>
153-
<b>{shape.formula}</b>
154-
</code>
155-
</span>{" "}
156-
<span title="Copy">
157-
<CopyIcon
158-
size={24}
159-
onClick={(event) => performCopy(event, shape.formula)}
160-
/>
161-
</span>
162-
</ShapeDetailsItems>
163-
)}
164-
</ShapeCard>
165-
</React.Fragment>
166-
))}
167-
</ShapeCards>
168-
</ShapePallete>
53+
<ShapeList data={ data } />
16954
)}
17055
</>
17156
);

‎components/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
export { default as App } from "./core/App";
1+
export { default as App } from "./core/App";
2+
3+
export { default as ShapeList } from './utils/ShapeList';

‎components/utils/ShapeList.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React, { useState } from "react";
2+
import dynamic from "next/dynamic";
3+
4+
// Toast
5+
import toast from "react-hot-toast";
6+
7+
// Clip-Path
8+
const Shape = dynamic(import("react-clip-path"), { ssr: false });
9+
10+
// Switch
11+
import Switch from "react-switch";
12+
13+
// Shape Listing Styled-Componentns
14+
import {
15+
ShapeCards,
16+
ShapeCard,
17+
ShapeName,
18+
ShapePallete,
19+
ShapeDetailsItems,
20+
ShapeCardSwitch,
21+
ShapeActions,
22+
ShapeCardHeader,
23+
CopyIcon,
24+
DownloadIcon,
25+
LikeIcon,
26+
} from './StyledComponents';
27+
28+
const ShapeList = ({ data }) => {
29+
30+
const [shapes, setShapes] = useState(data);
31+
32+
const handleSwicth = (shapeName) => {
33+
console.log(shapeName);
34+
35+
let modifiedShapes = shapes.map((shape, index) => {
36+
if (shape.name === shapeName) {
37+
return {
38+
...shape,
39+
showAdvanced: !shape.showAdvanced,
40+
};
41+
}
42+
return shape;
43+
});
44+
console.log(modifiedShapes);
45+
setShapes(...[modifiedShapes]);
46+
};
47+
48+
const getShapeFileName = (name) => {
49+
return name.split(" ").join("-");
50+
};
51+
52+
async function performCopy(event, formula) {
53+
event.preventDefault();
54+
try {
55+
await navigator.clipboard.writeText(formula);
56+
toast.success("Successfully Copied!");
57+
console.log("The clip-path formula copied to clipboard");
58+
} catch (err) {
59+
console.error("Failed to copy: ", err);
60+
}
61+
}
62+
63+
return (
64+
<ShapePallete>
65+
<ShapeCards>
66+
{shapes.map((shape, index) => (
67+
<React.Fragment key={index}>
68+
<ShapeCard>
69+
<ShapeCardHeader>
70+
<ShapeName>{shape.name}</ShapeName>
71+
<ShapeActions>
72+
<span title="Like">
73+
<LikeIcon size={24} />
74+
</span>{" "}
75+
<span title="Download">
76+
<DownloadIcon
77+
size={24}
78+
onClick={(event) =>
79+
saveAsPng(
80+
event,
81+
`${getShapeFileName(shape.name)}-id`,
82+
getShapeFileName(shape.name)
83+
)
84+
}
85+
/>
86+
</span>
87+
</ShapeActions>
88+
</ShapeCardHeader>
89+
<Shape
90+
width="300px"
91+
height="300px"
92+
name={shape.name}
93+
id={`${getShapeFileName(shape.name)}-id`}
94+
backgroundColor="#eb3d86"
95+
showShadow={shape.showAdvanced}
96+
/>
97+
98+
<ShapeCardSwitch>
99+
<label htmlFor={`${getShapeFileName(shape.name)}-form`}>
100+
<span>Show Clip-Path Info</span>{" "}
101+
<Switch
102+
onChange={() => handleSwicth(shape.name)}
103+
checked={shape.showAdvanced}
104+
id={`${getShapeFileName(shape.name)}-form`}
105+
/>
106+
</label>
107+
</ShapeCardSwitch>
108+
109+
{shape.showAdvanced && (
110+
<ShapeDetailsItems>
111+
<span>
112+
<b>Clip-Path:</b>{" "}
113+
<code>
114+
<b>{shape.formula}</b>
115+
</code>
116+
</span>{" "}
117+
<span title="Copy">
118+
<CopyIcon
119+
size={24}
120+
onClick={(event) => performCopy(event, shape.formula)}
121+
/>
122+
</span>
123+
</ShapeDetailsItems>
124+
)}
125+
</ShapeCard>
126+
</React.Fragment>
127+
))}
128+
</ShapeCards>
129+
</ShapePallete>
130+
);
131+
};
132+
133+
export default ShapeList;

0 commit comments

Comments
 (0)