diff --git a/package.json b/package.json index cf7c27c..6596479 100644 --- a/package.json +++ b/package.json @@ -15,16 +15,20 @@ "node-sass": "^4.13.1", "react": "^16.13.0", "react-animated-slider": "^2.0.0", + "react-animations": "^1.0.0", "react-dom": "^16.13.0", + "react-emoji": "^0.5.0", "react-ga": "^2.7.0", "react-map-gl": "^5.2.3", "react-player": "^1.15.2", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "^3.4.0", + "react-scroll-to-bottom": "^1.3.2", "react-stepper-horizontal": "^1.0.11", "react-table": "^7.0.0-rc.16", "sass": "^1.26.2", + "socket.io-client": "^2.3.0", "styled-components": "^5.0.1", "styled-normalize": "^8.0.7", "video-react": "^0.14.1", diff --git a/src/App.js b/src/App.js index 7cda739..871a58d 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,7 @@ import { initGA, PageView } from './utils/analytics' import FamilyProfile from './components/UserDash/FamilyProfile' import NeighborProfile from './components/UserDash/NeighborProfile' import { PrivateRoute } from './utils/customRoutes' -import Map from './components/AdminDash/Map/Map' +import Map from './components/AdminDash/Map/MapOverlay' // temporary sign up confirmation, will be replaced with user dashboard import ConfirmationPage from './components/signUpForm/ConfirmationPage/ConfirmationPage' import SegmentOne from './components/UserDash/Training/SegmentOne' @@ -18,6 +18,8 @@ import Letter from './components/UserDash/Training/Letter' import SegmentTwo from './components/UserDash/Training/TrainingTwo' import SegmentThree from './components/UserDash/Training/TrainPart3' import SegmentFour from './components/UserDash/Training/TrainingPartFour' +import Chat from './components/Chat/Chat/Chat' +import ThankYou from './components/AdminDash/ThankYou/Thankyou' function App() { useEffect(() => { initGA('UA-159166357-1') @@ -27,6 +29,8 @@ function App() { <> + + diff --git a/src/components/AdminDash/AdminDashboard.js b/src/components/AdminDash/AdminDashboard.js index bd16ac5..257705b 100644 --- a/src/components/AdminDash/AdminDashboard.js +++ b/src/components/AdminDash/AdminDashboard.js @@ -25,8 +25,8 @@ export default function Distance(props) { diff --git a/src/components/AdminDash/Map/EggLocations.js b/src/components/AdminDash/Map/EggLocations.js new file mode 100644 index 0000000..36234ef --- /dev/null +++ b/src/components/AdminDash/Map/EggLocations.js @@ -0,0 +1,50 @@ +export const EggLocations = [ + { + id: 1, + latitude: -80, + longitude: 3, + name: 'Riddle 1', + address: "What rock group has four men that don't sing?", + email: '???', + phone: '???', + match: false, + }, + { + id: 2, + latitude: 43.8791, + longitude: -103.4591, + name: 'Riddle 2', + address: 'NICE JOB KEEP GOING!', + email: 'In what city was the first skyscraper built?', + phone: '???', + match: false, + }, + { + id: 3, + latitude: 41.8781, + longitude: -87.6298, + name: 'Riddle 3', + address: 'NICE JOB ALMOST THERE!', + email: 'In what city were the 2002 Olymipcs held?', + phone: '???', + match: false, + }, + { + id: 4, + latitude: 33.749, + longitude: -84.388, + name: 'Riddle 4', + address: 'LAST ONE!!!', + email: 'In what city was the oldest College in the USA founded?', + phone: '???', + match: false, + }, + { + id: 5, + latitude: 42.377, + longitude: -71.1167, + name: 'You did it!!!', + address: ' CLICK ME!!!', + match: false, + }, +] diff --git a/src/components/AdminDash/Map/EggMarker.js b/src/components/AdminDash/Map/EggMarker.js new file mode 100644 index 0000000..49468bd --- /dev/null +++ b/src/components/AdminDash/Map/EggMarker.js @@ -0,0 +1,20 @@ +import React, { useState, useEffect } from 'react' +import {Egg} from './EggStyle' +import { useHistory } from "react-router-dom"; + + +export default function FamMark(props) { + const history = useHistory(); + +function handleClick(){ + if(props.eggStep === 4){ + history.push('/lambda') + } + props.setSelected(props.location) + props.setEgg(props.eggStep + 1) +} + + return ( + handleClick()}/> + ) +} diff --git a/src/components/AdminDash/Map/EggStyle.js b/src/components/AdminDash/Map/EggStyle.js new file mode 100644 index 0000000..668b502 --- /dev/null +++ b/src/components/AdminDash/Map/EggStyle.js @@ -0,0 +1,16 @@ +import styled from 'styled-components' + +export const Egg = styled.div` +position: relative; +top: -22px; +left: -20px; +width: 45px; +height: 45px; +borderRadius: 50px; +&:hover{ + width: 25px; + height: 25px; + background: green; +} +} +` diff --git a/src/components/AdminDash/Map/FamilyMarker.js b/src/components/AdminDash/Map/FamilyMarker.js new file mode 100644 index 0000000..6d1cf50 --- /dev/null +++ b/src/components/AdminDash/Map/FamilyMarker.js @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from 'react' +import { set } from 'react-ga' + +export default function FamMark(props) { + const [open, setOpen] = useState(false) + function clicked() { + setOpen(true) + if (open === false) { + props.setSelected(props.location) + } + } + + useEffect(() => { + if (props.location.id === props.selected.id) { + setOpen(true) + } else { + setOpen(false) + } + }, [props.selected]) + + return ( + <> + {!open ? ( +
{ + clicked() + }} + style={{ + width: `${props.zoom * 2}px`, + height: `${props.zoom * 2}px`, + borderRadius: '50%', + backgroundColor: 'blue', + }} + /> + ) : ( +
{ + clicked() + }} + style={{ + position: 'relative', + top: '-22px', + left: '-20px', + width: `${props.zoom * 6}px`, + height: `${props.zoom * 6}px`, + borderRadius: '50%', + backgroundColor: 'blue', + }} + >
+ )} + + ) +} diff --git a/src/components/AdminDash/Map/Locations.js b/src/components/AdminDash/Map/Locations.js index 3438cc8..1eb1d4d 100644 --- a/src/components/AdminDash/Map/Locations.js +++ b/src/components/AdminDash/Map/Locations.js @@ -1,8 +1,68 @@ export const locations = [ - { coords: { lat: 39.99855629395869, lng: -104.74184416996333 }, title:'One'}, - { coords:{ lat: 39.759423, lng: -104.821071 }, title: 'two'}, - { coords:{ lat: 39.7052192687988, lng: -103.988426208496 }, title: 'three'}, - { coords:{ lat: 39.9307081, lng: -104.1434325 }, title: 'four'}, - { coords:{ lat: 39.8084488, lng: -104.2140121 }, title: 'five'}, - { coords:{ lat: 39.8524695, lng: -104.5425407 }, title: 'six'}, + { + id: 1, + latitude: 39.99855629395869, + longitude: -104.74184416996333, + name: 'BOB', + type: 'neighbor', + address: "11111 Street", + email: "one11@email.com", + phone: "377854234", + match: false, + }, + { + id: 2, + latitude: 39.759423, + longitude: -104.821071, + name: 'Fred', + type: 'neighbor', + address: "12222 Street", + email: "one22@email.com", + phone: "134234", + match: true, + }, + { + id: 3, + latitude: 39.7052192687988, + longitude: -103.988426208496, + name: 'Joe', + type: 'neighbor', + address: "13333 Street", + email: "one33@email.com", + phone: "3555534", + match: true, + }, + { + id: 4, + latitude: 39.9307081, + longitude: -104.1434325, + name: 'Mary', + type: 'family', + address: "144444 Street", + email: "one44@email.com", + phone: "37411114234", + match: true, + }, + { + id: 5, + latitude: 39.8084488, + longitude: -104.2140121, + name: 'Sara', + type: 'family', + address: "125555 Street", + email: "one55@email.com", + phone: "374233333734234", + match: false, + }, + { + id: 6, + latitude: 39.8524695, + longitude: -104.5425407, + name: 'Anna', + type: 'family', + address: "1234 Street", + email: "one66@email.com", + phone: "3742313231734234", + match: true + }, ] diff --git a/src/components/AdminDash/Map/Map.js b/src/components/AdminDash/Map/Map.js index 9eccbc2..9e911d8 100644 --- a/src/components/AdminDash/Map/Map.js +++ b/src/components/AdminDash/Map/Map.js @@ -1,53 +1,73 @@ -import React, { useState } from 'react' -import GoogleMapReact from 'google-map-react' -import Marker from './Marker' -import { locations } from './Locations' -import { Map } from 'google-maps-react' +import React, { useState, useEffect } from 'react' +import ReactMapGL, { Marker, Popup } from 'react-map-gl' +import { MapContain } from './MapStyles' +import FamMarker from './FamilyMarker' +import NeighborMarker from './NeighborMarker' +import { EggLocations } from './EggLocations' +import EggMarker from './EggMarker' -const SimpleMap = props => { - const [center, setCenter] = useState({ lat: 39.99, lng: -104.707 }) - const [zoom, setZoom] = useState(11) +function Map(props, { latitude, longitude, refresh }) { + const [zoom, setZoom] = useState() + const [eggStep, setEggStep] = useState(0) + const [viewport, setViewport] = useState({ + latitude: 40, + longitude: -104.7, + zoom: 11, + width: '60vw', + height: '100%', + }) + const [locations, setLocations] = useState(props.locations) + useEffect(() => { + console.log('hi') + setLocations(props.locations) + }, [props]) return ( -
-
- + { + setZoom(viewport.zoom) + setViewport(viewport) + }} > - {locations.map(location => { - return ( - - ) - })} - -
-
+ {locations.map(location => ( + + {location.type === 'neighbor' ? ( + + ) : ( + + )} + + ))} + + + + + ) } -export default SimpleMap +export default Map diff --git a/src/components/AdminDash/Map/MapFilters.js b/src/components/AdminDash/Map/MapFilters.js new file mode 100644 index 0000000..2201620 --- /dev/null +++ b/src/components/AdminDash/Map/MapFilters.js @@ -0,0 +1,408 @@ +import React, { useState, useEffect } from 'react' +import { + FilterDiv, + ButtonHolder, + Header, + Image, + HeaderHolder, +} from './MapStyles' +import { locations } from './Locations' +import { Buttons } from './MapStyles' + + +export default function Filter(props) { + const [typeSelected, setTypeSelected] = useState('All') + const [matchSelected, setMatchSelected] = useState('All') + const [points, setPoints] = useState(locations) + const [completed, setCompleted] = useState('All') + + const neighbors = locations.filter(people => people.type === 'neighbor') + const families = locations.filter(people => people.type === 'family') + const matchedNeighbors = locations.filter( + people => people.type === 'neighbor' && people.match === true + ) + const unmatchedNeighbors = locations.filter( + people => people.type === 'neighbor' && people.match === false + ) + const matchedFamilies = locations.filter( + people => people.type === 'family' && people.match === true + ) + const unmatchedFamilies = locations.filter( + people => people.type === 'family' && people.match === false + ) + const allMatched = locations.filter(people => people.match === true) + const allUnmatched = locations.filter(people => people.match === false) + const allCompleted = locations.filter(people => people.application === true) + const allUncompleted = locations.filter( + people => people.application === false + ) + const uncompletedFamilies = families.filter( + people => people.application === false + ) + const completeFamilies = families.filter( + people => people.application === true + ) + const completeNeighbors = neighbors.filter( + people => people.application === true + ) + + const uncompleteNeighbors = neighbors.filter( + people => people.application === false + ) + + function handleAll() { + setTypeSelected('All') + if (matchSelected === 'All') { + if (completed === 'All') { + setPoints(locations) + } + if (completed === true) { + setPoints(allCompleted) + } + if (completed === false) { + setPoints(allUncompleted) + } + } + if (matchSelected === true) { + setPoints(allMatched) + } + if (matchSelected === false) { + setPoints(allUnmatched) + } + } + function handleFamily() { + setTypeSelected('family') + if (matchSelected === 'All') { + if (completed === false) { + setPoints(uncompletedFamilies) + } + if (completed === true) { + setPoints(completeFamilies) + } + if (completed === 'All') { + setPoints(families) + } + } + if (matchSelected === true) { + setPoints(matchedFamilies) + } + if (matchSelected === false) { + if (completed === 'All') { + setPoints(unmatchedFamilies) + } + if (completed === true) { + setPoints(completeFamilies) + } + if (completed === false) { + setPoints(uncompletedFamilies) + } + } + } + function handleNeighbor() { + setTypeSelected('neighbor') + if (matchSelected === 'All') { + if (completed === false) { + setPoints(uncompleteNeighbors) + } + if (completed === true) { + setPoints(completeNeighbors) + } + if (completed === 'All') { + setPoints(neighbors) + } + } + if (matchSelected === true) { + setPoints(matchedNeighbors) + } + if (matchSelected === false) { + if (completed === 'All') { + setPoints(unmatchedNeighbors) + } + if (completed === true) { + setPoints(completeNeighbors) + } + if (completed === false) { + setPoints(uncompleteNeighbors) + } + } + } + function handleAllMatch() { + setMatchSelected('All') + if (typeSelected === 'All') { + if (completed === 'All') { + setPoints(locations) + } + if (completed === true) { + setPoints(allCompleted) + } + if (completed === false) { + setPoints(allUncompleted) + } + } + if (typeSelected === 'neighbor') { + if (completed === 'All') { + setPoints(neighbors) + } + if (completed === true) { + setPoints(completeNeighbors) + } + if (completed === false) { + setPoints(uncompleteNeighbors) + } + } + if (typeSelected === 'family') { + if (completed === 'All') { + setPoints(families) + } + if (completed === true) { + setPoints(completeFamilies) + } + if (completed === false) { + setPoints(uncompletedFamilies) + } + } + } + function handleMatched() { + setMatchSelected(true) + setCompleted(true) + if (typeSelected === 'All') { + setPoints(allMatched) + } + if (typeSelected === 'neighbor') { + setPoints(matchedNeighbors) + } + if (typeSelected === 'family') { + setPoints(matchedFamilies) + } + } + function handleUnmatched() { + setMatchSelected(false) + if (typeSelected === 'All') { + if (completed === 'All') { + setPoints(allUnmatched) + } + if (completed === true) { + setPoints(allCompleted) + } + if (completed === false) { + setPoints(allUncompleted) + } + } + if (typeSelected === 'neighbor') { + if (completed === 'All') { + setPoints(unmatchedNeighbors) + } + if (completed === true) { + setPoints(unmatchedNeighbors) + } + if (completed === false) { + setPoints(uncompleteNeighbors) + } + } + if (typeSelected === 'family') { + if (completed === 'All') { + setPoints(unmatchedFamilies) + } + if (completed === true) { + setPoints(unmatchedFamilies) + } + if (completed === false) { + setPoints(uncompletedFamilies) + } + } + } + function handleAllCompleted() { + setCompleted('All') + if (typeSelected === 'All') { + if (matchSelected === 'All') { + setPoints(locations) + } + if (matchSelected === true) { + setPoints(allMatched) + } + if (matchSelected === false) { + setPoints(allUnmatched) + } + } + if (typeSelected === 'neighbor') { + if (matchSelected === 'All') { + setPoints(neighbors) + } + if (matchSelected === true) { + setPoints(matchedNeighbors) + } + if (matchSelected === false) { + setPoints(unmatchedNeighbors) + } + } + if (typeSelected === 'family') { + if (matchSelected === 'All') { + setPoints(families) + } + if (matchSelected === true) { + setPoints(matchedFamilies) + } + if (matchSelected === false) { + setPoints(unmatchedFamilies) + } + } + } + function handleCompleted() { + setCompleted(true) + if(matchSelected === 'All'){ + if(typeSelected === 'All'){ + setPoints(allCompleted) + } + if(typeSelected === 'neighbor'){ + setPoints(completeNeighbors) + } + if(typeSelected === 'family'){ + setPoints(completeFamilies) + } + } + if(matchSelected === true){ + if(typeSelected === 'All'){ + setPoints(allMatched) + } + if(typeSelected === 'neighbor'){ + setPoints(matchedNeighbors) + } + if(typeSelected === 'family'){ + setPoints(matchedFamilies) + } + } + if(matchSelected === false){ + if(typeSelected === 'All'){ + setPoints(allUnmatched) + } + if(typeSelected === 'neighbor'){ + setPoints(unmatchedNeighbors) + } + if(typeSelected === 'family'){ + setPoints(unmatchedFamilies) + } + } + } + function handleUncompleted() { + setCompleted(false) + setMatchSelected(false) + if(typeSelected === 'All'){ + setPoints(allUncompleted) + } + if(typeSelected === 'neighbor'){ + setPoints(uncompleteNeighbors) + } + if(typeSelected === 'family'){ + setPoints(uncompletedFamilies) + } + } + useEffect(() => { + props.filter(points) + }, [points]) + + return ( + + + + +
Member Type
+ + { + handleAll() + }} + > + All + + { + handleFamily() + }} + > + Families + + { + handleNeighbor() + }} + > + Neighbors + + + + + + +
Match Status
+ + { + handleAllMatch() + }} + > + All + + { + handleMatched() + }} + > + Matched + + { + handleUnmatched() + }} + > + Non-Matched + + + + + + +
App Status
+ + { + handleAllCompleted() + }} + > + All + + { + handleCompleted() + }} + > + Complete + + { + handleUncompleted() + }} + > + Incomplete + + + + ) +} diff --git a/src/components/AdminDash/Map/MapOverlay.js b/src/components/AdminDash/Map/MapOverlay.js new file mode 100644 index 0000000..403ce90 --- /dev/null +++ b/src/components/AdminDash/Map/MapOverlay.js @@ -0,0 +1,19 @@ +import React, { useState } from 'react' +import Map from './Map' +import PersonInfo from './PersonInfo' +import MapFilters from './MapFilters' +import { PageContain } from './MapStyles' +import {locations} from './Locations' + +export default function MapThing() { + const [points, setPoints] = useState(locations) + const [selected, setSelected] = useState({}) + + return ( + + + + + + ) +} diff --git a/src/components/AdminDash/Map/MapStyles.js b/src/components/AdminDash/Map/MapStyles.js new file mode 100644 index 0000000..b5e6c86 --- /dev/null +++ b/src/components/AdminDash/Map/MapStyles.js @@ -0,0 +1,82 @@ +import styled from 'styled-components' + +export const FilterDiv = styled.div` +width: 20vw; +height: 100vh; +background-color: F9F9F9; +` + +export const MapContain = styled.div` +height: 100vh; +width: 60vw; +background-color: black; +` + +export const PageContain = styled.div` +display: flex; +` + +export const InfoDiv = styled.div` +width: 20vw; +height: 100vh; +background-color: F9F9F9; +display: flex; +flex-direction: column; +align-items: center; +padding-left: 1%; +padding-top: 2%; +` +export const UserName = styled.div` +font-size:4rem; +padding-top: 2%; +` + +export const IconContain = styled.div` +display: flex; +align-items: center; +justify-content: center; +font-size: 1.2rem; +flex-wrap: wrap; +` + +export const Icon = styled.img` +padding: 5px; +height: 50px; +` + +export const Buttons = styled.button` +width: 80%; +height: 5%; +margin-top: 1%; +background: white; +border: none; +font-size: 3rem; +background-color: ${props => props.selected === props.current ? "#91BCCF" : "white"}; +border: 1px solid black; + +&:hover{ + color: blue; +} +` + +export const ButtonHolder = styled.div` +display: flex; +flex-direction: column; +align-items: center; +margin-top: 2vh; +` + +export const Header = styled.h1` +font-size: 3rem; +` + +export const Image = styled.img` +width: 20%; +` + +export const HeaderHolder = styled.div` +display: flex; +align-items: center; +justify-content: center; +width: 100%; +` \ No newline at end of file diff --git a/src/components/AdminDash/Map/Marker.js b/src/components/AdminDash/Map/Marker.js deleted file mode 100644 index f2149b2..0000000 --- a/src/components/AdminDash/Map/Marker.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import F from './f.png' - -export default function Marker(props) { - const { color, name, id } = props - return ( -
{}} - > - neighbor -
- ) -} diff --git a/src/components/AdminDash/Map/NeighborMarker.js b/src/components/AdminDash/Map/NeighborMarker.js new file mode 100644 index 0000000..de8fa84 --- /dev/null +++ b/src/components/AdminDash/Map/NeighborMarker.js @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from 'react' + +export default function FamMark(props) { + const [open, setOpen] = useState(false) + function clicked() { + setOpen(!open) + if (open === false) { + props.setSelected(props.location) + } + } + useEffect(() => { + if (props.location.id === props.selected.id) { + setOpen(true) + } else { + setOpen(false) + } + }, [props.selected]) + + return ( + <> + {!open ? ( +
{ + clicked() + }} + style={{ + width: `${props.zoom * 2}px`, + height: `${props.zoom * 2}px`, + borderRadius: '50%', + backgroundColor: 'red', + }} + /> + ) : ( +
{ + clicked() + }} + style={{ + position: 'relative', + top: '-22px', + left: '-20px', + width: `${props.zoom * 6}px`, + height: `${props.zoom * 6}px`, + borderRadius: '50%', + backgroundColor: 'red', + }} + >
+ )} + + ) +} diff --git a/src/components/AdminDash/Map/PersonInfo.js b/src/components/AdminDash/Map/PersonInfo.js new file mode 100644 index 0000000..6469617 --- /dev/null +++ b/src/components/AdminDash/Map/PersonInfo.js @@ -0,0 +1,22 @@ +import React, { useState, useEffect } from 'react' +import { InfoDiv, +UserName, +Icon, +IconContain } from './MapStyles' + +export default function Filter(props) { + const [selected, setSelected] = useState('v') + useEffect(() => { + setSelected(props.selected) + }, [props]) + return ( + +

{selected.id}

+ {selected.name} +

{selected.type}

 +

{selected.address}

 +

{selected.email}

 +

{selected.phone}

 + + ) +} diff --git a/src/components/AdminDash/Map/mapicons/Vector.png b/src/components/AdminDash/Map/mapicons/Vector.png new file mode 100644 index 0000000..6b5d2aa Binary files /dev/null and b/src/components/AdminDash/Map/mapicons/Vector.png differ diff --git a/src/components/AdminDash/Map/mapicons/email.png b/src/components/AdminDash/Map/mapicons/email.png new file mode 100644 index 0000000..5c71c35 Binary files /dev/null and b/src/components/AdminDash/Map/mapicons/email.png differ diff --git a/src/components/AdminDash/Map/f.png b/src/components/AdminDash/Map/mapicons/f.png similarity index 100% rename from src/components/AdminDash/Map/f.png rename to src/components/AdminDash/Map/mapicons/f.png diff --git a/src/components/AdminDash/Map/mapicons/form.png b/src/components/AdminDash/Map/mapicons/form.png new file mode 100644 index 0000000..923a41e Binary files /dev/null and b/src/components/AdminDash/Map/mapicons/form.png differ diff --git a/src/components/AdminDash/Map/mapicons/home-building.png b/src/components/AdminDash/Map/mapicons/home-building.png new file mode 100644 index 0000000..746c68b Binary files /dev/null and b/src/components/AdminDash/Map/mapicons/home-building.png differ diff --git a/src/components/AdminDash/Map/mapicons/phone.png b/src/components/AdminDash/Map/mapicons/phone.png new file mode 100644 index 0000000..c85139a Binary files /dev/null and b/src/components/AdminDash/Map/mapicons/phone.png differ diff --git a/src/components/AdminDash/Map/mapicons/together.png b/src/components/AdminDash/Map/mapicons/together.png new file mode 100644 index 0000000..3761d13 Binary files /dev/null and b/src/components/AdminDash/Map/mapicons/together.png differ diff --git a/src/components/AdminDash/Table/DataMap.js b/src/components/AdminDash/Table/DataMap.js index 4daad77..e8c39fc 100644 --- a/src/components/AdminDash/Table/DataMap.js +++ b/src/components/AdminDash/Table/DataMap.js @@ -3,65 +3,25 @@ import families from '../AdminDashPics/fosterFamily.png' export default function mapping(props) { const rows = [] - - props.Data.map(people => { - if (people.match_name === undefined) { - rows.push({ - name: `${people.first_name}, ${people.last_name}`, - type: neighbors, - match: 'none', - city: people.city, - id: people.neighbor_id, - userType: 'neighbor', - application: true, - background: people.background, - training: people.training, - email: people.email, - phone: people.phone, - }) - } else { - rows.push({ - name: `${people.first_name}, ${people.last_name}`, - type: 'family', - match: 'none', - city: people.city, - userType: 'neighbor', - application: true, - background: people.background, - training: people.training, - }) - } - return rows - }) - - props.Data2.map(people => { - if (people.match_name === undefined) { - rows.push({ - name: `${people.first_name}, ${people.last_name}`, - type: families, - match: 'none', - city: people.city, - id: people.family_id, - userType: 'family', - application: true, - background: people.background, - training: people.training, - email: people.email, - phone: people.phone, - }) - } else { - rows.push({ - name: `${people.first_name}, ${people.last_name}`, - type: 'neighbor', - match: 'none', - city: people.city, - userType: 'family', - application: true, - background: people.background, - training: people.training, - }) - } - return rows - }) + function TableRowData(DataSet, Type, Picture, id) { + DataSet.map(data => { + rows.push({ + name: `${data.first_name}, ${data.last_name}`, + type: Picture, + match: 'none', + city: data.city, + userType: Type, + application: true, + background: data.background, + training: data.training, + email: data.email, + phone: data.phone, + neighbor_id: data.neighbor_id, + family_id: data.family_id + }) + }) + } + TableRowData(props.Neighbors, 'neighbor', neighbors) + TableRowData(props.Families, 'family', families) return rows -} +} \ No newline at end of file diff --git a/src/components/AdminDash/Table/Table.js b/src/components/AdminDash/Table/Table.js index 0617865..c8648e3 100644 --- a/src/components/AdminDash/Table/Table.js +++ b/src/components/AdminDash/Table/Table.js @@ -1,64 +1,72 @@ import React from 'react' -import { useTable, useSortBy } from "react-table" +import { useTable, useSortBy } from 'react-table' import { TableContain } from '../adminDashStyles' +export default function Table({ columns, data, props }) { + const { + getTableProps, + getTableBodyProps, + headerGroups, + rows, + prepareRow, + } = useTable( + { + columns, + data, + }, + useSortBy + ) -export default function Table( { columns, data, props }) { - const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow - } = useTable( - { - columns, - data - }, - useSortBy - ); + const firstPageRows = rows.slice(0, 15) - const firstPageRows = rows.slice(0, 15) - - return ( - - - - {headerGroups.map(headerGroup => ( - - {headerGroup.headers.map(column => ( - - ))} + return ( + +
- {column.render("Header")} - - {column.isSorted - ? column.isSortedDesc - ? " 🔽" - : " 🔼" - : ""} - -
+ + {headerGroups.map(headerGroup => ( + + {headerGroup.headers.map(column => ( + + ))} + + ))} + + + {firstPageRows.map(row => { + prepareRow(row) + return ( + + {row.cells.map(cell => { + return ( + + ) + })} - ))} - - - {firstPageRows.map( - row => { - prepareRow(row); - return ( - - {row.cells.map(cell => { - return ( - - ) - })} - - ) - } - )} - -
+ {column.render('Header')} + + {column.isSorted + ? column.isSortedDesc + ? ' 🔽' + : ' 🔼' + : ''} + +
+ props.props.history.push( + cell.row.original.family_id + ? `/${cell.row.original.userType}/${cell.row.original.family_id}` + : `/${cell.row.original.userType}/${cell.row.original.neighbor_id}` + ) + } + {...cell.getCellProps()} + > + {cell.render('Cell')} +
props.props.history.push(`/${cell.row.original.userType}/${cell.row.original.id}`)}{...cell.getCellProps()}>{cell.render('Cell')}
-
- - ); - } \ No newline at end of file + ) + })} + + +
+ + ) +} diff --git a/src/components/AdminDash/ThankYou/Thankyou.js b/src/components/AdminDash/ThankYou/Thankyou.js new file mode 100644 index 0000000..d9ad885 --- /dev/null +++ b/src/components/AdminDash/ThankYou/Thankyou.js @@ -0,0 +1,39 @@ +import React from 'react' +import { Video, Card, Page, Image, Header, ImageContain, Name } from './ThankyouStyle' + +export default function ThankYou() { + return ( + <> +