Skip to content

Commit 2251354

Browse files
utkarsh4321utkarsh4321
authored
fix: issue-98 (#225)
1 parent 344fa46 commit 2251354

File tree

6 files changed

+157
-46
lines changed

6 files changed

+157
-46
lines changed

‎appwrite-gen/schema.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,7 @@
184184
"status": "available",
185185
"error": "",
186186
"required": false,
187-
"array": true,
188-
"size": 10,
187+
"size": 500,
189188
"default": null
190189
},
191190
{

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"nookies": "^2.5.2",
5050
"postcss": "8.4.31",
5151
"react": "18.2.0",
52+
"react-colorful": "^5.6.1",
5253
"react-dom": "18.2.0",
5354
"react-feather": "^2.0.10",
5455
"react-redux": "^8.1.2",

‎src/components/core/colorPicker/index.tsx‎

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,76 @@
1+
import {HexColorPicker} from 'react-colorful';
2+
import {useState} from 'react';
3+
14
type ColorpickerTypes = {
25
colors: {
3-
color01: string | number | readonly string[];
4-
color02: string | number | readonly string[];
5-
color03: string | number | readonly string[];
6-
color04: string | number | readonly string[];
6+
color01: string
7+
color02: string
8+
color03: string
9+
color04: string
710
};
11+
isPalleteTouched:boolean;
812
setColors: any;
13+
setTouched:any;
914
};
1015

1116
// eslint-disable-next-line react/prop-types
12-
function Colorpicker({ colors, setColors }: ColorpickerTypes) {
13-
const changeHandler = (event: any) => {
14-
const { name, value } = event.target;
15-
16-
setColors((prev: any) => {
17-
return { ...prev, [name]: value };
18-
});
17+
function Colorpicker({ colors, setColors,setTouched,isPalleteTouched }: ColorpickerTypes) {
18+
const [selectedColorSection,setColorSection] = useState<number | null>(null);
19+
const changeHandler = (color:string) => {
20+
if(!isPalleteTouched){
21+
setTouched(true);
22+
}
23+
if(typeof color === 'string')
24+
setColors({...colors,[`color0` + selectedColorSection]:color});
1925
};
26+
const showPicker = (id:number)=>{
27+
if(id === selectedColorSection){
28+
setColorSection(null)
29+
}else{
30+
setColorSection(id);
31+
}
32+
}
2033

2134
return (
2235
<>
23-
<div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
36+
<div className='relative'>
37+
<div className="w-[300px] rounded-[0.8rem] h-[200px] bg-[#888A8A] mx-auto flex">
38+
<div
39+
onClick={()=>showPicker(1)}
40+
className="cursor-pointer w-full rounded-tl-[0.8rem] rounded-bl-[0.8rem]"
41+
style={{backgroundColor:typeof colors.color01 === 'string' && colors.color01 || ''}}
42+
></div>
43+
<div
44+
onClick={()=>showPicker(2)}
45+
className="cursor-pointer w-full "
46+
style={{backgroundColor:typeof colors.color02 === 'string' && colors.color02 || ''}}
47+
48+
></div>
49+
<div
50+
onClick={()=>showPicker(3)}
51+
className="cursor-pointer w-full"
52+
style={{backgroundColor:typeof colors.color03 === 'string' && colors.color03 || ''}}
53+
></div>
54+
<div
55+
onClick={()=>showPicker(4)}
56+
className="cursor-pointer w-full rounded-tr-[0.8rem] rounded-br-[0.8rem]"
57+
style={{backgroundColor:typeof colors.color04 === 'string' && colors.color04 || ''}}
58+
></div>
59+
60+
</div>
61+
{
62+
selectedColorSection &&
63+
<>
64+
{/* <div className='fixed top-0 left-0 right-0 bottom-0' onClick={handleClose}></div> */}
65+
<div className='absolute top-0'>
66+
<HexColorPicker style={{width:'100px'}} onChange={changeHandler} color={selectedColorSection && (selectedColorSection === 1 && colors['color01'] || selectedColorSection === 2 && colors['color02'] || selectedColorSection === 3 && colors['color03'] || selectedColorSection === 4 && colors['color04']) || ''}/>
67+
</div>
68+
</>
69+
}
70+
</div>
71+
72+
{/* <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
73+
2474
<div className="mb-3">
2575
<input
2676
type="text"
@@ -76,7 +126,7 @@ function Colorpicker({ colors, setColors }: ColorpickerTypes) {
76126
maxLength={6}
77127
/>
78128
</div>
79-
</div>
129+
</div> */}
80130
</>
81131
);
82132
}

‎src/components/core/createPost/index.tsx‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,15 @@ const CreatePost = () => {
2929

3030
// color palette toggle switch
3131
const [togglePalette, setTogglePalette] = useState(false);
32+
// To check Paletted touched or not
33+
const [isPaletteTouched,setPaletteTouched] = useState(false);
3234

3335
// colors grid
3436
const [colors, setColors] = useState({
35-
color01: "",
36-
color02: "",
37-
color03: "",
38-
color04: "",
37+
color01: "#a5a2a2",
38+
color02: "#c2c2c2",
39+
color03: "#9c9c9c",
40+
color04: "#666665",
3941
});
4042

4143
// get cookies from the browser
@@ -73,10 +75,21 @@ const CreatePost = () => {
7375
// })
7476
// .catch((err) => console.log(err));
7577
// };
76-
78+
const colorPaletteSwitch = () => {
79+
if (togglePalette) {
80+
setTogglePalette(false);
81+
setColors({
82+
color01: "#a5a2a2",
83+
color02: "#c2c2c2",
84+
color03: "#9c9c9c",
85+
color04: "#666665",
86+
});
87+
} else {
88+
setTogglePalette(true);
89+
}
90+
};
7791
const handleSubmit = async (event: any) => {
7892
event.preventDefault();
79-
8093
// console.log(postTitle);
8194
// console.log(imageStorage);
8295
// console.log(cookies["accountId"]);
@@ -102,7 +115,7 @@ const CreatePost = () => {
102115
accountId: userIdFromCookies,
103116
postTitle: postTitle,
104117
postImages: imageArray.length > 0 ? imageArray : [],
105-
colors: [],
118+
colors: (togglePalette && isPaletteTouched && JSON.stringify({...colors})) || null,
106119
isActive: true,
107120
comments: [],
108121
likes: [],
@@ -122,6 +135,9 @@ const CreatePost = () => {
122135
preview: null,
123136
file: null,
124137
});
138+
if(togglePalette){
139+
colorPaletteSwitch();
140+
}
125141

126142
// state resetters
127143
} catch (error) {
@@ -156,20 +172,6 @@ const CreatePost = () => {
156172
}
157173
};
158174

159-
const colorPaletteSwitch = () => {
160-
if (togglePalette) {
161-
setTogglePalette(false);
162-
setColors({
163-
color01: "",
164-
color02: "",
165-
color03: "",
166-
color04: "",
167-
});
168-
} else {
169-
setTogglePalette(true);
170-
}
171-
};
172-
173175
return (
174176
<>
175177
<motion.section
@@ -180,7 +182,7 @@ const CreatePost = () => {
180182
className="border border-gray-500 rounded-md shadow-sm mb-4"
181183
>
182184
<form className="p-4" method="post" onSubmit={handleSubmit}>
183-
<div className="mb-2">
185+
<div className="mb-2">
184186
{/* <small className="text-slate-400">Character limit is upto {CHAR_LIMIT}</small> */}
185187
<small className="text-slate-400">
186188
You have {CHAR_LIMIT - postTitle.length} characters left
@@ -201,9 +203,7 @@ const CreatePost = () => {
201203
}}
202204
/>
203205
</div>
204-
205-
{togglePalette ? <Colorpicker colors={colors} setColors={setColors} /> : null}
206-
206+
{togglePalette ? <Colorpicker colors={colors} setColors={setColors} setTouched={setPaletteTouched} isPalleteTouched={isPaletteTouched} /> :
207207
<article>
208208
{imageStorage && imageStorage.preview && (
209209
<Image
@@ -215,7 +215,7 @@ const CreatePost = () => {
215215
/>
216216
)}
217217
</article>
218-
218+
}
219219
<div className="flex flex-row justify-between items-center">
220220
<article className="flex flex-row gap-2">
221221
<input
@@ -234,6 +234,7 @@ const CreatePost = () => {
234234

235235
<button
236236
onClick={colorPaletteSwitch}
237+
type="button"
237238
className="transition-all duration-300 p-2 hover:bg-secondary-light hover:text-white rounded-full"
238239
>
239240
<Command size={22} />

‎src/components/core/posts/SinglePost.tsx‎

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { saveBookmarkToStore } from "@/redux/reducers/bookmarkReducer";
1010
import { toastify } from "@/helper/toastify";
1111
import { addComment } from "@/backend/posts.api";
1212
import { getUserDetails } from "@/backend/auth.api";
13-
import { useCallback, useEffect, useState } from "react";
13+
import { useCallback, useEffect, useState,MouseEvent } from "react";
1414
import { UserBookMarkType, FormatOnType } from "@/types/index";
1515

1616
import isCtrlEnter from "@/helper/isCtrlEnter";
@@ -148,6 +148,36 @@ export default function SinglePost({
148148
fetchUserDetails();
149149
}, [fetchUserDetails]);
150150

151+
const handleClick = (e:MouseEvent<HTMLDivElement | HTMLSpanElement>)=>{
152+
const element = e.target as HTMLDivElement | HTMLSpanElement;
153+
const spanElement = element.querySelector('span');
154+
let currentSelectedElement:HTMLSpanElement | HTMLDivElement | null = null;
155+
if(spanElement){
156+
currentSelectedElement = spanElement;
157+
}else{
158+
currentSelectedElement = element;
159+
}
160+
if(currentSelectedElement && currentSelectedElement.textContent){
161+
const prevValue = currentSelectedElement.textContent;
162+
navigator.clipboard.writeText(currentSelectedElement.textContent).then(()=>{
163+
if(currentSelectedElement){
164+
currentSelectedElement.textContent = 'Copied';
165+
currentSelectedElement.classList.remove('bg-slate-950/[0.4]');
166+
currentSelectedElement.classList.add('bg-black');
167+
setTimeout(()=>{
168+
if(currentSelectedElement){
169+
currentSelectedElement.textContent = prevValue;
170+
currentSelectedElement.classList.remove('bg-black');
171+
currentSelectedElement.classList.add('bg-slate-950/[0.4]');
172+
}
173+
},1000);
174+
}
175+
}).catch(console.log)
176+
}
177+
178+
}
179+
const colors = singlePost?.colors && typeof singlePost?.colors ==='string' && JSON.parse(singlePost.colors)
180+
151181
return (
152182
<div
153183
className={` ${width
@@ -189,9 +219,9 @@ export default function SinglePost({
189219
) : null}
190220
</Link>
191221

192-
{singlePost?.colors && singlePost?.colors.length > 0 ? (
222+
{colors && Object.keys(colors).length>0? (
193223
<div className="my-2 flex flex-row justify-between items-center w-full">
194-
{singlePost?.colors.map((color: string, index: number) => {
224+
{/* {JSON.parse(singlePost.colors).map((color: string, index: number) => {
195225
return (
196226
<div
197227
key={index}
@@ -202,7 +232,37 @@ export default function SinglePost({
202232
}}
203233
></div>
204234
);
205-
})}
235+
})} */}
236+
<div className="w-full h-[200px] bg-tranparent mx-auto flex mb-3.5 gap-1">
237+
<div
238+
className="cursor-pointer w-full flex justify-center items-center group"
239+
style={{backgroundColor:typeof colors.color01 === 'string' && colors.color01 || ''}}
240+
onClick={handleClick}
241+
>
242+
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110" onClick={handleClick}>{colors.color01}</span>
243+
</div>
244+
<div
245+
className="cursor-pointer w-full flex justify-center items-center group "
246+
style={{backgroundColor:typeof colors.color02 === 'string' && colors.color02 || ''}}
247+
onClick={handleClick}
248+
>
249+
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color02}</span>
250+
</div>
251+
<div
252+
className="cursor-pointer w-full flex justify-center items-center group gap-2"
253+
style={{backgroundColor:typeof colors.color03 === 'string' && colors.color03 || ''}}
254+
onClick={handleClick}
255+
>
256+
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color03}</span>
257+
</div>
258+
<div
259+
className="cursor-pointer w-full flex justify-center items-center group"
260+
style={{backgroundColor:typeof colors.color04 === 'string' && colors.color04 || ''}}
261+
onClick={handleClick}
262+
>
263+
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color04}</span>
264+
</div>
265+
</div>
206266
</div>
207267
) : null}
208268

‎src/types/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export type PostInstanceType = {
44
accountId: string;
55
postTitle: string;
66
postImages: string[];
7-
colors?: string[];
7+
colors?: string | null;
88
comments?: string[];
99
likes: string[];
1010
isActive: boolean;

0 commit comments

Comments
 (0)