Skip to content

Commit

Permalink
Merge pull request #328 from GTBitsOfGood/feat/component-integration
Browse files Browse the repository at this point in the history 
Feat/component integration
  • Loading branch information
@thanasis457
thanasis457 authored Nov 4, 2024
2 parents ea45ec2 + 83d5743 commit 7fe565c
Show file tree
Hide file tree
Showing 17 changed files with 845 additions and 574 deletions.
9 changes: 5 additions & 4 deletions src/components/collapsible/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from "react";
import { useState, useRef } from "react";
import './collapsible.css';
import "./collapsible.css";
import { FaAngleDown, FaAngleUp } from "react-icons/fa";
import { Collapse } from "react-bootstrap";

//This is collapsible component, use it as if you are using any pre-designed component
//Specify the Style of collapsible component as if you were styling a div using style prompt
Expand Down Expand Up @@ -49,8 +50,8 @@ const Collapsible = (props: PropTypes) => {
style={{ height: isOpen ? `fit-content` : '0px' }}>
<div className="container" style={props.containerStyle}>{props.children}</div>
</div>
</div >
)
}
</div>
);
};

export default Collapsible;
132 changes: 84 additions & 48 deletions src/components/dashboard/AddProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
import Steps, { Step } from "rc-steps";
import "rc-steps/assets/index.css";
import "rc-steps/assets/iconfont.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap/dist/css/bootstrap.min.css";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
Expand All @@ -27,8 +27,6 @@ import { storage } from "../../store";
import { Store } from "reducers/types";
const { v4: uuidv4 } = require("uuid");

import { SimpleEditor } from "./TextComponent/SimpleEditor";

