diff --git a/src/App.tsx b/src/App.tsx index d21a606..ca41992 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ -import { Redirect, Route } from 'react-router-dom'; -import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react'; +import { Redirect, Route, Switch } from 'react-router-dom'; +import { IonApp, IonItem, IonRouterOutlet, setupIonicReact } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; /* Core CSS required for Ionic components to work properly */ @@ -38,8 +38,6 @@ import JoiningLetter from './pages/joiningLetter/JoiningLetter'; import Celebration from './pages/celebration/Celebration'; import SignaturePhoto from './pages/joiningLetter/SignaturePhoto'; import TechinicalInterviewResults from './pages/technicalInterview/TechinicalInterviewResults'; -import CountdownTimer from './components/CountDownTimer/CountdownTimer'; - setupIonicReact(); @@ -48,67 +46,68 @@ const App: React.FC = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Toast/Toast.module.scss b/src/components/Toast/Toast.module.scss new file mode 100644 index 0000000..88c310d --- /dev/null +++ b/src/components/Toast/Toast.module.scss @@ -0,0 +1,56 @@ +.toastContent { + width: 90%; + position: fixed; + bottom:5%; + left: 5%; + z-index: 10; + + .toastHolder { + display: flex; + align-items: center; + justify-content: space-between; + border: 0.1rem solid transparent; + border-radius: 2.5rem; + background-color: white; + min-height: 4rem; + + .messageHolder { + display: flex; + align-items: center; + margin-left: 1.5rem; + + .text { + margin-left: 1rem; + font-size: 1.4rem; + } + } + + .closeIcon { + color: #ec0b6d; + min-width: 20px; + height: 20px; + margin-right: 10px; + } + + .checkIcon { + width: 20px; + height: 20px; + color: #00ae8d; + } + + .errorIcon { + min-width: 20px; + height: 20px; + color: #ea7a7a; + } + } + + .error { + box-shadow: 0 0 15px #ea7a7a; + } + + .success { + box-shadow: 0 0 15px #00ae8d; + } + +} \ No newline at end of file diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx new file mode 100644 index 0000000..528cb33 --- /dev/null +++ b/src/components/Toast/Toast.tsx @@ -0,0 +1,48 @@ +import { IonIcon, IonItem } from "@ionic/react"; +import styles from "./Toast.module.scss"; +import { checkmarkCircle, closeCircle, alertCircle } from 'ionicons/icons'; +import { useEffect, useState } from "react"; + + +interface OwnProps { + message: string; + messageType: string; + showToast: boolean; +} + +const Toast: React.FC = (props) => { + + const [showToast, setShowToast] = useState(props.showToast); + console.log("show props", props.showToast); + + useEffect(() => { + setShowToast(props.showToast); + }, [props.showToast]); + + // const [showToast, setShowToast] = useState(props.showToast); + console.log(showToast) + + const closeToast = () => { + setShowToast(false); + } + + setTimeout(() => { + closeToast(); + }, 3000); + + + + return ( +
+ {showToast && < div className={styles.toastHolder + " " + styles.error} > +
+ +
invalid Input
+
+ +
} + + ); +} + +export default Toast; \ No newline at end of file diff --git a/src/components/formInput/Input.tsx b/src/components/formInput/Input.tsx index 3c8035c..69c1e6d 100644 --- a/src/components/formInput/Input.tsx +++ b/src/components/formInput/Input.tsx @@ -1,14 +1,26 @@ import styles from './Input.module.scss'; import { IonIcon, IonInput, IonItem, IonLabel } from '@ionic/react'; +import { useEffect, useState } from 'react'; interface Props { placeholder?: string; type?: "text" | "email" | "password" | "number"; icon?: string; text?: string; + isInputSet?: (isSet: boolean) => void; } const Input: React.FC = (props) => { + const [inputText, setInputText] = useState(undefined); + + useEffect(() => { + if (inputText) { + props.isInputSet!(true); + } else { + props.isInputSet!(false); + } + }, [inputText]) + return (
@@ -21,7 +33,8 @@ const Input: React.FC = (props) => { {props.text} } + placeholder={props.placeholder ? props.placeholder : ""} + onIonChange={e => setInputText(e.detail.value!)}>
diff --git a/src/mockData/QuizDetails.tsx b/src/mockData/QuizDetails.tsx index 666adac..cf2115a 100644 --- a/src/mockData/QuizDetails.tsx +++ b/src/mockData/QuizDetails.tsx @@ -6,7 +6,6 @@ interface QuizDetails { timeLimit: number; } - let quizDetails: QuizDetails[] = [ { question: "How would you correctly display, “Hello, how are you?”?", diff --git a/src/pages/assignment/Assignment.module.scss b/src/pages/assignment/Assignment.module.scss index 0290154..d18b756 100644 --- a/src/pages/assignment/Assignment.module.scss +++ b/src/pages/assignment/Assignment.module.scss @@ -1,7 +1,7 @@ .assignment { .description { - height: 75vh; + height: 74vh; .icon { margin-top: 4rem; diff --git a/src/pages/assignment/SubmitAssignment.module.scss b/src/pages/assignment/SubmitAssignment.module.scss index cdbed4a..a767ade 100644 --- a/src/pages/assignment/SubmitAssignment.module.scss +++ b/src/pages/assignment/SubmitAssignment.module.scss @@ -2,7 +2,7 @@ .description { height: 50vh; .icon { - margin-top: 4rem; + padding-top: 4rem; display: flex; justify-content: center; ion-icon { @@ -34,13 +34,13 @@ .inputHolder { width: 95%; margin: 0 auto; + height: 25vh; } .submitAssigment { text-decoration: none; ion-button { width: 90%; margin: 0 auto; - margin-top: 12rem; --background: var(--primary-button-color); } } diff --git a/src/pages/assignment/SubmitAssignment.tsx b/src/pages/assignment/SubmitAssignment.tsx index 4235751..fa263f2 100644 --- a/src/pages/assignment/SubmitAssignment.tsx +++ b/src/pages/assignment/SubmitAssignment.tsx @@ -1,15 +1,32 @@ import styles from "./SubmitAssignment.module.scss"; -import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react" +import { IonButton, IonContent, IonIcon, IonPage, useIonToast } from "@ionic/react" import assignmentImage from "../../assets/icons/Assignment.svg"; import StepHeader from "../../components/stepsHeader/StepHeader"; import Input from "../../components/formInput/Input"; -import linkIcon from "../../assets/icons/link.svg"; -import time from "../../assets/icons/time.svg"; -import { linkOutline } from 'ionicons/icons' +import { linkOutline } from 'ionicons/icons'; import { Link } from "react-router-dom"; - +import { useState } from "react"; const SubmitAssignment: React.FC = () => { + + const [isInput, setIsInput] = useState(false); + const [present, dismiss] = useIonToast(); + + const isInputSet = (isSet: boolean) => { + setIsInput(isSet); + } + + + const showToast = () => { + if (!isInput) { + present({ + buttons: [{ text: 'close', handler: () => dismiss() }], + message: 'insert project link to submit', + duration: 2000 + }) + } + } + return ( @@ -19,7 +36,6 @@ const SubmitAssignment: React.FC = () => {
-
@@ -31,12 +47,17 @@ const SubmitAssignment: React.FC = () => {
- +
- + Submit + ); diff --git a/src/pages/finalInterview/FinalInterview.tsx b/src/pages/finalInterview/FinalInterview.tsx index 2ee6bb8..4a0c074 100644 --- a/src/pages/finalInterview/FinalInterview.tsx +++ b/src/pages/finalInterview/FinalInterview.tsx @@ -7,6 +7,8 @@ import locationIcon from "../../assets/icons/location.svg"; import { Link } from "react-router-dom"; import { useState } from "react"; import TimeSlot from "../../components/timeSlot/TimeSlot"; +import { useCountdown } from "../../components/CountDownTimer/useCountdown"; +import { addDays } from "date-fns"; interface dates { date: string; @@ -18,6 +20,8 @@ const FinalInterview: React.FC = () => { const [isDateSet, setDate] = useState(false); const [isTimeSlot, setTimeSlot] = useState(false); + const [days, hours, minutes, seconds] = useCountdown(addDays(new Date(), 3)); + const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"]; const dates: dates[] = [ diff --git a/src/pages/technicalInterview/TechnicalInterview.tsx b/src/pages/technicalInterview/TechnicalInterview.tsx index 59549c7..4d7233f 100644 --- a/src/pages/technicalInterview/TechnicalInterview.tsx +++ b/src/pages/technicalInterview/TechnicalInterview.tsx @@ -21,7 +21,8 @@ const TechnicalInterview: React.FC = () => { const [isDateSet, setDate] = useState(false); const [isTimeSlot, setTimeSlot] = useState(false); - const [days, hours, minutes, seconds] = useCountdown(addDays(new Date(), 2)); + + const [days, hours, minutes, seconds] = useCountdown(addDays(new Date(), 3)); console.log(days, hours, minutes, seconds);