diff --git a/src/containers/Browse/index.tsx b/src/containers/Browse/index.tsx index 522ef4d..944aca8 100644 --- a/src/containers/Browse/index.tsx +++ b/src/containers/Browse/index.tsx @@ -2,21 +2,21 @@ import React from 'react'; import './style.scss'; import { useSelector } from 'react-redux'; import { Link } from 'react-router-dom'; +import ResultsComponent from './results'; +import RSVPComponent from './rsvp'; import 'firebase/database'; const BrowseComponent: React.FC = () => { - const zipcode = useSelector(state => state['zipcode']); const profile = useSelector(state => state['profile']); - const results = useSelector(state => state['results']); return (
{

HOST YOUR OWN

DINR

- {zipcode && results.length ? ( -
-

Results for {zipcode}

- { - results.map((result: any, index: number) => { - const { title, description, price, datestamp, ref, plates } = result; - const date = new Date(datestamp); - return ( - -

${price} {title}

-

{description}

- - - ) - }) - } -
- ) : ( -
-

No dinners this week!

-

Support Dinr by hosting a dinner in your area.

-
- )} + +
); }; diff --git a/src/containers/Browse/results.tsx b/src/containers/Browse/results.tsx new file mode 100644 index 0000000..d819cab --- /dev/null +++ b/src/containers/Browse/results.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { Link } from 'react-router-dom'; +import './style.scss'; + +const ResultsComponent: React.FC = () => { + const zipcode = useSelector(state => state['zipcode']); + const results = useSelector(state => state['results']); + return ( +
+ {zipcode && results.length ? ( +
+

Results for {zipcode}

+ { + results.map((result: any, index: number) => { + const { title, description, price, datestamp, ref, plates } = result; + const date = new Date(datestamp); + return ( + +

${price} {title}

+

{description}

+ + + ) + }) + } +
+ ) : ( +
+

No dinners this week!

+

Support Dinr by hosting a dinner in your area.

+
+ )} +
+ ); +}; + +export default ResultsComponent; \ No newline at end of file diff --git a/src/containers/Browse/rsvp.tsx b/src/containers/Browse/rsvp.tsx new file mode 100644 index 0000000..c022e8e --- /dev/null +++ b/src/containers/Browse/rsvp.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import './style.scss'; + +const RSVPComponent: React.FC = () => { + const rsvps = [{ + "datestamp": "Sat, 07 Mar 2020 23:00:00 GMT", + "description": "Best potato soup ", + "plates": 10, + "price": 1, + "profile": "kCfrKK6cbcQwHl3lYd0A6JN2G1r1", + "title": "Potato soup" + }]; + return ( +
+ {rsvps.length ? ( +
+

RSVPs

+ { + rsvps.map((result: any, index: number) => { + const { title, description, datestamp, ref } = result; + const date = new Date(datestamp); + return ( + +

{title}

+

{description}

+ + + ) + }) + } +
+ ) : ( +
+

You have no RSVPs!

+

Support Dinr by hosting a dinner in your area.

+
+ )} +
+ ); +}; + +export default RSVPComponent; \ No newline at end of file