let steps = [
"Map",
"Hours",
Expand All @@ -50,7 +48,9 @@ function AddProvider(props) {
const [descriptions, setDescriptions] = useState(null);
const [single, setSingle] = useState(null);
const [error, setError] = useState("");
const [content, setContent] = useState('ex. "Changing lives one bit at a time..."');
const [content, setContent] = useState(
'ex. "Changing lives one bit at a time..."'
);
const handleUpdate = (updatedContent: string) => {
setContent(updatedContent);
};
Expand Down Expand Up @@ -115,7 +115,6 @@ function AddProvider(props) {

useEffect(() => {
function updateSteps() {
console.log(filters)
if (filters && !Object.keys(filters).length) {
const delIndex = steps.indexOf("Tag");
delIndex !== -1 && steps.splice(delIndex, 1);
Expand All @@ -140,7 +139,7 @@ function AddProvider(props) {
const delIndex = steps.indexOf("Toggle");
delIndex !== -1 && steps.splice(delIndex, 1);
}

if (single && Object.keys(single).length) {
const delIndex = steps.indexOf("Toggle");
delIndex == -1 && steps.push("Toggle");
Expand All @@ -149,22 +148,51 @@ function AddProvider(props) {
updateSteps();
}, [filters, descriptions, single]);

// function updateSteps() {
// if (filters && !Object.keys(filters).length) {
// const delIndex = steps.indexOf("Tag");
// delIndex !== -1 && steps.splice(delIndex, 1);
// }

// if (descriptions && !Object.keys(descriptions).length) {
// const delIndex = steps.indexOf("Text");
// delIndex !== -1 && steps.splice(delIndex, 1);
// }
const validateComponents = (i) => {
if (!i.content) {
return true;
}
const components = (i.content?.sections ?? []).flatMap(
(section) => section.components
);
return components.every((component) => {
return validateComponent(component);
});
};

// if (categories && !Object.keys(categories).length) {
// const delIndex = steps.indexOf("Toggle");
// delIndex !== -1 && steps.splice(delIndex, 1);
// }
// }
const validateComponent = (component) => {
const { type, data } = component;
switch (type) {
case "Chart":
switch (data.type) {
case "donut":
return !!(data.data.donutData?.length > 0);
case "progress":
return (
data.data.current != null &&
!isNaN(data.data.current) &&
data.data.total != null &&
!isNaN(data.data.total)
);
case "line":
return !!(data.data.lineData?.length > 0);
default:
return true;
}
case "Gallery":
return data.slidesArray.every((slide) => {
return slide.title !== "";
});
case "Directory":
return data.items.every((item) => {
return item.name !== "";
});
case "Embed":
return data.embedLink !== "";
default:
return true;
}
};

async function addFirestore() {
setIsLoading(true);
Expand All @@ -182,9 +210,9 @@ function AddProvider(props) {
fetch(
`https://maps.googleapis.com/maps/api/geocode/json?address=${i.address[0].replace(
/\s/g,
"%20",
)}&key=${GOOGLE_API_KEY}`,
),
"%20"
)}&key=${GOOGLE_API_KEY}`
)
);
const responseJson = await response.json();
if (
Expand All @@ -196,7 +224,7 @@ function AddProvider(props) {
}
if (!i.imageURL) {
const res = await fetch(
`https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`,
`https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`
);
const blob = await res.blob();
const filename = i.facilityName + ".jpeg";
Expand All @@ -212,15 +240,15 @@ function AddProvider(props) {
}
await promiseWithTimeout(
5000,
props.firestore.set(
{ collection: "providers", doc: i.id },
i,
),
props.firestore.set({
collection: "providers",
doc: i.id
}, i)
);
props.history.push(providerRoute);
} catch (e) {
setError(
"Failed to save changes. Please check your network connection or try again later.",
"Failed to save changes. Please check your network connection or try again later."
);
} finally {
setIsLoading(false);
Expand All @@ -239,8 +267,8 @@ function AddProvider(props) {
const response = await fetch(
`https://maps.googleapis.com/maps/api/geocode/json?address=${i.address[0].replace(
/\s/g,
"%20",
)}&key=${GOOGLE_API_KEY}`,
"%20"
)}&key=${GOOGLE_API_KEY}`
);
const responseJson = await response.json();
if (
Expand All @@ -252,7 +280,7 @@ function AddProvider(props) {
}
if (!i.imageURL) {
const res = await fetch(
`https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`,
`https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`
);
const blob = await res.blob();
const filename = i.facilityName + ".jpeg";
Expand All @@ -274,15 +302,15 @@ function AddProvider(props) {
querySnapshot.forEach((doc) => {
firestore.update(
{ collection: "providers", doc: doc.id },
i,
i
);
});
});
await props.firestore.get("providers");
props.history.push(providerRoute);
} catch (e) {
setError(
"Failed to save changes. Please check your network connection or try again later.",
"Failed to save changes. Please check your network connection or try again later."
);
} finally {
setIsLoading(false);
Expand Down Expand Up @@ -343,13 +371,13 @@ function AddProvider(props) {
disabled={!completed}
onClick={
props.selected &&
props.selected.facilityName
props.selected.facilityName
? updateFirestore
: addFirestore
}
>
{props.selected &&
props.selected.facilityName
props.selected.facilityName
? "Edit"
: "Add"}{" "}
Provider
Expand All @@ -366,7 +394,12 @@ function AddProvider(props) {
)}
</div>
</Col>
<Col xs={12} md={8} lg={9} style={{overflow: "scroll", height: "100vh"}}>
<Col
xs={12}
md={8}
lg={9}
style={{ overflow: "scroll", height: "100vh" }}
>
<Flipper flipKey={step}>
<Flipped flipId="form">
<div className="bg-white p-3">
Expand All @@ -389,26 +422,26 @@ function AddProvider(props) {
<Button
onClick={
step ===
steps.length - 1
steps.length - 1
? props.selected &&
props.selected
.facilityName
props.selected
.facilityName
? updateFirestore
: addFirestore
: next
}
disabled={
!completed &&
step ===
steps.length - 1
steps.length - 1
}
variant="primary"
>
{step ===
steps.length - 1
steps.length - 1
? props.selected &&
props.selected
.facilityName
props.selected
.facilityName
? "Edit Provider"
: "Add Provider"
: "Next"}
Expand All @@ -434,9 +467,12 @@ function AddProvider(props) {
isValidNumberForRegion(
parseIncompletePhoneNumber(
i
.phoneNum[0],
.phoneNum[0]
),
"US",
"US"
) &&
validateComponents(
i
);
setItem(i);
setCompleted(c);
Expand Down Expand Up @@ -465,5 +501,5 @@ export default compose<any>(
firebase: state.firebase,
selected: state.item.selected,
team: state.item.team,
})),
}))
)(AddProvider);
16 changes: 16 additions & 0 deletions src/components/dashboard/ContentForm.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,19 @@
.editableLabel::-webkit-scrollbar-thumb:hover {
background-color: gray;
}
/* .card {
} */
.card::-webkit-scrollbar {
width: 5px;
}
.card::-webkit-scrollbar-track {
background-color: transparent;
}
.card::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #a9a9a9;
}
.card::-webkit-scrollbar-thumb:hover {
background-color: gray;
}
Loading

0 comments on commit 7fe565c

Please sign in to comment.