Skip to content

Commit be72a41

Browse files
committed
feat: linked NoShapeFound button to open CreateShape Modal
1 parent 2d3b812 commit be72a41

3 files changed

Lines changed: 39 additions & 13 deletions

File tree

components/utils/Header.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,8 @@ const Header = ({
256256
edit={false}
257257
user={user}
258258
shapeAction={shapeAction}
259-
setShapeAction={setShapeAction} />
259+
setShapeAction={setShapeAction}
260+
/>
260261
</AppHeader>
261262
);
262263
};

components/utils/NoShapeFound.js

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22

33
// Bootstrap
44
import Button from "react-bootstrap/Button";
@@ -10,6 +10,9 @@ import styled from "styled-components";
1010
// icons
1111
import { FiPlus } from 'react-icons/fi';
1212

13+
// CreateShape modal
14+
import { CreateShape } from "..";
15+
1316
const PageWrapper = styled.div`
1417
display: flex;
1518
flex-direction: column;
@@ -38,18 +41,35 @@ const PageWrapper = styled.div`
3841
3942
`;
4043

41-
const NoShapeFound = () => {
44+
const NoShapeFound = (props) => {
45+
46+
// Controls when CreateShape Modal Shows
47+
const [showCreateShape, setShowCreateShape] = useState(false);
48+
49+
const closeModal = () => {
50+
setShowCreateShape(false);
51+
}
4252

4353
return(
44-
<PageWrapper>
45-
<img src={ImgFeelingSad} width="360"/>
46-
<h2 className="title">Whooops!</h2>
47-
<p className="desc">We couldn't find the shape you are looking for. Why dont you start creating a shape of your own choice? or try to refine your search. </p>
48-
<Button variant='secondary'>
49-
<FiPlus />
50-
Create Shape
51-
</Button>
52-
</PageWrapper>
54+
<>
55+
<PageWrapper>
56+
<img src={ImgFeelingSad} width="360"/>
57+
<h2 className="title">Whooops!</h2>
58+
<p className="desc">We couldn't find the shape you are looking for. Why don't you start creating a shape of your own choice? or try to refine your search. </p>
59+
<Button variant='secondary' onClick={() => setShowCreateShape(true)}>
60+
<FiPlus />
61+
Create Shape
62+
</Button>
63+
</PageWrapper>
64+
<CreateShape
65+
show={showCreateShape}
66+
handleClose={closeModal}
67+
edit={false}
68+
user={props.user}
69+
shapeAction={props.shapeAction}
70+
setShapeAction={props.setShapeAction}
71+
/>
72+
</>
5373
)
5474
};
5575

components/utils/ShapeList.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,12 @@ const ShapeList = (
397397
}
398398

399399
{
400-
filteredShape.length === 0 ? <NoShapeFound /> : filteredShape.map((shape, index) => (
400+
filteredShape.length === 0 ?
401+
<NoShapeFound
402+
shapeAction = { shapeAction }
403+
setShapeAction = { setShapeAction }
404+
user = { user }
405+
/> : filteredShape.map((shape, index) => (
401406
<React.Fragment key={index}>
402407
<ShapeCard>
403408
<ShapeCardBody>

0 commit comments

Comments
 (0)