diff --git a/src/app/components/MapMarker.js b/src/app/components/MapMarker.js
index 9e51b1c..7b11afd 100644
--- a/src/app/components/MapMarker.js
+++ b/src/app/components/MapMarker.js
@@ -21,7 +21,11 @@ export default function MapMarker(props) {
/>
-
+
{
- setIsVisible(!isVisible);
- }}
- >
- Hide Modal
-
+
+ notImplemented()}
+ >
+
+
+
+ notImplemented()}
+ >
+
+
+
+ props.setIsVisible(!props.isVisible)}
+ >
+
+
+
);
}
-function MapModal({
- isVisible,
- setIsVisible,
- title,
- description,
- icon,
- pictures,
-}) {
- console.log(screen_width);
+function iconTextRow(props) {
return (
-
-
+
+
+
+
+ {props.description}
+
+ );
+}
+
+function iconImageRow(props) {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function reviews(props) {
+ const [likes, setLikes] = useState(0);
+ const [dislikes, setDislikes] = useState(0);
+
+ const updateLikes = () => {
+ setLikes(likes + 1);
+ notImplemented();
+ };
+ const updatedislikes = () => {
+ setDislikes(dislikes + 1);
+ notImplemented();
+ };
+
+ return (
+
+ updatedislikes()}>
+
+
+
+
+ {dislikes}
+
+
+
+ {
+ updateLikes();
+ }}
>
- {modalContent(isVisible, setIsVisible)}
-
+
+
+
+
+ {likes}
+
+
+
+ );
+}
+
+function componentBody(props) {
+ // NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
+ const pictures = JSON.parse(props.pictures);
+ const date = date ? date : "implementando...";
+
+ return (
+
+
+
+
+ {props.title}
+
+ {iconTextRow({ name: "map-marker", description: "Rua Nassau, 158" })}
+ {iconTextRow({ name: "calendar", description: date })}
+ {iconTextRow({ name: "account", description: "Usuário ativo" })}
+ {pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })}
+
);
}
-const styles = StyleSheet.create({});
+function MapModal(props) {
+ return (
+
+ {topBar(props)}
+ {componentBody(props)}
+ {reviews(props)}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ bodyRow: {
+ flexDirection: "row",
+ alignSelf: "flex-start",
+ alignContent: "space-between",
+ },
+ bodyTitle: {
+ fontWeight: "700",
+ fontSize: dimensions.text.secondary,
+ marginBottom: 5,
+ },
+ bodyInfo: {
+ flexDirection: "column",
+ alignContent: "flex-start",
+ },
+ bodyIcon: {
+ alignSelf: "flex-start",
+ marginHorizontal: 20,
+ height: 53,
+ width: 53,
+ },
+ reviewsContainer: {
+ flexDirection: "row",
+ alignSelf: "flex-end",
+ margin: 10,
+ },
+ review: {
+ flexDirection: "row",
+ alignSelf: "flex-end",
+ alignContent: "space-around",
+ marginHorizontal: 10,
+ },
+ topBar: {
+ flexDirection: "row",
+ alignSelf: "flex-end",
+ },
+ topBarIcon: {
+ margin: 10,
+ },
+ text: {
+ fontWeight: "500",
+ fontSize: dimensions.text.default,
+ },
+});
export default MapModal;
diff --git a/src/app/components/SelfClosingModal.js b/src/app/components/SelfClosingModal.js
index 489a12a..4fcaa95 100644
--- a/src/app/components/SelfClosingModal.js
+++ b/src/app/components/SelfClosingModal.js
@@ -43,7 +43,6 @@ const styles = StyleSheet.create({
backgroundColor: "white",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
- padding: 35,
marginBottom: 0,
alignItems: "center",
shadowColor: "#000",