add publish feature

mshivam019 · Mar 25, 2024 · cedd673 · cedd673
1 parent 8de5076
commit cedd673
Show file tree

Hide file tree

Showing 12 changed files with 573 additions and 124 deletions.
diff --git a/app/(tabs)/create/editor.tsx b/app/(tabs)/create/editor.tsx
@@ -1,20 +1,20 @@
 import React, { useState } from "react";
 import { ScrollView, StyleSheet } from "react-native";
 import { Poster, RichTextEditor } from "../../../components";
-import { useLocalSearchParams } from "expo-router";
+import { Stack, useLocalSearchParams } from "expo-router";
 import { useWritingsStore } from "../../../store";
+import uuid from "react-native-uuid";
 
 const editor = () => {
-	const { title } = useLocalSearchParams();
-	const { articles } = useWritingsStore();
-	const existingArticle = articles.find((article) => article.title === title);
+	const { id } = useLocalSearchParams();
+	const { articles, drafts } = useWritingsStore();
+	const existingArticle =
+		articles.find((article) => article.id === id) ||
+		drafts.find((article) => article.id === id);
 	const [article, setArticle] = useState(
 		existingArticle ? existingArticle.content : ""
 	);
-	const [img, setImg] = useState(existingArticle ? existingArticle.img : "");
-	const [Articletitle, setTitle] = useState(
-		existingArticle ? existingArticle.title : ""
-	);
+
 	const [showEditor, setShowEditor] = useState(true);
 	const nextHandler = () => {
 		setShowEditor(false);
@@ -29,12 +29,23 @@ const editor = () => {
 				/>
 			) : (
 				<Poster
-					article={article}
 					setShowEditor={setShowEditor}
-					title={Articletitle}
-					setTitle={setTitle}
-					img={img}
-					setImg={setImg}
+					article={
+						existingArticle
+							? existingArticle
+							: {
+									id: uuid.v4().toString(),
+									title: "",
+									content: article,
+									category: "",
+									tags: [],
+									poster_image_url: "",
+									stars_count: 0,
+									user_id: "1",
+									created_at: new Date(),
+									updated_at: new Date(),
+							  }
+					}
 				/>
 			)}
 		</ScrollView>

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -17,7 +17,22 @@ const RootLayout = () => {
 
 	const handlePresentModalPress = () => bottomSheetRef.current?.present();
 	return (
-		<SafeAreaProvider>
+		<SafeAreaProvider
+			initialMetrics={{
+				insets: {
+					top: 10,
+					left: 0,
+					right: 0,
+					bottom: 0,
+				},
+				frame: {
+					x: 0,
+					y: 0,
+					width: 0,
+					height: 0,
+				},
+			}}
+		>
 			<AuthProvider>
 				<GestureHandlerRootView style={{ flex: 1 }}>
 					<BottomSheetModalProvider>

diff --git a/components/Create/MyWorks.tsx b/components/Create/MyWorks.tsx
@@ -5,57 +5,119 @@ import { useWritingsStore } from "../../store";
 import { router } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 
-const DraftsCard = ({ title }: { title: string }) => {
-	return (
-		<Pressable
-			style={styles.cardContainer}
-			onPress={() =>
-				router.push({
-					pathname: "/create/editor",
-					params: { title: title },
-				})
-			}
-		>
-			<Text>{title}</Text>
-			<Ionicons name="create-outline" size={24} color="black" />
-		</Pressable>
-	);
-};
-
-const PublishedCard = ({ title }: { title: string }) => {
-	return (
-		<Pressable
-			style={styles.cardContainer}
-			onPress={() =>
-				router.push({
-					pathname: `/home/The art of war`,
-				})
-			}
-		>
-			<Text>{title}</Text>
-			<Ionicons name="book-outline" size={24} color="black" />
-		</Pressable>
-	);
-};
-
 const MyWorks = () => {
-	const { articles } = useWritingsStore();
+	const { articles, drafts, deleteDraft, removeArticle } = useWritingsStore();
+	if (articles.length === 0 && drafts.length === 0) {
+		return (
+			<View style={styles.container}>
+				<Text>No articles found</Text>
+			</View>
+		);
+	}
+	const DraftsCard = ({ title, id }: { title: string; id: string }) => {
+		return (
+			<Pressable
+				style={styles.cardContainer}
+				onPress={() =>
+					router.push({
+						pathname: "/create/editor",
+						params: { id: id },
+					})
+				}
+			>
+				<Text numberOfLines={1} style={styles.cardTitle}>
+					{title}
+				</Text>
+				<View style={{ flexDirection: "row", gap: 10 }}>
+					<Ionicons name="create-outline" size={24} color="black" />
+					<Pressable
+						onPress={() => {
+							deleteDraft(id);
+						}}
+					>
+						<Ionicons
+							name="trash-outline"
+							size={24}
+							color="black"
+						/>
+					</Pressable>
+				</View>
+			</Pressable>
+		);
+	};
+
+	const PublishedCard = ({ title, id }: { title: string; id: string }) => {
+		return (
+			<Pressable
+				style={styles.cardContainer}
+				onPress={() =>
+					router.push({
+						pathname: `/home/${id}`,
+					})
+				}
+			>
+				<Text numberOfLines={1} style={styles.cardTitle}>
+					{title}
+				</Text>
+				<View style={{ flexDirection: "row", gap: 20 }}>
+					<Ionicons name="book-outline" size={24} color="black" />
+					<Pressable
+						onPress={() => {
+							router.push({
+								pathname: "/create/editor",
+								params: { id: id },
+							});
+						}}
+					>
+						<Ionicons
+							name="create-outline"
+							size={24}
+							color="black"
+						/>
+					</Pressable>
+					<Pressable
+						onPress={() => {
+							removeArticle(id);
+						}}
+					>
+						<Ionicons
+							name="trash-outline"
+							size={24}
+							color="black"
+						/>
+					</Pressable>
+				</View>
+			</Pressable>
+		);
+	};
 	return (
 		<View style={styles.container}>
-			<Text style={styles.title}>Drafts</Text>
-			<FlatList
-				data={articles}
-				renderItem={({ item }) => <DraftsCard title={item.title} />}
-				keyExtractor={(item) => item.title}
-				showsVerticalScrollIndicator={false}
-			/>
-			<Text style={styles.title}>Published</Text>
-			<FlatList
-				data={articles}
-				renderItem={({ item }) => <PublishedCard title={item.title} />}
-				keyExtractor={(item) => item.title}
-				showsVerticalScrollIndicator={false}
-			/>
+			{drafts.length > 0 && (
+				<View style={styles.draftsContainer}>
+					<Text style={styles.title}>Drafts</Text>
+					<FlatList
+						data={drafts}
+						renderItem={({ item }) => (
+							<DraftsCard title={item.title} id={item.id} />
+						)}
+						keyExtractor={(item) => item.title}
+						showsVerticalScrollIndicator={false}
+					/>
+				</View>
+			)}
+			{articles.length > 0 && (
+				<View style={styles.publishedContainer}>
+					<Text style={styles.title}>Published</Text>
+					<FlatList
+						data={articles}
+						renderItem={({ item }) => (
+							<PublishedCard title={item.title} id={item.id} />
+						)}
+						keyExtractor={(item) => item.title}
+						showsVerticalScrollIndicator={false}
+					/>
+				</View>
+			)}
 		</View>
 	);
 };
@@ -68,13 +130,37 @@ const styles = StyleSheet.create({
 		backgroundColor: "white",
 		gap: 20,
 	},
+	draftsContainer: {
+		backgroundColor: "#e9e6e6",
+		flex: 1,
+		borderRadius: 10,
+		elevation: 5,
+		shadowColor: "black",
+		shadowOffset: { width: 0, height: 2 },
+		shadowOpacity: 0.25,
+	},
+	publishedContainer: {
+		backgroundColor: "#eaeaea",
+		flex: 1,
+		borderRadius: 10,
+		elevation: 5,
+		shadowColor: "black",
+		shadowOffset: { width: 0, height: 2 },
+		shadowOpacity: 0.25,
+	},
 	title: {
 		fontSize: 20,
 		fontWeight: "bold",
+		padding: 10,
+	},
+	cardTitle: {
+		fontSize: 16,
+		fontWeight: "400",
+		width: "50%",
 	},
 	cardContainer: {
 		padding: 20,
-		backgroundColor: "#f5f5f5",
+		backgroundColor: "#ffffff",
 		borderRadius: 10,
 		marginBottom: 20,
 		flexDirection: "row",