Skip to content

Commit

Permalink
Up to date
Browse files Browse the repository at this point in the history
  • Loading branch information
@SolveigRebnord
SolveigRebnord committed May 22, 2023
1 parent ea792b2 commit 72d17a9
Show file tree
Hide file tree
Showing 18 changed files with 365 additions and 344 deletions.
11 changes: 11 additions & 0 deletions public/profile_icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,3 +284,7 @@ text-decoration: underline;
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #e6e6e6;
}

div.rdrDefinedRangesWrapper{
display: none;
}
51 changes: 51 additions & 0 deletions src/components/CountryList.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { useDispatch, useSelector } from 'react-redux';
import { getVenues } from '../store/modules/VenueSlice';
import { useEffect, React } from 'react';



const CountryList = (props) => {

const dispatch = useDispatch();
const { venues } = useSelector((state) => state.venues);

useEffect(() => {
dispatch(getVenues());
}, [dispatch]);

const allCountries = [];
const filteresCountries = [];

venues.map((place) => (
place.location.country !== '' && place.location.country !== 'Unknown' &&
allCountries.push(place.location.country)
));

allCountries.map((place) => (
!filteresCountries.includes(place) &&
filteresCountries.push(place)
));

const searchCountry = filteresCountries.filter((el) => {
if (props.input === "") {
return el;
} else {
return el.toLowerCase().includes(props.input);
}
});


// Få til at ved klikk på landet så velger den det

return (
<>
<ul className='bg-white absolute flex flex-col gap-4'>
{searchCountry.map((country) => (
<li key={country}>{country}</li>
))}
</ul>

</> );
}

export default CountryList;
132 changes: 37 additions & 95 deletions src/components/HomeSearch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,31 @@ import {useState, React} from 'react';
import { useFormik, FormikProvider, useField } from "formik";
import * as yup from "yup";
import { Link, NavLink, useNavigate } from 'react-router-dom';
import CountryList from './CountryList';
import CalendarPick from './shared/CalendarPick';

