Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/component integration #328

Merged
merged 10 commits into from
Nov 4, 2024
Merged

Feat/component integration #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3be9a1f
init
davidlee04 Nov 2, 2024
eac8647
Merge branch 'develop' of https://github.com/GTBitsOfGood/MapScout in…
davidlee04 Nov 2, 2024
33dcb87
Validation check
davidlee04 Nov 3, 2024
4da2ca6
Code cleanup
thanasis457 Nov 4, 2024
5d44a2b
Merge branch 'develop' into feat/component-integration
thanasis457 Nov 4, 2024
7d183b2
StationNum minor fix
thanasis457 Nov 4, 2024
9754912
Removed unused deps
thanasis457 Nov 4, 2024
35f65ca
Integrated Text and fixed bug on section deletion
thanasis457 Nov 4, 2024
f7d9f15
Integrated Text to ProviderInfo
thanasis457 Nov 4, 2024
83d5743
Station number showing on providercell in map
thanasis457 Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/components/collapsible/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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