Skip to content

feat: Connected home page to backend 🛸 #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EmperorYP7 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: Connected home page to backend 🛸 #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
371114f
Implemented Provider Operations 🏥 (#23)
EmperorYP7 May 9, 2021
0b3bd6c
Implemented User Login and Register 🔒 (#26)
RishavMz May 9, 2021
79c8f65
Fixed Login, Providers and Org page 🔨 (#27)
EmperorYP7 May 10, 2021
16863e7
Connecting HomePage to backend 🔌 🚀 (#30)
EmperorYP7 May 12, 2021
0d003e0
Merge branch 'main' of https://github.com/EmperorYP7/CoviSource into dev
EmperorYP7 May 12, 2021
14a8b8b
Removed unnecessary directories 🗑️ (#33)
sb2356-iiitr May 14, 2021
5b4c2ea
Added Google OAuth 🔑 (#34)
EmperorYP7 May 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/.env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
REACT_APP_GOOGLE_MAPS_API_KEY=AIzaSyCxttBHhvoDHLXbUgnMtjO3OVDw46iFSQw
REACT_APP_SERVER_URL=http://localhost:4000/graphql
REACT_APP_GOOGLE_OAUTH=962299963873-vfn6gg5ig0ilop0v70fgi7bonovplopr.apps.googleusercontent.com
6 changes: 6 additions & 0 deletions client/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,10 @@ module.exports = {
"plugin:react/recommended",
"plugin:prettier/recommended",
],
rules: {
'prettier/prettier': [
'error',
{endOfLine: 'auto'}
]
},
};
1 change: 1 addition & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"react": "^17.0.2",
"react-datetime": "2.16.3",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"react-slick": "0.26.1",
Expand Down
16 changes: 12 additions & 4 deletions client/src/CoviSource/Components/Pages/CreateProvider/CreateProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
// @material-ui/icons
import LocationCity from "@material-ui/icons/LocationCity";
// import People from "@material-ui/icons/People";
import Hospital from "@material-ui/icons/LocalHospital";
// core components
import GridContainer from "components/Grid/GridContainer.js";
Expand All @@ -23,10 +22,10 @@ import "./CreateProvider.scss";

import image from "assets/img/bg7.jpg";
import CreateContact from "./CreateContact";
import { useMutation } from "@apollo/client";
import { useMutation, useQuery } from "@apollo/client";
import { CREATE_PROVIDER } from "CoviSource/graphql/mutations/Provider/CreateProvider";
import CreateResource from "./CreateResource";
// import Map from "CoviSource/Components/UtilityComponents/Map/Map";
import { GET_USER } from "CoviSource/graphql/queries/User/GetUser";

const useStyles = makeStyles(styles);

Expand All @@ -40,6 +39,16 @@ const formReducer = (state, event) => {
export default function CreateProvider(props) {
const [formData, setFormData] = useReducer(formReducer, {});
const [resourceData, setresourceData] = useState({});
const {
data: queryData,
error: queryError,
loading: queryLoading,
} = useQuery(GET_USER);
if (queryLoading) return <>Loading...</>;
if (queryError) return <>Error</>;
if (queryData.me === null) {
window.location.assign("/login");
}
const [cardAnimaton, setCardAnimation] = useState("cardHidden");
const [numberContact, setNumberContact] = useState(0);
const [createProvider, { loading, data, error }] = useMutation(
Expand All @@ -62,7 +71,6 @@ export default function CreateProvider(props) {
name: event.target.name,
value: event.target.value,
});
console.log(formData);
};
const handleSubmit = (event) => {
event.preventDefault();
Expand Down
168 changes: 1 addition & 167 deletions client/src/CoviSource/Components/Pages/LandingPage/LandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,8 @@ import classNames from "classnames";

// core components
import Header from "CoviSource/Components/UtilityComponents/Header/Header";

// import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
// import Button from "components/CustomButtons/Button.js";
import Parallax from "components/Parallax/Parallax.js";

// sections for the page
Expand All @@ -34,174 +31,11 @@ export default function LandingPage(props) {
const { loading, data, error } = useQuery(GET_ALL_PROVIDERS);
if (loading) return <>Loading...</>;
if (error) return <>Error</>;
if (data) console.log(data);

// const [data, setData] = useState([
// {
// username: "someUsername",
// resourceProviderName: "Resource Provider Name",
// availability: "UNUPDATED",
// resources: [
// {
// resource: "Oxygen refilling",
// quantity: 32,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Hospital Beds",
// quantity: 23,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Remdesivir Vials",
// quantity: 65,
// updated: "06:00 PM, 27 APRIL",
// },
// ],
// address: "Provider Address",
// contactPersonName: "Contact Person's Name",
// phoneNumber: "9821095754",
// serviceName: "Service Provided",
// },
// {
// username: "anotherUsername",
// resourceProviderName: "Free oxygen seva vijaya nagar",
// availability: "AVAILABLE",
// resources: [
// {
// resource: "Oxygen refilling",
// quantity: 32,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Hospital Beds",
// quantity: 23,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Remdesivir Vials",
// quantity: 65,
// updated: "06:00 PM, 27 APRIL",
// },
// ],
// address: "Free oxygen seva, near gurudwara, delhi",
// contactPersonName: "Jaspal Singh",
// phoneNumber: "9821095754",
// serviceName: "Oxygen refilling",
// },
// {
// username: "anotherUsername2",
// resourceProviderName: "Apex Hospital",
// availability: "UNAVAILABLE",
// resources: [
// {
// resource: "Oxygen Cylinders",
// quantity: 0,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Hospital Beds",
// quantity: 0,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Remdesivir Vials",
// quantity: 0,
// updated: "06:00 PM, 27 APRIL",
// },
// ],
// address: "Apex Hospital, Kalyan West, Mumbai",
// contactPersonName: "Dr. D P Goel",
// phoneNumber: "9789965234",
// serviceName: "Hospital",
// },
// ]);

const onSearchButtonClick = function () {
console.log("Search Button Clicked");

// a fetch operation will be made here which will then update the state -> data;
// setData([
// {
// username: "someUsername",
// resourceProviderName: "Resource Provider Name",
// availability: "UNUPDATED",
// resources: [
// {
// resource: "Oxygen refilling",
// quantity: 32,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Hospital Beds",
// quantity: 23,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Remdesivir Vials",
// quantity: 65,
// updated: "06:00 PM, 27 APRIL",
// },
// ],
// address: "Provider Address",
// contactPersonName: "Contact Person's Name",
// phoneNumber: "9821095754",
// serviceName: "Service Provided",
// },
// {
// username: "anotherUsername",
// resourceProviderName: "Free oxygen seva vijaya nagar",
// availability: "AVAILABLE",
// resources: [
// {
// resource: "Oxygen refilling",
// quantity: 32,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Hospital Beds",
// quantity: 23,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Remdesivir Vials",
// quantity: 65,
// updated: "06:00 PM, 27 APRIL",
// },
// ],
// address: "Free oxygen seva, near gurudwara, delhi",
// contactPersonName: "Jaspal Singh",
// phoneNumber: "9821095754",
// serviceName: "Oxygen refilling",
// },
// {
// username: "anotherUsername2",
// resourceProviderName: "Apex Hospital",
// availability: "UNAVAILABLE",
// resources: [
// {
// resource: "Oxygen Cylinders",
// quantity: 0,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Hospital Beds",
// quantity: 0,
// updated: "06:00 PM, 27 APRIL",
// },
// {
// resource: "Remdesivir Vials",
// quantity: 0,
// updated: "06:00 PM, 27 APRIL",
// },
// ],
// address: "Apex Hospital, Kalyan West, Mumbai",
// contactPersonName: "Dr. D P Goel",
// phoneNumber: "9789965234",
// serviceName: "Hospital",
// },
// ]);
};

const renderResourcesCards = () => {
return (
<div
Expand Down
91 changes: 72 additions & 19 deletions client/src/CoviSource/Components/Pages/LoginPage/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,10 @@ import "./Login.scss";

import image from "assets/img/bg7.jpg";

import { useMutation } from "@apollo/client";
import { useMutation, useQuery } from "@apollo/client";
import { LOGIN } from "CoviSource/graphql/mutations/User/Login";
import GoogleLogin from "react-google-login";
import { GET_USER } from "CoviSource/graphql/queries/User/GetUser";

const useStyles = makeStyles(styles);

Expand All @@ -43,7 +45,18 @@ export default function Login(props) {
const classes = useStyles();
const { ...rest } = props;

const [login, { data, loading }] = useMutation(LOGIN);
const [login, { data, error, loading }] = useMutation(LOGIN);
const {
data: queryData,
error: queryError,
loading: queryLoading,
} = useQuery(GET_USER);

if (queryLoading) return <>Loading...</>;
if (queryError) return <>Error</>;
if (queryData.me) {
window.location.assign("/");
}

const handleChange = (event) => {
setFormData({
Expand All @@ -62,14 +75,17 @@ export default function Login(props) {
},
},
});
if (!loading) {
if (data) {
if (data.login.errors) {
alert(data.login.errors[0].message);
} else {
alert("Logged In!");
window.location.assign("/");
}
if (loading);
if (error) {
alert(error);
return;
}
if (data) {
if (data.login.errors) {
alert(data.login.errors[0].message);
} else {
alert("Logged In!");
window.location.assign("/");
}
}
};
Expand All @@ -79,6 +95,33 @@ export default function Login(props) {
color: "white",
};

const googleSuccess = async (res) => {
await login({
variables: {
input: {
email: res.profileObj.email,
password: res.qc.login_hint,
},
},
});
if (loading);
if (error) {
alert(error);
return;
}
if (data) {
if (data.login.errors) {
alert(data.login.errors[0].message);
} else {
alert("Logged In!");
window.location.assign("/");
}
}
};
const googleFailure = () => {
alert("Google Signin was unsucessfull.");
};

return (
<div>
<Header
Expand All @@ -103,15 +146,25 @@ export default function Login(props) {
<CardHeader color="primary" className={classes.cardHeader}>
<h4>Login</h4>
<div className={classes.socialLine}>
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={(e) => e.preventDefault()}
>
<i className={"fab fa-google-plus-g"} />
</Button>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_OAUTH}
render={(renderProps) => (
<Button
justIcon
href="#pablo"
target="_blank"
color="transparent"
onClick={renderProps.onClick}
disabled={renderProps.disabled}
variant="contained"
>
<i className={"fab fa-google-plus-g"} />
</Button>
)}
onSuccess={googleSuccess}
onFailure={googleFailure}
cookiePolicy="single_host_origin"
/>
</div>
</CardHeader>
<p className={classes.divider}>Or Be Classical</p>
Expand Down
3 changes: 0 additions & 3 deletions client/src/CoviSource/Components/Pages/OrganisationPage/OrganisationPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,6 @@ export default function OrganisationPage() {
console.log(error);
return <>Error</>;
}
if (data) {
console.log(data);
}

const getBannerClass = function () {
return "banner banner" + status[data.availability];
Expand Down
Loading