const HomeSearch = () => {

const [inputText, setInputText] = useState("");

const searching = (e) => {
let lowerCase = e.target.value.toLowerCase();
setInputText(lowerCase);

};

const data = ['hei', 'ho']

const [date, setDate] = useState(new Date())
const [showTime, setShowTime] = useState(false)
const [value, onChange] = useState([new Date(), new Date()]);
const [showCalendar, setShowCalendar] = useState(false)

const selectionRange = {
startDate: new Date(),
endDate: new Date(),
key: 'selection',

}

const navigate = useNavigate();
Expand All @@ -29,8 +41,7 @@ const HomeSearch = () => {

const validationSchema = yup.object({
place: yup
.string()
,
.string(),
startDate: yup
.string(),
endDate: yup
Expand All @@ -43,94 +54,23 @@ const HomeSearch = () => {
const formik = useFormik({
initialValues: {
place: "",
startDate: "",
endDate: ""
startDate: date,
endDate: date
},
validationSchema,
onSubmit: (values) => {
console.log(values);
newPage(values)
//newPage(values)

},
});

const TextInputLiveFeedback = ({ label, helpText, ...props }) => {
const [field, meta] = useField(props);

const [didFocus, setDidFocus] = React.useState(false);
const handleFocus = () => setDidFocus(true);
const handleChange = () => handleChange();
const showFeedback =
(!!didFocus && field.value.trim().length > 2) || meta.touched;

const [isShown, setIsShown] = useState(true);

return (
<div
className={`form-control ${
showFeedback ? (meta.error ? "invalid" : "valid") : ""
}`}
>
<div className="flex items-center justify-between flex-row text-lg font-semibold my-3">
<label htmlFor={props.id}>{label}</label>
<div
className="text-sm font-light text-gray-600 "
id={`${props.id}-help`}
tabIndex="-1"
>
<div className="relative">
<button
className=" "
onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}
>
<img src="/question.svg" className="w-6"></img>
</button>
{isShown && (
<div className="min-w-fit whitespace-nowrap bg-white absolute bottom-2 right-8 z-2">
{helpText}
</div>
)}
</div>
</div>
</div>
{field.name !== "message" ? (
<div>
<input
className="border border-gray-200 px-2 rounded-md w-full h-10 "
{...props}
{...field}
aria-describedby={`${props.id}-feedback ${props.id}-help`}
onFocus={handleFocus}
/>
</div>
) : (
<div>
<textarea
className="border border-gray-200 px-2 rounded-md w-full "
{...props}
{...field}
maxLength={500}
aria-describedby={`${props.id}-feedback ${props.id}-help`}
onFocus={handleFocus}
/>
</div>
)}
<div className="h-6 pt-1 ">
{" "}
{showFeedback ? (
<div
id={`${props.id}-feedback`}
aria-live="polite"
className="feedback text-sm pl-1 text-orange-600"
>
{meta.error ? meta.error : "✓"}
</div>
) : null}
</div>
</div>
);
};

const closeCalendar = (bool) => {
setShowCalendar(bool)
}

console.log(selectionRange)


return (
Expand All @@ -142,24 +82,26 @@ const HomeSearch = () => {
<form
onSubmit={formik.handleSubmit}
onChange={formik.handleChange}
className="my-16 lg:mt-8"
>
<input
className="bg-purpleBlack opacity-90 w-full h-16 rounded-md text-white shadow-md placeholder:italic font-montS placeholder:text-white px-6 "
placeholder="Where are we going?"
value={formik.values.place}
className="my-6 flex flex-col gap-8">
<input
onKeyUp={(event) => searching(event)}
type='text'
id='place'
></input>
<div className="flex flex-row gap-6 mx-6 md:mx-auto md:w-2/3 ">
value={formik.values.place}
className="bg-purpleBlack opacity-90 w-full h-16 rounded-md text-white shadow-md placeholder:italic font-montS placeholder:text-gray-500 px-6 " placeholder='Where are we going?'
></input>
{inputText && <CountryList input={inputText} />}
<div className="flex flex-row gap-6 mx-6 md:mx-auto md:w-2/3 relative">
{/* Calendar component */}
<div className="flex flex-row ">
<input value={formik.values.startDate} id='startDate' className="bg-purpleBlack opacity-90 w-full h-14 rounded-l-md text-white shadow-md placeholder:italic font-montS placeholder:text-white px-4 border-white border-r-2"></input>
<input value={formik.values.endDate} id='endDate' className="bg-purpleBlack opacity-90 w-full h-14 rounded-r-md text-white shadow-md placeholder:italic font-montS placeholder:text-white px-4 "></input>
<div className="flex flex-row gap-2">
<button onClick={() => setShowCalendar(!showCalendar)} >Calendar</button>
</div>
{showCalendar && <CalendarPick />}
</div>
<button type='submit'>
venue
Check Venues
</button>
</div>

</form>
</FormikProvider>)}
</div>
Expand Down
26 changes: 13 additions & 13 deletions src/components/shared/CalendarPick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,27 @@ import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file


/*
const CalendarPick = ({ ranges, onChange, onSubmit, ...rest }) => {

const CalendarPick = ({ ranges, onChange, formik, ...rest }) => {
const [selectedDateRange, setSelectedDateRange] = useState({
startDate: new Date(),
endDate: new Date(),
key: "selection"
key: "selection",
});
const [show, setShow] = useState(false);


function formatDateDisplay(date, defaultText) {
if (!date) return defaultText;
return format(date, "MM/DD/YYYY");
return (date, "MM/DD/YYYY");
}

const handleSelect = ranges => {
setSelectedDateRange(ranges.selection);
console.log(ranges.selection);
};

// const onClickDone = () => {
// onSubmit(selectedDateRange);
// setShow(true);
// };


const onClickClear = () => {
setSelectedDateRange({
Expand All @@ -40,14 +38,14 @@ const CalendarPick = ({ ranges, onChange, onSubmit, ...rest }) => {

return (
<>
<div className="shadow d-inline-block">
<div className="absolute top-16">
<DateRangePicker
onChange={handleSelect}
showSelectionPreview={true}
moveRangeOnFirstSelection={false}
months={2}
months={1}
ranges={[selectedDateRange]}
direction="horizontal"
direction="vertical"
/>
<div className="text-right position-relative rdr-buttons-position mt-2 mr-3">
<button
Expand All @@ -65,16 +63,18 @@ const CalendarPick = ({ ranges, onChange, onSubmit, ...rest }) => {
</div>
</div>

{show&&<div className="h-100 mt-3 alert alert-transparent">
{show && <div className="h-100 mt-3 alert alert-transparent">
<p className="my-auto d-inline">Start Date :{" "}
{formatDateDisplay(selectedDateRange.startDate)}{" | "}
End Date :{" "}
{formatDateDisplay(selectedDateRange.endDate)}
</p>
<button className="mb-1 btn btn-transparent text-danger" onClick={() => setShow(false)} variant="outline-success"> Close</button>
{selectedDateRange.startDate && <input value={selectedDateRange.startDate} id='startDate' className="bg-purpleBlack opacity-90 w-full h-14 text-white shadow-md placeholder:italic font-montS rounded-md placeholder:text-white px-4"></input>}
<input value={selectedDateRange.endDate} id='endDate' className="rounded-md bg-purpleBlack opacity-90 w-full h-14 text-white shadow-md placeholder:italic font-montS placeholder:text-white px-4 "></input>
</div>}
</>
);
};

*/
export default CalendarPick;
12 changes: 8 additions & 4 deletions src/components/shared/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { NavLink, useLocation } from "react-router-dom";
import { NavLink, json, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import React from "react";
import { useState, useEffect } from "react";

const Header = () => {
const [showMenu, setMenu] = useState(false);

const { user: currentUser } = useSelector((state) => state.auth);
let username;
(currentUser ? username = currentUser.name : username = 'Log In')

const { pathname } = useLocation();
useEffect(() => {
setMenu(false);
Expand Down Expand Up @@ -48,7 +52,7 @@ font-montS
text-sm
fixed ${sticky}`;

const menuItems = [{title: 'Home', link: '/'}, {title: 'Venues', link: 'venues'}];
const menuItems = [{title: 'Home', link: '/'}, {title: 'Venues', link: 'venues'}, {title: <img src="profile_icon.svg" className="w-5" />, link: 'account'}, {title: username, link: 'account'}];


return (
Expand All @@ -59,9 +63,9 @@ const menuItems = [{title: 'Home', link: '/'}, {title: 'Venues', link: 'venues'}
</NavLink>
<div className="flex flex-row gap-6 md:gap-8 justify-end items-center w-full">
<nav className="hidden md:flex">
<ul className="flex flex-row gap-10 mr-10">
<ul className="flex flex-row gap-14 mr-2">
{menuItems.map((item) => (
<li className="hover:underline underline-offset-8">
<li className="hover:underline underline-offset-8 last-of-type:-ml-12">
<NavLink to={item.link}>{item.title}</NavLink>

</li>
Expand Down
Loading

1 comment on commit 72d17a9

@vercel
Copy link

@vercel vercel bot commented on 72d17a9 May 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

holidaze – ./

holidaze-solveigrebnord.vercel.app
holidaze-git-main-solveigrebnord.vercel.app
holidaze-lime.vercel.app

Please sign in to comment.