Skip to content

Commit 8cb7868

Browse files
Stan-l-e-yStan-l-e-y
committed
updateServer
1 parent 9f16b20 commit 8cb7868

7 files changed

Lines changed: 185 additions & 122 deletions

File tree

‎components/forms/EditUserForm.tsx‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ export default function EditUserForm() {
4545
},
4646
});
4747

48-
49-
5048
const onSubmit = async (formData: UpdateUserInput) => {
5149
const { data, error } = await updateUserProfile(
5250
supabase,
@@ -74,11 +72,10 @@ export default function EditUserForm() {
7472
}
7573

7674
if (data && !error) {
77-
toast.success('Profile updated successfully'),
78-
{
79-
position: 'top-center',
75+
toast.success('Profile updated successfully', {
76+
position: 'top-right',
8077
autoClose: 3000,
81-
};
78+
});
8279
}
8380
setUserImage(null);
8481
};
@@ -89,72 +86,72 @@ export default function EditUserForm() {
8986
) => {
9087
if (userString === null || userString.length === 0) {
9188
return emptyMessage;
92-
}
93-
else if (userString.length >= 25) {
89+
} else if (userString.length >= 25) {
9490
return `${userString.slice(0, 25)}...`;
9591
}
9692
return userString;
9793
};
9894

9995
return (
100-
<div className='flex flex-row ml-5 overflow-y-scroll'>
101-
<div className='flex flex-col w-12'>
102-
<div className='flex flex-row'>
103-
<h1 className='text-2xl font-semibold'>User Profile</h1>
96+
<div className="flex flex-row ml-5 overflow-y-scroll">
97+
<div className="flex flex-col w-12">
98+
<div className="flex flex-row">
99+
<h1 className="text-2xl font-semibold">User Profile</h1>
104100
</div>
105-
<div className=' border-t-2 my-1 border-grey-700'></div>
106-
<form className='h-[17.5rem] ' onSubmit={handleSubmit(onSubmit)}>
107-
<div className='flex flex-row justify-center items-center mb-2 '>
108-
<div className='flex flex-col'>
109-
<label className='font-semibold text-xl mb-1 mx-auto'>
101+
<div className=" border-t-2 my-1 border-grey-700"></div>
102+
<form className="h-[17.5rem] " onSubmit={handleSubmit(onSubmit)}>
103+
<div className="flex flex-row justify-center items-center mb-2 ">
104+
<div className="flex flex-col">
105+
<label className="font-semibold text-xl mb-1 mx-auto">
110106
Avatar
111107
</label>
112-
<div className='flex flex-col items-center'>
108+
<div className="flex flex-col items-center">
113109
<div
114110
className={`${
115111
userImage
116112
? 'p-4'
117113
: 'w-8 py-4 px-6 border-dashed border-2 border-grey-600'
118114
} flex items-center rounded-lg justify-center relative hover:cursor-pointer`}
119-
onClick={() => imageRef?.current?.click()}>
120-
<div className='flex flex-col justify-center items-center'>
115+
onClick={() => imageRef?.current?.click()}
116+
>
117+
<div className="flex flex-col justify-center items-center">
121118
{userImage ? (
122119
<Image
123-
alt='userIcon'
120+
alt="userIcon"
124121
src={previewImage}
125122
width={40}
126123
height={2}
127124
/>
128125
) : (
129126
<>
130127
<CameraIcon width={5} />
131-
<span className='absolute -top-3 -right-3'>
132-
<PlusIcon color='#4abfe8' />
128+
<span className="absolute -top-3 -right-3">
129+
<PlusIcon color="#4abfe8" />
133130
</span>
134131
</>
135132
)}
136133
</div>
137134
</div>
138-
<span className='text-xs font-semibold text-center tracking-wider mt-2'>
135+
<span className="text-xs font-semibold text-center tracking-wider mt-2">
139136
UPLOAD IMAGE
140137
</span>
141138
</div>
142139
<input
143-
type='file'
140+
type="file"
144141
ref={imageRef}
145142
onChange={handleFileChange}
146-
className='hidden'
147-
accept='image/*'
143+
className="hidden"
144+
accept="image/*"
148145
/>
149146
</div>
150147
</div>
151-
<div className='flex flex-row justify-between items-center mb-2'>
152-
<div className='flex flex-col justify-start '>
153-
<label className='font-semibold text-xl mb-1'>Name</label>
148+
<div className="flex flex-row justify-between items-center mb-2">
149+
<div className="flex flex-col justify-start ">
150+
<label className="font-semibold text-xl mb-1">Name</label>
154151
{user && (
155152
<input
156153
defaultValue={user.full_name!}
157-
className='w-12 text-grey-300 text-medium bg-grey-800 rounded-lg focus:bg-slate-600 focus:text-white focus:outline-grey-100 py-1 pl-2'
154+
className="w-12 text-grey-300 text-medium bg-grey-800 rounded-lg focus:bg-slate-600 focus:text-white focus:outline-grey-100 py-1 pl-2"
158155
placeholder={handleStringDisplay(
159156
user.full_name,
160157
'Add your name to your profile'
@@ -164,13 +161,13 @@ export default function EditUserForm() {
164161
)}
165162
</div>
166163
</div>
167-
<div className='flex flex-row justify-between items-center mb-2'>
168-
<div className='flex flex-col justify-start'>
169-
<label className='font-semibold text-xl mb-1'>Website</label>
164+
<div className="flex flex-row justify-between items-center mb-2">
165+
<div className="flex flex-col justify-start">
166+
<label className="font-semibold text-xl mb-1">Website</label>
170167
{user && (
171168
<input
172169
defaultValue={user.website!}
173-
className='w-12 text-medium text-grey-300 bg-grey-800 rounded-lg focus:bg-slate-600 focus:text-white focus:outline-grey-100 py-1 pl-2'
170+
className="w-12 text-medium text-grey-300 bg-grey-800 rounded-lg focus:bg-slate-600 focus:text-white focus:outline-grey-100 py-1 pl-2"
174171
placeholder={handleStringDisplay(
175172
user.website,
176173
'Add your website to your profile'
@@ -180,11 +177,12 @@ export default function EditUserForm() {
180177
)}
181178
</div>
182179
</div>
183-
<div className='flex flex-row justify-end items-center'>
184-
<div className='flex flex-row'>
180+
<div className="flex flex-row justify-end items-center">
181+
<div className="flex flex-row">
185182
<button
186-
className=' hover:text-frost-500 px-2 py-1 rounded-lg'
187-
type='submit'>
183+
className=" hover:text-frost-500 px-2 py-1 rounded-lg"
184+
type="submit"
185+
>
188186
Submit
189187
</button>
190188
</div>

‎components/forms/MutateServer.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,10 @@ export default function AddServer({
6767

6868
setServerImage(e.target.files[0]);
6969
};
70-
let previewImage = serverImage ? URL.createObjectURL(serverImage) : '';
7170

72-
if (server?.image_url) previewImage = server.image_url;
71+
let previewImage = server?.image_url ? server.image_url : '';
7372

74-
const supabase = useSupabaseClient();
73+
if (serverImage) previewImage = URL.createObjectURL(serverImage);
7574

7675
return (
7776
<form
@@ -95,7 +94,7 @@ export default function AddServer({
9594
>
9695
<div className="flex flex-col justify-center items-center">
9796
{serverImage || server?.image_url ? (
98-
<Image alt="serverIcon" src={previewImage} width={50} height={50} />
97+
<img alt="serverIcon" src={previewImage} width={50} height={50} />
9998
) : (
10099
<>
101100
<CameraIcon />

‎components/home/Server.tsx‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import styles from '@/styles/Servers.module.css';
1414
import { Channel, Server as ServerType } from '@/types/dbtypes';
1515
import { ServerMemberStats } from './ServerMemberStats';
1616
import { OverflowMarquee } from './OverflowMarquee';
17-
import { useChannel, useServerUserProfilePermissions, useSetChannel } from '@/lib/store';
17+
import {
18+
useChannel,
19+
useServerUserProfilePermissions,
20+
useSetChannel,
21+
} from '@/lib/store';
1822
import { ChannelMediaIcon } from '../icons/ChannelMediaIcon';
1923
import ChannelName from './ChannelName';
2024
import { ChannelListItem } from '@/components/home/ChannelListItem';
@@ -49,7 +53,10 @@ export default function Server({
4953
const [showAddChannelModal, setShowAddChannelModal] = useState(false);
5054

5155
const user = useUser();
52-
const serverPermissions = useServerUserProfilePermissions(server.id, user?.id!);
56+
const serverPermissions = useServerUserProfilePermissions(
57+
server.id,
58+
user?.id!
59+
);
5360
useEffect(() => {
5461
const handleAsync = async () => {
5562
if (server) {
@@ -60,14 +67,14 @@ export default function Server({
6067
handleAsync();
6168
}, [server, supabase]);
6269

63-
const showServerSettingsOption = (
64-
(serverPermissions & ServerPermissions.MANAGE_INVITES) > 0
65-
|| (serverPermissions & ServerPermissions.MANAGE_ROLES) > 0
66-
|| (serverPermissions & ServerPermissions.MANAGE_USERS) > 0
67-
|| (serverPermissions & ServerPermissions.MANAGE_SERVER) > 0
68-
);
70+
const showServerSettingsOption =
71+
(serverPermissions & ServerPermissions.MANAGE_INVITES) > 0 ||
72+
(serverPermissions & ServerPermissions.MANAGE_ROLES) > 0 ||
73+
(serverPermissions & ServerPermissions.MANAGE_USERS) > 0 ||
74+
(serverPermissions & ServerPermissions.MANAGE_SERVER) > 0;
6975

70-
const showAddChannelOption = (serverPermissions & ServerPermissions.MANAGE_CHANNELS) > 0;
76+
const showAddChannelOption =
77+
(serverPermissions & ServerPermissions.MANAGE_CHANNELS) > 0;
7178

7279
if (expand) {
7380
return (
@@ -108,22 +115,24 @@ export default function Server({
108115
</div>
109116
</DropdownMenu.Trigger>
110117
<DropdownMenu.Portal>
111-
<DropdownMenu.Content className="ContextMenuContent" side='right'>
112-
{ showAddChannelOption && (
113-
<DropdownMenu.Item asChild
118+
<DropdownMenu.Content className="ContextMenuContent" side="right">
119+
{showAddChannelOption && (
120+
<DropdownMenu.Item
121+
asChild
114122
className="flex justify-center items-center hover:text-grey-300 cursor-pointer"
115123
onClick={() => {
116124
setShowAddChannelModal(true);
117125
}}
118126
>
119127
<div className="flex flex-row w-full">
120-
<PlusIcon width={5} height={5}/>
128+
<PlusIcon width={5} height={5} />
121129
<span className="ml-2 w-full">New channel</span>
122130
</div>
123131
</DropdownMenu.Item>
124132
)}
125133
{showServerSettingsOption && (
126-
<DropdownMenu.Item asChild
134+
<DropdownMenu.Item
135+
asChild
127136
className="flex justify-center items-center hover:text-grey-300 cursor-pointer"
128137
onClick={() => {
129138
setShowServerSettingsModal(true);
@@ -136,23 +145,27 @@ export default function Server({
136145
</DropdownMenu.Item>
137146
)}
138147

139-
{(showAddChannelOption || showServerSettingsOption) && <DropdownMenu.Separator className="ContextMenuSeparator" />}
148+
{(showAddChannelOption || showServerSettingsOption) && (
149+
<DropdownMenu.Separator className="ContextMenuSeparator" />
150+
)}
140151
{(serverPermissions & 1) === 0 && (
141-
<DropdownMenu.Item asChild
152+
<DropdownMenu.Item
153+
asChild
142154
className="flex justify-center items-center text-red-500 hover:text-grey-300 cursor-pointer"
143155
onClick={async () => {
144156
// TODO: Add confirmation modal
145157
await leaveServer(supabase, user!.id, server.id);
146158
}}
147159
>
148160
<div className="flex flex-row w-full">
149-
<LeaveIcon className='!w-5 !h-5' />
161+
<LeaveIcon className="!w-5 !h-5" />
150162
<span className="ml-2 w-full">Leave Server</span>
151163
</div>
152164
</DropdownMenu.Item>
153165
)}
154166
{(serverPermissions & 1) === 1 && (
155-
<DropdownMenu.Item asChild
167+
<DropdownMenu.Item
168+
asChild
156169
className="flex justify-center items-center text-red-500 hover:text-grey-300 cursor-pointer"
157170
onClick={async () => {
158171
// TODO: Add confirmation modal
@@ -171,7 +184,11 @@ export default function Server({
171184
</div>
172185
<div className="channels bg-grey-700 rounded-lg relative -top-3 py-4 px-7 ">
173186
{channels.map((channel: Channel, idx: number) => (
174-
<ChannelListItem channel={channel} idx={idx} key={channel.channel_id}/>
187+
<ChannelListItem
188+
channel={channel}
189+
idx={idx}
190+
key={channel.channel_id}
191+
/>
175192
))}
176193
</div>
177194
</div>

0 commit comments

Comments
 (0)