Set avatar through URL
This commit is contained in:
parent
7d7b627304
commit
c2dfbaad88
2 changed files with 16 additions and 5 deletions
|
@ -26,6 +26,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||||
const username = req.body.username;
|
const username = req.body.username;
|
||||||
const name = req.body.name;
|
const name = req.body.name;
|
||||||
const description = req.body.description;
|
const description = req.body.description;
|
||||||
|
const avatar = req.body.avatar;
|
||||||
const timeZone = req.body.timeZone;
|
const timeZone = req.body.timeZone;
|
||||||
|
|
||||||
const updateUser = await prisma.user.update({
|
const updateUser = await prisma.user.update({
|
||||||
|
@ -35,6 +36,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||||
data: {
|
data: {
|
||||||
username,
|
username,
|
||||||
name,
|
name,
|
||||||
|
avatar,
|
||||||
bio: description,
|
bio: description,
|
||||||
timeZone: timeZone,
|
timeZone: timeZone,
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useRef, useState } from 'react';
|
import { useRef, useState } from 'react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
import prisma from '../../lib/prisma';
|
import prisma from '../../lib/prisma';
|
||||||
import Modal from '../../components/Modal';
|
import Modal from '../../components/Modal';
|
||||||
import Shell from '../../components/Shell';
|
import Shell from '../../components/Shell';
|
||||||
|
@ -10,10 +11,12 @@ import TimezoneSelect from 'react-timezone-select';
|
||||||
|
|
||||||
export default function Settings(props) {
|
export default function Settings(props) {
|
||||||
const [ session, loading ] = useSession();
|
const [ session, loading ] = useSession();
|
||||||
|
const router = useRouter();
|
||||||
const [successModalOpen, setSuccessModalOpen] = useState(false);
|
const [successModalOpen, setSuccessModalOpen] = useState(false);
|
||||||
const usernameRef = useRef();
|
const usernameRef = useRef();
|
||||||
const nameRef = useRef();
|
const nameRef = useRef();
|
||||||
const descriptionRef = useRef();
|
const descriptionRef = useRef();
|
||||||
|
const avatarRef = useRef();
|
||||||
|
|
||||||
const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone });
|
const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone });
|
||||||
|
|
||||||
|
@ -33,18 +36,20 @@ export default function Settings(props) {
|
||||||
const enteredUsername = usernameRef.current.value;
|
const enteredUsername = usernameRef.current.value;
|
||||||
const enteredName = nameRef.current.value;
|
const enteredName = nameRef.current.value;
|
||||||
const enteredDescription = descriptionRef.current.value;
|
const enteredDescription = descriptionRef.current.value;
|
||||||
|
const enteredAvatar = avatarRef.current.value;
|
||||||
const enteredTimeZone = selectedTimeZone.value;
|
const enteredTimeZone = selectedTimeZone.value;
|
||||||
|
|
||||||
// TODO: Add validation
|
// TODO: Add validation
|
||||||
|
|
||||||
const response = await fetch('/api/user/profile', {
|
const response = await fetch('/api/user/profile', {
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, timeZone: enteredTimeZone}),
|
body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone}),
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router.replace(router.asPath);
|
||||||
setSuccessModalOpen(true);
|
setSuccessModalOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -111,7 +116,7 @@ export default function Settings(props) {
|
||||||
<div className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true">
|
<div className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true">
|
||||||
<img className="rounded-full h-full w-full" src={props.user.avatar} alt="" />
|
<img className="rounded-full h-full w-full" src={props.user.avatar} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-5 rounded-md shadow-sm">
|
{/* <div className="ml-5 rounded-md shadow-sm">
|
||||||
<div className="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
|
<div className="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
|
||||||
<label htmlFor="user_photo" className="relative text-sm leading-4 font-medium text-gray-700 pointer-events-none">
|
<label htmlFor="user_photo" className="relative text-sm leading-4 font-medium text-gray-700 pointer-events-none">
|
||||||
<span>Change</span>
|
<span>Change</span>
|
||||||
|
@ -119,18 +124,22 @@ export default function Settings(props) {
|
||||||
</label>
|
</label>
|
||||||
<input id="user_photo" name="user_photo" type="file" className="absolute w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
|
<input id="user_photo" name="user_photo" type="file" className="absolute w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden relative rounded-full overflow-hidden lg:block">
|
<div className="hidden relative rounded-full overflow-hidden lg:block">
|
||||||
{props.user.avatar && <img className="relative rounded-full w-40 h-40" src={props.user.avatar} alt="" />}
|
{props.user.avatar && <img className="relative rounded-full w-40 h-40" src={props.user.avatar} alt="" />}
|
||||||
{!props.user.avatar && <div className="relative bg-blue-600 rounded-full w-40 h-40"></div>}
|
{!props.user.avatar && <div className="relative bg-blue-600 rounded-full w-40 h-40"></div>}
|
||||||
<label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
|
{/* <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
|
||||||
<span>Change</span>
|
<span>Change</span>
|
||||||
<span className="sr-only"> user photo</span>
|
<span className="sr-only"> user photo</span>
|
||||||
<input type="file" id="user-photo" name="user-photo" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
|
<input type="file" id="user-photo" name="user-photo" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
|
||||||
</label>
|
</label> */}
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<label htmlFor="avatar" className="block text-sm font-medium text-gray-700">Avatar URL</label>
|
||||||
|
<input ref={avatarRef} type="text" name="avatar" id="avatar" placeholder="URL" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.avatar} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue