Skip to content

Functionality #10

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
wants to merge 7 commits into
base: backup-front
Choose a base branch
from
Open

Functionality #10

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
43b4137
added some style
hayaa123 Jan 3, 2022
19fbeb6
login
Jan 3, 2022
60228b5
finish
Jan 3, 2022
26fdb2f
done
Jan 3, 2022
5a40b05
regular checkout
MohammadAl-khatib Jan 3, 2022
2e67a5d
add newsfeed funcrionality
yahialabeeb Jan 3, 2022
36c4508
added header and footer
hayaa123 Jan 4, 2022
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
10 changes: 3 additions & 7 deletions contexts/auth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import jwt from 'jsonwebtoken';
import axios from 'axios'
const baseUrl = "http://127.0.0.1:8000/"
// const baseUrl = process.env.NEXT_PUBLIC_API_URL;
const tokenUrl = baseUrl + 'donater/auth/';
const tokenUrl = baseUrl + 'accounts/donater/auth/';

const AuthContext = createContext();

Expand All @@ -21,7 +21,7 @@ export function AuthProvider(props) {
login,
logout,
});

async function login(username, password) {

const response = await axios.post(tokenUrl, { username, password });
Expand All @@ -30,15 +30,11 @@ export function AuthProvider(props) {

const newState = {
tokens: response.data,
// user: {
// username: response.data.username,
// id: decodedAccess.user_id
// },
}

setState(prevState => ({ ...prevState, ...newState }));

}

function logout() {
const newState = {
tokens: null,
Expand Down
19 changes: 19 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"start": "next start"
},
"dependencies": {
"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5",
"@popperjs/core": "^2.11.0",
"axios": "^0.24.0",
Expand Down
238 changes: 238 additions & 0 deletions pages/Donar_component/editForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
import { useState } from "react";
import axios from "axios";
import { comment } from "postcss";
import { Component } from "react/cjs/react.production.min";
import { useAuth } from "../../contexts/auth";

export default function Example(props) {
const { tokens } = useAuth();
let role = {
Doner: "donater",
Patient: "patient",
};
const handlesubmit = async (e) => {
let data = new FormData();
e.preventDefault();
data.append("first_name", e.target.firstname.value);
data.append("username", e.target.username.value);
data.append("email", e.target.email.value);
data.append("image", e.target.img.files[0]);
data.append("phone_number", e.target.phone_number.value);
data.append("chronic_diseases", e.target.chronic_diseases.checked);
data.append("blood_type", props.result.blood_type);
if (tokens.Role == "Patient") {
data.append("reason", e.target.reason.value);
}
let url = `http://127.0.0.1:8000/accounts/${role[tokens.Role]}/${
tokens.id
}/`;

axios
.put(`http://127.0.0.1:8000/blood/update-blood/1/`, {
blood_type: e.target.bloodType.value,
})
.then(() => {
axios
.put(url, data, {
headers: {
"content-type": "multipart/form-data",
},
})
.then((res) => {
console.log(res);
props.setResult(res.data);
});
});

props.setEditForm(false);
};
return (
<>
<div>
<div className=" w-4/5 m-auto">
<div className="mt-5 md:mt-0 md:col-span-2">
<form action="#" method="POST" onSubmit={handlesubmit}>
<div className="shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
<div className="grid grid-cols-1 gap-6">
<div className="grid grid-cols-6 gap-6">
<div className="col-span-6 sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
First name
</label>
<input
defaultValue={props.result.first_name}
type="text"
name="firstname"
id="first-name"
autoComplete="given-name"
className="mt-1 focus:ring-red-500 focus:border-red-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
</div>
<div className="col-span-6 sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
User Name
</label>
<input
defaultValue={props.result.username}
type="text"
name="username"
id="first-name"
autoComplete="given-name"
className="mt-1 focus:ring-red-500 focus:border-red-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
Email
</label>
<input
defaultValue={props.result.email}
name="email"
type="text"
id="first-name"
autoComplete="given-name"
className="mt-1 focus:ring-red-500 focus:border-red-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
Phone Number
</label>
<input
type="text"
defaultValue={props.result.phone_number}
name="phone_number"
id="first-name"
autoComplete="given-name"
className="mt-1 focus:ring-red-500 focus:border-red-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border"
/>
</div>
<div>
<label
htmlFor="about"
className="block text-sm font-medium text-gray-700"
>
About
</label>
<div className="mt-1">
<textarea
id="about"
name="about"
rows={3}
className="shadow-sm focus:ring-red-500 focus:border-red-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
placeholder="you@example.com"
defaultValue={""}
/>
</div>
<p className="mt-2 text-sm text-gray-500">
Brief description for your profile. URLs are hyperlinked.
</p>
</div>
<div className="col-span-6 sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
Chronic Diseases
</label>
<input
type="checkbox"
defaultValue={props.result.chronic_diseases}
name="chronic_diseases"
id="first-name"
autoComplete="given-name"
className="mt-1 focus:ring-red-500 focus:border-red-500 block w-2 shadow-sm sm:text-sm border-gray-300 rounded-md border"
/>
</div>
<div className="col-span-6 sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
Blood Type
</label>
<input
type="text"
name="bloodType"
id="first-name"
autoComplete="given-name"
className="mt-1 focus:ring-red-500 focus:border-red-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border"
/>
</div>
{tokens.Role == "Patient" && <div className="col-span-6 sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
Reason
</label>
<input
type="text"
name="reason"
defaultValue='Empty'
id="first-name"
autoComplete="given-name"
className="mt-1 focus:ring-red-500 focus:border-red-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md border"
/>
</div>}
<div>
<label className="block text-sm font-medium text-gray-700">
Photo
</label>
<div className="mt-1 flex items-center">
{/* <span className="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"> */}
<input
type="file"
ref={(input) => {
Component.inpuElement = input;
}}
accept="image/*"
name="img"
/>
{/* </span> */}
{/* <button
type="button"
className="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
>
Change
</button> */}
</div>
</div>
</div>
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
>
Save
</button>
</div>
</div>
</form>
</div>
</div>
</div>

<div className="hidden sm:block" aria-hidden="true">
<div className="py-5">
<div className="border-t border-gray-200" />
</div>
</div>
</>
);
}
77 changes: 77 additions & 0 deletions pages/Donar_component/userProfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { useState, useEffect } from "react";
import EditForm from "./editForm";
import axios from "axios";
import { useAuth } from "../../contexts/auth";
import { PencilAltIcon } from "@heroicons/react/outline";
import { Result } from "postcss";
import UserInfo from "../home_compnenet/UserInfo";
import Header2 from "../layout/Header2";
import Footer from "../home_compnenet/Footer";
function UserProfile() {
const {tokens } = useAuth();
let role = {
Doner: "donater",
Patient: "patient",
};
const [result, setResult] = useState([]);
const [editForm, setEditForm] = useState(false);
let submitHandler = async (e) => {
e.preventDefault();
setEditForm(true);
};
let deleteHandler = async () => {
await axios.delete(
`http://127.0.0.1:8000/accounts/${role[tokens.Role]}/${tokens.id}`
);
};
useEffect(async () => {
await axios
.get(`http://127.0.0.1:8000/accounts/${role[tokens.Role]}/${tokens.id}`)
.then((data) => {
setResult(data.data);
});
}, []);

return (
<>
<Header2/>
<div className="">
<div className="bg-top bg-[length:100%_50%] h-[35rem] p-[7rem] bg-[url('https://www.solidbackgrounds.com/images/3840x2160/3840x2160-dark-red-solid-color-background.jpg')] bg-no-repeat ">
<img
src={result.image}
alt="person"
className="object-cover m-auto rounded-full h-80 w-80"
/>
<h1 className="text-4xl text-center text-blue-900 m-9">
{result.first_name}
</h1>
</div>


<div className="mt-12">
{!editForm ? (
<>
<UserInfo result={result} submitHandler={submitHandler} />

<button
className="mt-12 text-red-600 border-2 border-red-600 border-dashed rounded-lg h-9 w-36 ml-52"
onClick={deleteHandler}
>
Remove Account
</button>
</>
) : (
<EditForm
result={result}
setEditForm={setEditForm}
setResult={setResult}
/>
)}
</div>
</div>
<Footer/>
</>
);
}

export default UserProfile;
Loading