Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
44 changes: 42 additions & 2 deletions apps/X/app/api/user/route.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { PrismaClient } from "@prisma/client";
import { authOptions } from "app/lib/auth";
import { getServerSession } from "next-auth";
import { NextResponse } from "next/server";
import { NextRequest, NextResponse } from "next/server";

const prisma = new PrismaClient();

Expand All @@ -10,7 +10,6 @@ export const GET = async () => {
if (!session) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}

const userID = session.user.id;

try {
Expand All @@ -34,3 +33,44 @@ export const GET = async () => {
});
}
};

interface EditUserInfoProp {
username: string;
bio: string;
location: string;
biolink: string;
dob: string;
}

export const POST = async (req: NextRequest) => {
console.log("Hitting here");
try {
const session = await getServerSession(authOptions);
if (!session) {
return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
}
const user: EditUserInfoProp = await req.json();
const userID = session?.user?.id;

const updatedUser = await prisma.user.update({
data: {
username: user.username,
bio: user.bio,
location: user.location,
bioLink: user.biolink,
DOB: user.dob,
},
where: { id: userID },
});

return NextResponse.json(
{ message: "Profile updated successfully", data: updatedUser },
{ status: 200 }
);
} catch (error) {
return NextResponse.json(
{ message: "Getting error while Updating User Profile" },
{ status: 500 }
);
}
};
1 change: 0 additions & 1 deletion apps/X/src/components/ui/Post/TopPostHome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export const TopPost = () => {
setPostInput(e.target.value);
};
const handelClick = async () => {
console.log(postInput);
if (!session?.user?.email) {
console.error("No User session found");
return;
Expand Down
107 changes: 107 additions & 0 deletions apps/X/src/components/ui/Profile/EditProfileComp.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
"use client";
import axios from "axios";
import { Button } from "../button";
import { useState } from "react";

interface ProfileFormData {
username: string;
bio: string;
location: string;
biolink: string;
dob: string;
}

export const EditProfileComp = () => {
const [formInput, setFormInput] = useState<ProfileFormData>({
username: "",
bio: "",
location: "",
biolink: "",
dob: "",
});

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormInput((prev) => ({
...prev,
[name]: value,
}));
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log("submiting", formInput);
try {
const response = await axios.post("/api/user", formInput);
} catch (error) {
console.error("Error updating Profile", error);
}
};
return (
<div>
<div>
<form onSubmit={handleSubmit}>
<div className="flex items-center justify-between">
<p className="text-xl font-semibold">Edit profile</p>
<Button type="submit" className="rounded-2xl px-5 py-1">
Save
</Button>
</div>
<div>
<div className="flex flex-col border mt-3">
<label className="text-sm text-slate-500 pl-2 pt-1">Name</label>
<input
name="username"
value={formInput.username}
className="border-none focus:outline-none bg-transparent pl-2 pb-1 pt-1"
onChange={handleChange}
/>
</div>
<div className="flex flex-col border mt-6">
<label className="text-sm text-slate-500 pl-2 pt-1">Bio</label>
<input
name="Bio"
value={formInput.bio}
className="border-none focus:outline-none bg-transparent pl-2 h-16 pb-1 pt-1"
onChange={handleChange}
/>
</div>
<div className="flex flex-col border mt-6">
<label className="text-sm text-slate-500 pl-2 pt-1">
Location
</label>
<input
name="Location"
value={formInput.location}
className="border-none focus:outline-none bg-transparent pl-2 pb-1 pt-1"
onChange={handleChange}
/>
</div>
<div className="flex flex-col border mt-6">
<label className="text-sm text-slate-500 pl-2 pt-1">
Website
</label>
<input
name="Website"
value={formInput.biolink}
className="border-none focus:outline-none bg-transparent pl-2 pb-1 pt-1"
onChange={handleChange}
/>
</div>
<div className="flex flex-col border mt-6">
<label className="text-sm text-slate-500 pl-2 pt-1 pb-1">
Date of Birth
</label>
<input
type="date"
name="DOB"
value={formInput.dob}
className="border-none focus:outline-none text-slate-700 bg-transparent pl-2"
onChange={handleChange}
/>
</div>
</div>
</form>
</div>
</div>
);
};
154 changes: 15 additions & 139 deletions apps/X/src/components/ui/Profile/UserInfo.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { TopHeader } from "@/components/TopHeader";
import { LoaderComp } from "@/components/LoaderComp";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
import axios from "axios";
import { useSession } from "next-auth/react";
Expand All @@ -9,11 +10,8 @@ import { AiOutlineLink } from "react-icons/ai";
import { GrLocation } from "react-icons/gr";
import { IoCalendarOutline } from "react-icons/io5";
import { PiBalloon } from "react-icons/pi";
import { Button } from "../button";
import { TweetComp } from "../TweetComp";
import { NextResponse } from "next/server";
import { LoaderComp } from "@/components/LoaderComp";

import { EditProfileComp } from "./EditProfileComp";
interface UserDataProps {
DOB: string;
location: string;
Expand Down Expand Up @@ -61,7 +59,7 @@ export const UserInfo = () => {
try {
const response = await axios.get(`api/post/$[userID]`);
const tweetsByUser = response.data.data;
console.log(tweetsByUser, "This is from user");
// console.log(tweetsByUser, "This is from user");
setUserTweet(tweetsByUser);
} catch (error) {
console.log(error);
Expand Down Expand Up @@ -96,9 +94,17 @@ export const UserInfo = () => {
</div>
<div className="text-right pr-4 mt-4">
<div>
<Button className="bg-black text-white rounded-2xl border px-7 border-white hover:bg-neutral-900 transition duration-200 font-bold text-md">
{/* <Button className="bg-black text-white rounded-2xl border px-7 border-white hover:bg-neutral-900 transition duration-200 font-bold text-md">
Edit Profile
</Button>
</Button> */}
<Dialog>
<DialogTrigger className="bg-black text-white rounded-2xl border px-7 border-white hover:bg-neutral-900 transition duration-200 font-bold text-md">
Edit Profile
</DialogTrigger>
<DialogContent className="bg-black w-full">
<EditProfileComp />
</DialogContent>
</Dialog>
</div>
</div>
</div>
Expand Down Expand Up @@ -145,137 +151,7 @@ export const UserInfo = () => {
<span className="text-gray-500 ml-1">Followers</span>
</div>
</div>
</div>

{/* <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
<ul
className="flex flex-wrap -mb-px text-sm font-medium text-center"
id="default-styled-tab"
data-tabs-toggle="#default-styled-tab-content"
data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-purple-600 dark:border-purple-500"
data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
role="tablist"
>
<li className="me-2" role="presentation">
<button
className="inline-block p-4 border-b-2 rounded-t-lg"
id="profile-styled-tab"
data-tabs-target="#styled-profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li className="me-2" role="presentation">
<button
className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
id="dashboard-styled-tab"
data-tabs-target="#styled-dashboard"
type="button"
role="tab"
aria-controls="dashboard"
aria-selected="false"
>
Dashboard
</button>
</li>
<li className="me-2" role="presentation">
<button
className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
id="settings-styled-tab"
data-tabs-target="#styled-settings"
type="button"
role="tab"
aria-controls="settings"
aria-selected="false"
>
Settings
</button>
</li>
<li role="presentation">
<button
className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
id="contacts-styled-tab"
data-tabs-target="#styled-contacts"
type="button"
role="tab"
aria-controls="contacts"
aria-selected="false"
>
Contacts
</button>
</li>
</ul>
</div>
<div id="default-styled-tab-content">
<div
className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
id="styled-profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<p className="text-sm text-gray-500 dark:text-gray-400">
This is some placeholder content the{" "}
<strong className="font-medium text-gray-800 dark:text-white">
Profile tab associated content
</strong>
. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the
content visibility and styling.
</p>
</div>
<div
className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
id="styled-dashboard"
role="tabpanel"
aria-labelledby="dashboard-tab"
>
<p className="text-sm text-gray-500 dark:text-gray-400">
This is some placeholder content the{" "}
<strong className="font-medium text-gray-800 dark:text-white">
Dashboard tabs associated content
</strong>
. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the
content visibility and styling.
</p>
</div>
<div
className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
id="styled-settings"
role="tabpanel"
aria-labelledby="settings-tab"
>
<p className="text-sm text-gray-500 dark:text-gray-400">
This is some placeholder content the{" "}
<strong className="font-medium text-gray-800 dark:text-white">
Settings tabs associated content
</strong>
. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classNamees to control
the content visibility and styling.
</p>
</div>
<div
className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
id="styled-contacts"
role="tabpanel"
aria-labelledby="contacts-tab"
>
<p className="text-sm text-gray-500 dark:text-gray-400">
This is some placeholder content the{" "}
<strong className="font-medium text-gray-800 dark:text-white">
Contacts tabs associated content
</strong>
. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the
content visibility and styling.
</p>
</div>
</div> */}
</div>{" "}
</div>
</div>
<br />
Expand Down
6 changes: 0 additions & 6 deletions apps/X/src/components/ui/home/HomeLeft.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -139,12 +139,6 @@ export const HomeLeft = () => {
</div>
</div>
<div className="">
{/* <Button
className="invisible custom:visible rounded-3xl w-full custom:mt-3 px-20 py-6 font-semibold"
onClick={onPostClick}
>
Post
</Button> */}
<Dialog>
<DialogTrigger className="invisible custom:visible rounded-3xl w-full custom:mt-3 px-20 py-3 font-semibold bg-white text-black items-start">
Post
Expand Down
2 changes: 2 additions & 0 deletions apps/X/src/components/ui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ import { TopHeader } from "../TopHeader";
import { userInfo } from "os";

import { X_loaderComp } from "../X_loaderComp";
import { EditProfileComp } from "./Profile/EditProfileComp";

export {
EditProfileComp,
TopHead,
TopPost,
SigninComp,
Expand Down