Merge pull request #48 from pure-js/fix-post-edit

fix: post edit

src/components/Alert.tsx

@@ -0,0 +1,14 @@
+interface IAlertProps {
+  message: string;
+  type: string;
+}
+
+function Alert ({ message, type }: IAlertProps) {
+  return (
+    <section className="bg-green-200">
+      { message }
+    </section>
+  )
+}
+
+export default Alert;

src/components/App.tsx

@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
 import Header from './Header';
+import Alert from './Alert';
 
 // Create a GrowthBook instance
 const growthbook = new GrowthBook({
@@ -40,6 +41,7 @@ function App() {
   return (
     <GrowthBookProvider growthbook={growthbook}>
       <Header />
+      <Alert />
       <Outlet />
     </GrowthBookProvider>
   );

src/components/Search.tsx

@@ -1,8 +1,8 @@
 function Search() {
   return (
-    <div className="tw-w-full tw-pb-6">
-      <input disabled type="search" className="tw-disabled:bg-gray-100 tw-rounded-l tw-border tw-border-blue-700 tw-py-1 tw-px-5" />
-      <button disabled type="button" className=" tw-text-white tw-fill tw-rounded-r tw-border tw-bg-blue-700 tw-border-blue-700 tw-px-5 tw-py-1">Search</button>
+    <div className="w-full pb-6">
+      <input disabled type="search" className="disabled:bg-gray-100 rounded-l border border-blue-700 py-1 px-5" />
+      <button disabled type="button" className=" text-white fill rounded-r border bg-blue-700 border-blue-700 px-5 py-1">Search</button>
     </div>
   );
 }

src/pages/EditPost.tsx

@@ -17,8 +17,7 @@ function EditPostWrapper() {
       .toArray()
   );
 
-  if (!posts) return null;
-  return (<EditPost post={posts[0]} />);
+  return posts ? (<EditPost post={posts[0]} />) : null;
 }
 
 function EditPost({ post } : IBlogPostProps) {
@@ -29,6 +28,7 @@ function EditPost({ post } : IBlogPostProps) {
   const [hashtags, setHashtags] = useState('');
 
   const navigate = useNavigate();
+  const { postId } = useParams();
 
   function handleImageChange(event: React.FormEvent<HTMLInputElement>) {
     const file = event.target.files[0];
@@ -43,23 +43,16 @@ function EditPost({ post } : IBlogPostProps) {
     }
   }
 
-  // async function editPost() {
-  //   const post = await db.posts
-  //     .get(postId);
-  //   console.log(post.heading, '333');
-  // }
-  // editPost();
-
   async function UpdatePost() {
     try {
-      await db.posts.update( id, {
+      await db.posts.update( postId, {
         heading,
         text,
-        createdAt: Date.now().toString(),
+        editedAt: Date.now().toString(),
         image,
       });
 
-      setStatus(`Post "${heading}" successfully updated. Post id ${id}`);
+      setStatus(`Post "${heading}" successfully updated. Post id ${postId}`);
       navigate('/');
     } catch (error) {
       setStatus(`Failed to update ${heading}: ${error}`);

tailwind.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   content: ['./src/**/*.{jsx,tsx}'],
-  prefix: 'tw-',
   theme: {
     extend: {},
   },