Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| fb64b671d0 | |||
| 0cf5800463 | |||
| 20ca6e0334 | |||
| 9abd05d05a | |||
| 59b688dafb | |||
| 8b7a2eb644 | |||
| d4c16ccf97 | |||
| 0696f5663e | |||
| 4a531df8bd |
@@ -99,6 +99,29 @@ jobs:
|
||||
APK=$(ls artifacts/postiz-mobile/dist/*.apk | sort | tail -1)
|
||||
echo "path=$APK" >> "$GITHUB_OUTPUT"
|
||||
|
||||
- name: Generate changelog
|
||||
id: changelog
|
||||
run: |
|
||||
PREV_TAG=$(git tag --sort=-version:refname | grep -v "^${{ github.ref_name }}$" | head -1)
|
||||
echo "Previous tag: $PREV_TAG"
|
||||
|
||||
FEATS=$(git log "${PREV_TAG}..HEAD" --pretty=format:"%s" --no-merges \
|
||||
| grep -E "^feat(\([^)]+\))?: " \
|
||||
| sed -E 's/^feat(\([^)]+\))?: //' \
|
||||
| sed 's/^/- /')
|
||||
|
||||
FIXES=$(git log "${PREV_TAG}..HEAD" --pretty=format:"%s" --no-merges \
|
||||
| grep -E "^fix(\([^)]+\))?: " \
|
||||
| sed -E 's/^fix(\([^)]+\))?: //' \
|
||||
| sed 's/^/- /')
|
||||
|
||||
{
|
||||
echo "changelog<<CEOF"
|
||||
[ -n "$FEATS" ] && printf "### What's New\n%s\n\n" "$FEATS"
|
||||
[ -n "$FIXES" ] && printf "### Bug Fixes\n%s\n\n" "$FIXES"
|
||||
echo "CEOF"
|
||||
} >> "$GITHUB_OUTPUT"
|
||||
|
||||
- name: Create GitHub Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
@@ -106,11 +129,10 @@ jobs:
|
||||
body: |
|
||||
## Postiz Mobile ${{ github.ref_name }}
|
||||
|
||||
APK signé pour Android — installation directe (sideload).
|
||||
|
||||
${{ steps.changelog.outputs.changelog }}
|
||||
### Installation
|
||||
1. Activer "Sources inconnues" sur l'appareil
|
||||
2. Transférer l'APK et ouvrir pour installer
|
||||
1. Enable "Unknown sources" on the device
|
||||
2. Transfer the APK to the device and open it to install
|
||||
files: ${{ steps.apk.outputs.path }}
|
||||
draft: false
|
||||
prerelease: ${{ contains(github.ref_name, '-') }}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -152,13 +152,14 @@ export default function PostsScreen() {
|
||||
|
||||
const handlePrefillCompose = (post: PostizPost) => {
|
||||
const integrations = post.integrations ?? (post.integration ? [post.integration] : []);
|
||||
router.push({
|
||||
pathname: "/(tabs)/compose",
|
||||
params: {
|
||||
prefillContent: post.content,
|
||||
prefillIntegrationIds: integrations.map((i) => i.id).join(","),
|
||||
},
|
||||
});
|
||||
const params: Record<string, string> = {
|
||||
prefillContent: stripHtml(post.content),
|
||||
prefillIntegrationIds: integrations.map((i) => i.id).join(","),
|
||||
};
|
||||
if (post.image?.length) {
|
||||
params.prefillImages = JSON.stringify(post.image);
|
||||
}
|
||||
router.push({ pathname: "/(tabs)/compose", params });
|
||||
};
|
||||
|
||||
const startReschedule = (post: PostizPost) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import axios from "axios";
|
||||
import * as Haptics from "expo-haptics";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
@@ -15,49 +15,73 @@ import {
|
||||
} from "react-native";
|
||||
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { usePostiz, DEFAULT_BASE_URL } from "@/context/PostizContext";
|
||||
import { PostizWorkspace, DEFAULT_BASE_URL, usePostiz } from "@/context/PostizContext";
|
||||
import { useColors } from "@/hooks/useColors";
|
||||
import { extractError } from "@/lib/extractError";
|
||||
|
||||
type FormState = {
|
||||
id?: string;
|
||||
name: string;
|
||||
url: string;
|
||||
key: string;
|
||||
};
|
||||
|
||||
const EMPTY_FORM: FormState = { name: "", url: DEFAULT_BASE_URL, key: "" };
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const colors = useColors();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { apiKey, baseUrl, isConfigured, saveSettings, clearSettings } = usePostiz();
|
||||
const { workspaces, isConfigured, addWorkspace, updateWorkspace, removeWorkspace } = usePostiz();
|
||||
|
||||
const [inputKey, setInputKey] = useState(apiKey);
|
||||
const [inputUrl, setInputUrl] = useState(baseUrl || DEFAULT_BASE_URL);
|
||||
const [form, setForm] = useState<FormState | null>(null);
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [validating, setValidating] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [validationStatus, setValidationStatus] = useState<"idle" | "ok" | "error">("idle");
|
||||
const [errorDetail, setErrorDetail] = useState<string>("");
|
||||
const [errorDetail, setErrorDetail] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setInputKey(apiKey);
|
||||
setInputUrl(baseUrl || DEFAULT_BASE_URL);
|
||||
}, [apiKey, baseUrl]);
|
||||
const openAdd = () => {
|
||||
setForm(EMPTY_FORM);
|
||||
setShowKey(false);
|
||||
resetValidation();
|
||||
};
|
||||
|
||||
const openEdit = (ws: PostizWorkspace) => {
|
||||
setForm({ id: ws.id, name: ws.name, url: ws.baseUrl, key: ws.apiKey });
|
||||
setShowKey(false);
|
||||
resetValidation();
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
setForm(null);
|
||||
resetValidation();
|
||||
};
|
||||
|
||||
const resetValidation = () => {
|
||||
setValidationStatus("idle");
|
||||
setErrorDetail("");
|
||||
};
|
||||
|
||||
const patchForm = (patch: Partial<FormState>) => {
|
||||
setForm((prev) => (prev ? { ...prev, ...patch } : prev));
|
||||
resetValidation();
|
||||
};
|
||||
|
||||
const handleValidate = async () => {
|
||||
if (!inputKey.trim() || !inputUrl.trim()) {
|
||||
if (!form?.key.trim() || !form?.url.trim()) {
|
||||
Alert.alert("Missing fields", "Please enter both API key and base URL.");
|
||||
return;
|
||||
}
|
||||
setValidating(true);
|
||||
setValidationStatus("idle");
|
||||
setErrorDetail("");
|
||||
const cleanUrl = inputUrl.trim().replace(/\/$/, "");
|
||||
resetValidation();
|
||||
const cleanUrl = form.url.trim().replace(/\/$/, "");
|
||||
const variants = [form.key.trim(), `Bearer ${form.key.trim()}`];
|
||||
let lastError = "";
|
||||
|
||||
const authVariants = [
|
||||
inputKey.trim(),
|
||||
`Bearer ${inputKey.trim()}`,
|
||||
];
|
||||
|
||||
let lastError: string = "";
|
||||
|
||||
for (const authHeader of authVariants) {
|
||||
for (const auth of variants) {
|
||||
try {
|
||||
await axios.get(`${cleanUrl}/integrations`, {
|
||||
headers: { Authorization: authHeader },
|
||||
headers: { Authorization: auth },
|
||||
timeout: 10000,
|
||||
maxRedirects: 0,
|
||||
});
|
||||
@@ -67,21 +91,17 @@ export default function SettingsScreen() {
|
||||
return;
|
||||
} catch (err: unknown) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const status = err.response?.status;
|
||||
if (status === 307 || status === 301 || status === 302 || status === 308) {
|
||||
const location = err.response?.headers?.location ?? "unknown";
|
||||
lastError = `HTTP ${status} redirect → ${location}. The API rejected the request and redirected to login. Check the Authorization header format or the base URL.`;
|
||||
continue;
|
||||
}
|
||||
if (status === 401 || status === 403) {
|
||||
lastError = `HTTP ${status}: Invalid or expired API key.`;
|
||||
const s = err.response?.status;
|
||||
if (s === 307 || s === 301 || s === 302 || s === 308) {
|
||||
const loc = err.response?.headers?.location ?? "unknown";
|
||||
lastError = `HTTP ${s} redirect → ${loc}. Check the Authorization format or base URL.`;
|
||||
continue;
|
||||
}
|
||||
if (s === 401 || s === 403) { lastError = `HTTP ${s}: Invalid or expired API key.`; continue; }
|
||||
}
|
||||
lastError = extractError(err);
|
||||
}
|
||||
}
|
||||
|
||||
setErrorDetail(lastError);
|
||||
setValidationStatus("error");
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
|
||||
@@ -89,37 +109,38 @@ export default function SettingsScreen() {
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!inputKey.trim() || !inputUrl.trim()) {
|
||||
Alert.alert("Missing fields", "Please enter both API key and base URL.");
|
||||
return;
|
||||
}
|
||||
if (!form) return;
|
||||
if (!form.name.trim()) { Alert.alert("Missing name", "Please enter a name for this workspace."); return; }
|
||||
if (!form.key.trim() || !form.url.trim()) { Alert.alert("Missing fields", "Please enter both API key and base URL."); return; }
|
||||
setSaving(true);
|
||||
try {
|
||||
await saveSettings(inputKey.trim(), inputUrl.trim().replace(/\/$/, ""));
|
||||
const ws = { name: form.name.trim(), apiKey: form.key.trim(), baseUrl: form.url.trim().replace(/\/$/, "") };
|
||||
if (form.id) {
|
||||
await updateWorkspace({ ...ws, id: form.id });
|
||||
} else {
|
||||
await addWorkspace(ws);
|
||||
}
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
Alert.alert("Saved", "Settings saved successfully.");
|
||||
closeForm();
|
||||
} catch (err: unknown) {
|
||||
Alert.alert("Error", `Failed to save settings.\n${extractError(err)}`);
|
||||
Alert.alert("Error", `Failed to save.\n${extractError(err)}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
const handleDelete = (ws: PostizWorkspace) => {
|
||||
Alert.alert(
|
||||
"Disconnect",
|
||||
"Remove your API key and disconnect from Postiz?",
|
||||
"Remove workspace",
|
||||
`Remove "${ws.name}"? Channels from this workspace will no longer be available.`,
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Disconnect",
|
||||
text: "Remove",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
await clearSettings();
|
||||
setInputKey("");
|
||||
setInputUrl(DEFAULT_BASE_URL);
|
||||
setValidationStatus("idle");
|
||||
setErrorDetail("");
|
||||
if (form?.id === ws.id) closeForm();
|
||||
await removeWorkspace(ws.id);
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -140,281 +161,251 @@ export default function SettingsScreen() {
|
||||
keyboardShouldPersistTaps="handled"
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{!isConfigured && (
|
||||
{/* Status banner */}
|
||||
{!isConfigured ? (
|
||||
<View style={[styles.banner, { backgroundColor: colors.primary + "18", borderColor: colors.primary + "40" }]}>
|
||||
<Feather name="info" size={16} color={colors.primary} />
|
||||
<Text style={[styles.bannerText, { color: colors.primary }]}>
|
||||
Connect to your Postiz instance to get started
|
||||
Add a workspace to get started
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{isConfigured && (
|
||||
) : (
|
||||
<View style={[styles.connectedBadge, { backgroundColor: colors.success + "18", borderColor: colors.success + "40" }]}>
|
||||
<Feather name="check-circle" size={14} color={colors.success} />
|
||||
<Text style={[styles.connectedText, { color: colors.success }]}>
|
||||
Connected to Postiz
|
||||
{workspaces.length} workspace{workspaces.length > 1 ? "s" : ""} configured
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={[styles.label, { color: colors.mutedForeground }]}>BASE URL</Text>
|
||||
<View style={[styles.inputWrap, { backgroundColor: colors.card, borderColor: colors.border }]}>
|
||||
<Feather name="globe" size={16} color={colors.mutedForeground} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.foreground }]}
|
||||
placeholder="https://postiz.example.com/api/public/v1"
|
||||
placeholderTextColor={colors.mutedForeground}
|
||||
value={inputUrl}
|
||||
onChangeText={(t) => { setInputUrl(t); setValidationStatus("idle"); setErrorDetail(""); }}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
keyboardType="url"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={[styles.label, { color: colors.mutedForeground }]}>API KEY</Text>
|
||||
<View style={[styles.inputWrap, { backgroundColor: colors.card, borderColor: colors.border }]}>
|
||||
<Feather name="key" size={16} color={colors.mutedForeground} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.foreground }]}
|
||||
placeholder="Enter your API key"
|
||||
placeholderTextColor={colors.mutedForeground}
|
||||
value={inputKey}
|
||||
onChangeText={(t) => { setInputKey(t); setValidationStatus("idle"); setErrorDetail(""); }}
|
||||
secureTextEntry={!showKey}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowKey((v) => !v)} activeOpacity={0.7}>
|
||||
<Feather name={showKey ? "eye-off" : "eye"} size={16} color={colors.mutedForeground} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{validationStatus === "ok" && (
|
||||
<View style={styles.validationRow}>
|
||||
<Feather name="check-circle" size={13} color={colors.success} />
|
||||
<Text style={[styles.validationText, { color: colors.success }]}>
|
||||
Connection successful
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{validationStatus === "error" && (
|
||||
<View style={[styles.errorBox, { backgroundColor: colors.error + "12", borderColor: colors.error + "30" }]}>
|
||||
<View style={styles.errorHeader}>
|
||||
<Feather name="x-circle" size={13} color={colors.error} />
|
||||
<Text style={[styles.errorTitle, { color: colors.error }]}>
|
||||
Could not connect
|
||||
</Text>
|
||||
</View>
|
||||
{!!errorDetail && (
|
||||
<ScrollView style={styles.errorScroll} nestedScrollEnabled>
|
||||
<Text style={[styles.errorDetail, { color: colors.error }]} selectable>
|
||||
{errorDetail}
|
||||
{/* Workspace cards */}
|
||||
{workspaces.map((ws) => (
|
||||
<View key={ws.id} style={[styles.wsCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
|
||||
<View style={styles.wsCardHeader}>
|
||||
<View style={styles.wsCardLeft}>
|
||||
<View style={[styles.wsIcon, { backgroundColor: colors.primary + "18" }]}>
|
||||
<Feather name="briefcase" size={14} color={colors.primary} />
|
||||
</View>
|
||||
<View>
|
||||
<Text style={[styles.wsName, { color: colors.foreground }]}>{ws.name}</Text>
|
||||
<Text style={[styles.wsUrl, { color: colors.mutedForeground }]} numberOfLines={1}>
|
||||
{ws.baseUrl.replace(/^https?:\/\//, "").replace(/\/api.*$/, "")}
|
||||
</Text>
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.wsCardActions}>
|
||||
<TouchableOpacity onPress={() => openEdit(ws)} activeOpacity={0.7} style={styles.iconBtn}>
|
||||
<Feather name="edit-2" size={15} color={colors.mutedForeground} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => handleDelete(ws)} activeOpacity={0.7} style={styles.iconBtn}>
|
||||
<Feather name="trash-2" size={15} color={colors.destructive} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleValidate}
|
||||
activeOpacity={0.8}
|
||||
disabled={validating}
|
||||
style={[styles.validateBtn, { backgroundColor: colors.card, borderColor: colors.border }]}
|
||||
>
|
||||
{validating ? (
|
||||
<ActivityIndicator color={colors.primary} size="small" />
|
||||
) : (
|
||||
<>
|
||||
<Feather name="wifi" size={15} color={colors.primary} />
|
||||
<Text style={[styles.validateText, { color: colors.primary }]}>
|
||||
Test Connection
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleSave}
|
||||
activeOpacity={0.85}
|
||||
disabled={saving}
|
||||
style={[styles.saveBtn, { backgroundColor: saving ? colors.muted : colors.primary }]}
|
||||
>
|
||||
{saving ? (
|
||||
<ActivityIndicator color={colors.primaryForeground} size="small" />
|
||||
) : (
|
||||
<>
|
||||
<Feather name="save" size={15} color={colors.primaryForeground} />
|
||||
<Text style={[styles.saveText, { color: colors.primaryForeground }]}>
|
||||
Save Settings
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{isConfigured && (
|
||||
{/* Add workspace button */}
|
||||
{!form && (
|
||||
<TouchableOpacity
|
||||
onPress={handleClear}
|
||||
onPress={openAdd}
|
||||
activeOpacity={0.8}
|
||||
style={[styles.clearBtn, { borderColor: colors.destructive + "60" }]}
|
||||
style={[styles.addBtn, { backgroundColor: colors.card, borderColor: colors.border }]}
|
||||
>
|
||||
<Feather name="log-out" size={14} color={colors.destructive} />
|
||||
<Text style={[styles.clearText, { color: colors.destructive }]}>Disconnect</Text>
|
||||
<Feather name="plus" size={16} color={colors.primary} />
|
||||
<Text style={[styles.addBtnText, { color: colors.primary }]}>Add workspace</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text style={[styles.footerText, { color: colors.mutedForeground }]}>
|
||||
Your API key is stored securely on this device and never transmitted to third parties.
|
||||
</Text>
|
||||
</View>
|
||||
{/* Add / Edit form */}
|
||||
{form && (
|
||||
<View style={[styles.formCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
|
||||
<Text style={[styles.formTitle, { color: colors.foreground }]}>
|
||||
{form.id ? "Edit workspace" : "Add workspace"}
|
||||
</Text>
|
||||
|
||||
{/* Name */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.mutedForeground }]}>NAME</Text>
|
||||
<View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
|
||||
<Feather name="briefcase" size={15} color={colors.mutedForeground} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.foreground }]}
|
||||
placeholder="My Client"
|
||||
placeholderTextColor={colors.mutedForeground}
|
||||
value={form.name}
|
||||
onChangeText={(t) => patchForm({ name: t })}
|
||||
autoCorrect={false}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Base URL */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.mutedForeground }]}>BASE URL</Text>
|
||||
<View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
|
||||
<Feather name="globe" size={15} color={colors.mutedForeground} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.foreground }]}
|
||||
placeholder="https://postiz.example.com/api/public/v1"
|
||||
placeholderTextColor={colors.mutedForeground}
|
||||
value={form.url}
|
||||
onChangeText={(t) => patchForm({ url: t })}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
keyboardType="url"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* API Key */}
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.mutedForeground }]}>API KEY</Text>
|
||||
<View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
|
||||
<Feather name="key" size={15} color={colors.mutedForeground} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.foreground }]}
|
||||
placeholder="Enter your API key"
|
||||
placeholderTextColor={colors.mutedForeground}
|
||||
value={form.key}
|
||||
onChangeText={(t) => patchForm({ key: t })}
|
||||
secureTextEntry={!showKey}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowKey((v) => !v)} activeOpacity={0.7}>
|
||||
<Feather name={showKey ? "eye-off" : "eye"} size={15} color={colors.mutedForeground} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{validationStatus === "ok" && (
|
||||
<View style={styles.validRow}>
|
||||
<Feather name="check-circle" size={13} color={colors.success} />
|
||||
<Text style={[styles.validText, { color: colors.success }]}>Connection successful</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{validationStatus === "error" && (
|
||||
<View style={[styles.errorBox, { backgroundColor: colors.error + "12", borderColor: colors.error + "30" }]}>
|
||||
<View style={styles.errorHeader}>
|
||||
<Feather name="x-circle" size={13} color={colors.error} />
|
||||
<Text style={[styles.errorTitle, { color: colors.error }]}>Could not connect</Text>
|
||||
</View>
|
||||
{!!errorDetail && (
|
||||
<ScrollView style={styles.errorScroll} nestedScrollEnabled>
|
||||
<Text style={[styles.errorDetail, { color: colors.error }]} selectable>{errorDetail}</Text>
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Form actions */}
|
||||
<TouchableOpacity
|
||||
onPress={handleValidate}
|
||||
activeOpacity={0.8}
|
||||
disabled={validating}
|
||||
style={[styles.validateBtn, { backgroundColor: colors.background, borderColor: colors.border }]}
|
||||
>
|
||||
{validating ? (
|
||||
<ActivityIndicator color={colors.primary} size="small" />
|
||||
) : (
|
||||
<>
|
||||
<Feather name="wifi" size={15} color={colors.primary} />
|
||||
<Text style={[styles.validateText, { color: colors.primary }]}>Test Connection</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.formBtnsRow}>
|
||||
<TouchableOpacity
|
||||
onPress={closeForm}
|
||||
activeOpacity={0.8}
|
||||
style={[styles.cancelBtn, { borderColor: colors.border }]}
|
||||
>
|
||||
<Text style={[styles.cancelText, { color: colors.mutedForeground }]}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={handleSave}
|
||||
activeOpacity={0.85}
|
||||
disabled={saving}
|
||||
style={[styles.saveBtn, { backgroundColor: saving ? colors.muted : colors.primary }]}
|
||||
>
|
||||
{saving ? (
|
||||
<ActivityIndicator color={colors.primaryForeground} size="small" />
|
||||
) : (
|
||||
<>
|
||||
<Feather name="save" size={15} color={colors.primaryForeground} />
|
||||
<Text style={[styles.saveText, { color: colors.primaryForeground }]}>
|
||||
{form.id ? "Update" : "Save"}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Text style={[styles.footerText, { color: colors.mutedForeground }]}>
|
||||
API keys are stored securely on this device and never transmitted to third parties.
|
||||
</Text>
|
||||
</KeyboardAwareScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingHorizontal: 20,
|
||||
gap: 16,
|
||||
},
|
||||
container: { paddingHorizontal: 20, gap: 14 },
|
||||
banner: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
},
|
||||
bannerText: {
|
||||
fontSize: 13,
|
||||
fontFamily: "Inter_500Medium",
|
||||
flex: 1,
|
||||
flexDirection: "row", alignItems: "center", gap: 10,
|
||||
paddingHorizontal: 14, paddingVertical: 12, borderRadius: 12, borderWidth: 1,
|
||||
},
|
||||
bannerText: { fontSize: 13, fontFamily: "Inter_500Medium", flex: 1 },
|
||||
connectedBadge: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
alignSelf: "flex-start",
|
||||
flexDirection: "row", alignItems: "center", gap: 6,
|
||||
paddingHorizontal: 12, paddingVertical: 8, borderRadius: 10, borderWidth: 1, alignSelf: "flex-start",
|
||||
},
|
||||
connectedText: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
},
|
||||
section: {
|
||||
gap: 8,
|
||||
},
|
||||
label: {
|
||||
fontSize: 11,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
letterSpacing: 0.8,
|
||||
marginLeft: 2,
|
||||
connectedText: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
|
||||
wsCard: { borderRadius: 14, borderWidth: 1, overflow: "hidden" },
|
||||
wsCardHeader: { flexDirection: "row", alignItems: "center", paddingHorizontal: 14, paddingVertical: 12 },
|
||||
wsCardLeft: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12 },
|
||||
wsIcon: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" },
|
||||
wsName: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
||||
wsUrl: { fontSize: 11, fontFamily: "Inter_400Regular", marginTop: 1 },
|
||||
wsCardActions: { flexDirection: "row", gap: 4 },
|
||||
iconBtn: { padding: 8 },
|
||||
addBtn: {
|
||||
flexDirection: "row", alignItems: "center", justifyContent: "center",
|
||||
gap: 8, paddingVertical: 13, borderRadius: 14, borderWidth: 1, borderStyle: "dashed",
|
||||
},
|
||||
addBtnText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
||||
formCard: { borderRadius: 14, borderWidth: 1, padding: 16, gap: 14 },
|
||||
formTitle: { fontSize: 15, fontFamily: "Inter_600SemiBold" },
|
||||
fieldGroup: { gap: 6 },
|
||||
label: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.8, marginLeft: 2 },
|
||||
inputWrap: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
gap: 10,
|
||||
},
|
||||
inputIcon: {
|
||||
flexShrink: 0,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
fontFamily: "Inter_400Regular",
|
||||
},
|
||||
validationRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
marginLeft: 2,
|
||||
},
|
||||
validationText: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Inter_400Regular",
|
||||
},
|
||||
errorBox: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
padding: 12,
|
||||
gap: 6,
|
||||
},
|
||||
errorHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
},
|
||||
errorTitle: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
},
|
||||
errorScroll: {
|
||||
maxHeight: 80,
|
||||
},
|
||||
errorDetail: {
|
||||
fontSize: 11,
|
||||
fontFamily: "Inter_400Regular",
|
||||
lineHeight: 16,
|
||||
flexDirection: "row", alignItems: "center",
|
||||
borderRadius: 10, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 11, gap: 10,
|
||||
},
|
||||
input: { flex: 1, fontSize: 14, fontFamily: "Inter_400Regular" },
|
||||
validRow: { flexDirection: "row", alignItems: "center", gap: 6, marginLeft: 2 },
|
||||
validText: { fontSize: 12, fontFamily: "Inter_400Regular" },
|
||||
errorBox: { borderRadius: 10, borderWidth: 1, padding: 12, gap: 6 },
|
||||
errorHeader: { flexDirection: "row", alignItems: "center", gap: 6 },
|
||||
errorTitle: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
|
||||
errorScroll: { maxHeight: 80 },
|
||||
errorDetail: { fontSize: 11, fontFamily: "Inter_400Regular", lineHeight: 16 },
|
||||
validateBtn: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
},
|
||||
validateText: {
|
||||
fontSize: 14,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
flexDirection: "row", alignItems: "center", justifyContent: "center",
|
||||
gap: 8, paddingVertical: 11, borderRadius: 10, borderWidth: 1,
|
||||
},
|
||||
validateText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
||||
formBtnsRow: { flexDirection: "row", gap: 10 },
|
||||
cancelBtn: { flex: 1, paddingVertical: 12, borderRadius: 10, borderWidth: 1, alignItems: "center" },
|
||||
cancelText: { fontSize: 14, fontFamily: "Inter_500Medium" },
|
||||
saveBtn: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 14,
|
||||
},
|
||||
saveText: {
|
||||
fontSize: 15,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
},
|
||||
clearBtn: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
},
|
||||
clearText: {
|
||||
fontSize: 14,
|
||||
fontFamily: "Inter_500Medium",
|
||||
},
|
||||
footer: {
|
||||
marginTop: 8,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Inter_400Regular",
|
||||
textAlign: "center",
|
||||
lineHeight: 18,
|
||||
flex: 2, flexDirection: "row", alignItems: "center", justifyContent: "center",
|
||||
gap: 8, paddingVertical: 12, borderRadius: 10,
|
||||
},
|
||||
saveText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
||||
footerText: { fontSize: 12, fontFamily: "Inter_400Regular", textAlign: "center", lineHeight: 18, marginTop: 4 },
|
||||
});
|
||||
|
||||
@@ -0,0 +1,272 @@
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import { Image } from "expo-image";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
Modal,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { PostizWorkspace } from "@/context/PostizContext";
|
||||
import { useColors } from "@/hooks/useColors";
|
||||
|
||||
export interface LibraryMediaItem {
|
||||
id: string;
|
||||
path: string;
|
||||
workspaceId: string;
|
||||
createdAt?: string;
|
||||
}
|
||||
|
||||
interface RawMediaItem {
|
||||
id: string;
|
||||
path: string;
|
||||
createdAt?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
workspaces: PostizWorkspace[];
|
||||
defaultWorkspaceId?: string;
|
||||
maxSelect: number;
|
||||
onClose: () => void;
|
||||
onSelect: (items: LibraryMediaItem[]) => void;
|
||||
onPickFromDevice?: () => void;
|
||||
}
|
||||
|
||||
function resolveUrl(path: string, baseUrl: string): string {
|
||||
if (path.startsWith("http://") || path.startsWith("https://")) return path;
|
||||
const origin = baseUrl.replace(/\/api\/.*$/, "");
|
||||
return `${origin}/${path.replace(/^\//, "")}`;
|
||||
}
|
||||
|
||||
export function MediaLibraryModal({ visible, workspaces, defaultWorkspaceId, maxSelect, onClose, onSelect, onPickFromDevice }: Props) {
|
||||
const colors = useColors();
|
||||
const insets = useSafeAreaInsets();
|
||||
const [activeId, setActiveId] = useState<string>("");
|
||||
const [items, setItems] = useState<RawMediaItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
|
||||
const activeWorkspace = workspaces.find((w) => w.id === activeId) ?? workspaces[0] ?? null;
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
const initial = defaultWorkspaceId ?? workspaces[0]?.id ?? "";
|
||||
setActiveId(initial);
|
||||
setSelected(new Set());
|
||||
}
|
||||
}, [visible, defaultWorkspaceId, workspaces]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!activeWorkspace) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const apiBase = activeWorkspace.baseUrl.replace(/\/public\/v1$/, "");
|
||||
const url = `${apiBase}/media?page=0&search=`;
|
||||
try {
|
||||
// eslint-disable-next-line no-undef
|
||||
const res = await globalThis.fetch(url, {
|
||||
headers: { Authorization: activeWorkspace.apiKey },
|
||||
});
|
||||
if (!res.ok) {
|
||||
if (res.status === 401 || res.status === 403) {
|
||||
throw new Error("SESSION_REQUIRED");
|
||||
}
|
||||
if (res.status === 404) {
|
||||
throw new Error("ENDPOINT_NOT_FOUND");
|
||||
}
|
||||
throw new Error(`HTTP ${res.status} — ${url}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
const list: RawMediaItem[] = Array.isArray(data)
|
||||
? data
|
||||
: (data?.media ?? data?.items ?? data?.files ?? []);
|
||||
setItems(list);
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : "Failed to load media");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [activeWorkspace]);
|
||||
|
||||
useEffect(() => {
|
||||
if (visible && activeWorkspace) {
|
||||
setSelected(new Set());
|
||||
load();
|
||||
}
|
||||
}, [visible, activeWorkspace, load]);
|
||||
|
||||
const toggle = (id: string) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) { next.delete(id); }
|
||||
else if (next.size < maxSelect) { next.add(id); }
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!activeWorkspace) return;
|
||||
const chosen = items
|
||||
.filter((i) => selected.has(i.id))
|
||||
.map((i): LibraryMediaItem => ({ ...i, workspaceId: activeWorkspace.id }));
|
||||
onSelect(chosen);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal visible={visible} animationType="slide" onRequestClose={onClose}>
|
||||
<View style={[styles.root, { backgroundColor: colors.background, paddingTop: insets.top }]}>
|
||||
{/* Header */}
|
||||
<View style={[styles.header, { borderBottomColor: colors.border }]}>
|
||||
<TouchableOpacity onPress={onClose} activeOpacity={0.7} style={styles.closeBtn}>
|
||||
<Feather name="x" size={20} color={colors.foreground} />
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.title, { color: colors.foreground }]}>Media Library</Text>
|
||||
<TouchableOpacity
|
||||
onPress={handleConfirm}
|
||||
disabled={selected.size === 0}
|
||||
activeOpacity={0.8}
|
||||
style={[styles.addBtn, { backgroundColor: selected.size > 0 ? colors.primary : colors.muted }]}
|
||||
>
|
||||
<Text style={[styles.addBtnText, { color: colors.primaryForeground }]}>
|
||||
{selected.size > 0 ? `Add ${selected.size}` : "Add"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Workspace tabs (only shown when >1 workspace) */}
|
||||
{workspaces.length > 1 && (
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={[styles.tabs, { borderBottomColor: colors.border }]}
|
||||
contentContainerStyle={styles.tabsContent}
|
||||
>
|
||||
{workspaces.map((ws) => {
|
||||
const active = ws.id === activeId;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={ws.id}
|
||||
onPress={() => setActiveId(ws.id)}
|
||||
activeOpacity={0.7}
|
||||
style={[
|
||||
styles.tab,
|
||||
active && { borderBottomColor: colors.primary, borderBottomWidth: 2 },
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.tabText, { color: active ? colors.primary : colors.mutedForeground }]}>
|
||||
{ws.name}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{loading ? (
|
||||
<View style={styles.centered}>
|
||||
<ActivityIndicator color={colors.primary} size="large" />
|
||||
</View>
|
||||
) : error === "SESSION_REQUIRED" ? (
|
||||
<View style={styles.centered}>
|
||||
<Feather name="lock" size={28} color={colors.mutedForeground} />
|
||||
<Text style={[styles.errorText, { color: colors.mutedForeground }]}>
|
||||
{"Media library requires a web session.\nAPI key access is not supported by Postiz."}
|
||||
</Text>
|
||||
{onPickFromDevice && (
|
||||
<TouchableOpacity
|
||||
onPress={() => { onClose(); onPickFromDevice(); }}
|
||||
style={[styles.retryBtn, { backgroundColor: colors.primary }]}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={[styles.retryText, { color: colors.primaryForeground }]}>Use device gallery</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
) : error === "ENDPOINT_NOT_FOUND" ? (
|
||||
<View style={styles.centered}>
|
||||
<Feather name="slash" size={28} color={colors.mutedForeground} />
|
||||
<Text style={[styles.errorText, { color: colors.mutedForeground }]}>
|
||||
{"Media library endpoint not found on this server."}
|
||||
</Text>
|
||||
</View>
|
||||
) : error ? (
|
||||
<View style={styles.centered}>
|
||||
<Feather name="alert-circle" size={28} color={colors.error} />
|
||||
<Text style={[styles.errorText, { color: colors.mutedForeground }]}>{error}</Text>
|
||||
<TouchableOpacity onPress={load} style={[styles.retryBtn, { backgroundColor: colors.primary }]} activeOpacity={0.8}>
|
||||
<Text style={[styles.retryText, { color: colors.primaryForeground }]}>Retry</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : items.length === 0 ? (
|
||||
<View style={styles.centered}>
|
||||
<Feather name="image" size={36} color={colors.mutedForeground} />
|
||||
<Text style={[styles.emptyText, { color: colors.mutedForeground }]}>No media found</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={items}
|
||||
keyExtractor={(item) => item.id}
|
||||
numColumns={3}
|
||||
contentContainerStyle={[styles.grid, { paddingBottom: insets.bottom + 16 }]}
|
||||
renderItem={({ item }) => {
|
||||
const isSelected = selected.has(item.id);
|
||||
const uri = resolveUrl(item.path, activeWorkspace?.baseUrl ?? "");
|
||||
return (
|
||||
<TouchableOpacity onPress={() => toggle(item.id)} activeOpacity={0.8} style={styles.cell}>
|
||||
<Image source={{ uri }} style={styles.cellImage} contentFit="cover" />
|
||||
{isSelected && (
|
||||
<View style={[styles.selectedOverlay, { backgroundColor: colors.primary + "99" }]}>
|
||||
<View style={[styles.checkCircle, { backgroundColor: colors.primary }]}>
|
||||
<Feather name="check" size={14} color="#fff" />
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const CELL = 120;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: { flex: 1 },
|
||||
header: {
|
||||
flexDirection: "row", alignItems: "center",
|
||||
paddingHorizontal: 16, paddingVertical: 14,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth, gap: 12,
|
||||
},
|
||||
closeBtn: { padding: 4 },
|
||||
title: { flex: 1, fontSize: 17, fontFamily: "Inter_600SemiBold" },
|
||||
addBtn: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
|
||||
addBtnText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
||||
tabs: { borderBottomWidth: StyleSheet.hairlineWidth, flexGrow: 0 },
|
||||
tabsContent: { paddingHorizontal: 12, gap: 4 },
|
||||
tab: { paddingHorizontal: 12, paddingVertical: 12 },
|
||||
tabText: { fontSize: 13, fontFamily: "Inter_500Medium" },
|
||||
centered: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12 },
|
||||
errorText: { fontSize: 14, fontFamily: "Inter_400Regular", textAlign: "center", paddingHorizontal: 32 },
|
||||
emptyText: { fontSize: 14, fontFamily: "Inter_400Regular" },
|
||||
retryBtn: { paddingHorizontal: 20, paddingVertical: 10, borderRadius: 10 },
|
||||
retryText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
|
||||
grid: { padding: 2 },
|
||||
cell: { width: CELL, height: CELL, margin: 2 },
|
||||
cellImage: { width: CELL, height: CELL, borderRadius: 4 },
|
||||
selectedOverlay: {
|
||||
...StyleSheet.absoluteFillObject, borderRadius: 4,
|
||||
alignItems: "center", justifyContent: "center",
|
||||
},
|
||||
checkCircle: { width: 28, height: 28, borderRadius: 14, alignItems: "center", justifyContent: "center" },
|
||||
});
|
||||
@@ -5,14 +5,22 @@ import React, {
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
const API_KEY_STORAGE = "postiz_api_key";
|
||||
const BASE_URL_STORAGE = "postiz_base_url";
|
||||
const WORKSPACES_KEY = "postiz_workspaces_v2";
|
||||
const LEGACY_API_KEY = "postiz_api_key";
|
||||
const LEGACY_BASE_URL = "postiz_base_url";
|
||||
|
||||
export const DEFAULT_BASE_URL = "https://postiz.gyozamancave.fr/api/public/v1";
|
||||
|
||||
export interface PostizWorkspace {
|
||||
id: string;
|
||||
name: string;
|
||||
apiKey: string;
|
||||
baseUrl: string;
|
||||
}
|
||||
|
||||
export interface PostizIntegration {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -20,6 +28,7 @@ export interface PostizIntegration {
|
||||
picture?: string;
|
||||
identifier?: string;
|
||||
internalType?: string;
|
||||
customer?: { id: string; name: string };
|
||||
}
|
||||
|
||||
export interface PostizMediaItem {
|
||||
@@ -45,129 +54,129 @@ export interface PostizUploadResult {
|
||||
}
|
||||
|
||||
interface PostizContextValue {
|
||||
apiKey: string;
|
||||
baseUrl: string;
|
||||
workspaces: PostizWorkspace[];
|
||||
isConfigured: boolean;
|
||||
isLoading: boolean;
|
||||
unauthorized: boolean;
|
||||
clearUnauthorized: () => void;
|
||||
clients: Record<string, AxiosInstance>;
|
||||
addWorkspace: (ws: Omit<PostizWorkspace, "id">) => Promise<void>;
|
||||
updateWorkspace: (ws: PostizWorkspace) => Promise<void>;
|
||||
removeWorkspace: (id: string) => Promise<void>;
|
||||
// backward compat for posts.tsx (first workspace)
|
||||
client: AxiosInstance | null;
|
||||
saveSettings: (apiKey: string, baseUrl: string) => Promise<void>;
|
||||
clearSettings: () => Promise<void>;
|
||||
apiKey: string;
|
||||
baseUrl: string;
|
||||
}
|
||||
|
||||
const PostizContext = createContext<PostizContextValue>({
|
||||
apiKey: "",
|
||||
baseUrl: DEFAULT_BASE_URL,
|
||||
workspaces: [],
|
||||
isConfigured: false,
|
||||
isLoading: true,
|
||||
unauthorized: false,
|
||||
clearUnauthorized: () => {},
|
||||
clients: {},
|
||||
addWorkspace: async () => {},
|
||||
updateWorkspace: async () => {},
|
||||
removeWorkspace: async () => {},
|
||||
client: null,
|
||||
saveSettings: async () => {},
|
||||
clearSettings: async () => {},
|
||||
apiKey: "",
|
||||
baseUrl: DEFAULT_BASE_URL,
|
||||
});
|
||||
|
||||
function createClient(
|
||||
apiKey: string,
|
||||
baseUrl: string,
|
||||
onUnauthorized?: () => void
|
||||
): AxiosInstance {
|
||||
const normalizedUrl = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
|
||||
function makeClient(ws: PostizWorkspace): AxiosInstance {
|
||||
const baseURL = ws.baseUrl.endsWith("/") ? ws.baseUrl : ws.baseUrl + "/";
|
||||
const instance = axios.create({
|
||||
baseURL: normalizedUrl,
|
||||
headers: {
|
||||
Authorization: apiKey,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
baseURL,
|
||||
headers: { Authorization: ws.apiKey, "Content-Type": "application/json" },
|
||||
timeout: 15000,
|
||||
});
|
||||
instance.interceptors.request.use((config) => {
|
||||
console.log(">>> REQUEST:", config.method?.toUpperCase(), (config.baseURL || "") + (config.url || ""));
|
||||
console.log(">>> REQUEST:", config.method?.toUpperCase(), (config.baseURL ?? "") + (config.url ?? ""));
|
||||
return config;
|
||||
});
|
||||
instance.interceptors.response.use(
|
||||
(res) => res,
|
||||
(err) => {
|
||||
if (axios.isAxiosError(err) && err.response?.status === 401) {
|
||||
onUnauthorized?.();
|
||||
}
|
||||
return Promise.reject(err);
|
||||
}
|
||||
);
|
||||
return instance;
|
||||
}
|
||||
|
||||
function buildClients(list: PostizWorkspace[]): Record<string, AxiosInstance> {
|
||||
return Object.fromEntries(list.map((ws) => [ws.id, makeClient(ws)]));
|
||||
}
|
||||
|
||||
export function PostizProvider({ children }: { children: React.ReactNode }) {
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
|
||||
const [workspaces, setWorkspaces] = useState<PostizWorkspace[]>([]);
|
||||
const [clients, setClients] = useState<Record<string, AxiosInstance>>({});
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [client, setClient] = useState<AxiosInstance | null>(null);
|
||||
const [unauthorized, setUnauthorized] = useState(false);
|
||||
const unauthorizedFiredRef = useRef(false);
|
||||
|
||||
const handleUnauthorized = useCallback(() => {
|
||||
if (unauthorizedFiredRef.current) return;
|
||||
unauthorizedFiredRef.current = true;
|
||||
setUnauthorized(true);
|
||||
}, []);
|
||||
|
||||
const clearUnauthorized = useCallback(() => {
|
||||
unauthorizedFiredRef.current = false;
|
||||
setUnauthorized(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const storedKey = await SecureStore.getItemAsync(API_KEY_STORAGE);
|
||||
const storedUrl = await SecureStore.getItemAsync(BASE_URL_STORAGE);
|
||||
if (storedKey) {
|
||||
const url = (storedUrl || DEFAULT_BASE_URL).replace(/\/$/, "");
|
||||
setApiKey(storedKey);
|
||||
setBaseUrl(url);
|
||||
setClient(() => createClient(storedKey, url, handleUnauthorized));
|
||||
const stored = await SecureStore.getItemAsync(WORKSPACES_KEY);
|
||||
if (stored) {
|
||||
const list: PostizWorkspace[] = JSON.parse(stored);
|
||||
setWorkspaces(list);
|
||||
setClients(buildClients(list));
|
||||
} else {
|
||||
// Migrate legacy single-workspace config
|
||||
const legacyKey = await SecureStore.getItemAsync(LEGACY_API_KEY);
|
||||
const legacyUrl = await SecureStore.getItemAsync(LEGACY_BASE_URL);
|
||||
if (legacyKey) {
|
||||
const migrated: PostizWorkspace = {
|
||||
id: Date.now().toString(),
|
||||
name: "Default",
|
||||
apiKey: legacyKey,
|
||||
baseUrl: (legacyUrl || DEFAULT_BASE_URL).replace(/\/$/, ""),
|
||||
};
|
||||
const list = [migrated];
|
||||
await SecureStore.setItemAsync(WORKSPACES_KEY, JSON.stringify(list));
|
||||
setWorkspaces(list);
|
||||
setClients(buildClients(list));
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [handleUnauthorized]);
|
||||
}, []);
|
||||
|
||||
const saveSettings = useCallback(
|
||||
async (newApiKey: string, newBaseUrl: string) => {
|
||||
await SecureStore.setItemAsync(API_KEY_STORAGE, newApiKey);
|
||||
await SecureStore.setItemAsync(BASE_URL_STORAGE, newBaseUrl);
|
||||
setApiKey(newApiKey);
|
||||
setBaseUrl(newBaseUrl);
|
||||
clearUnauthorized();
|
||||
setClient(() => createClient(newApiKey, newBaseUrl, handleUnauthorized));
|
||||
const persist = useCallback(async (list: PostizWorkspace[]) => {
|
||||
await SecureStore.setItemAsync(WORKSPACES_KEY, JSON.stringify(list));
|
||||
setWorkspaces(list);
|
||||
setClients(buildClients(list));
|
||||
}, []);
|
||||
|
||||
const addWorkspace = useCallback(
|
||||
async (ws: Omit<PostizWorkspace, "id">) => {
|
||||
await persist([...workspaces, { ...ws, id: Date.now().toString() }]);
|
||||
},
|
||||
[handleUnauthorized, clearUnauthorized]
|
||||
[workspaces, persist]
|
||||
);
|
||||
|
||||
const clearSettings = useCallback(async () => {
|
||||
await SecureStore.deleteItemAsync(API_KEY_STORAGE);
|
||||
await SecureStore.deleteItemAsync(BASE_URL_STORAGE);
|
||||
setApiKey("");
|
||||
setBaseUrl(DEFAULT_BASE_URL);
|
||||
setClient(null);
|
||||
clearUnauthorized();
|
||||
}, [clearUnauthorized]);
|
||||
const updateWorkspace = useCallback(
|
||||
async (ws: PostizWorkspace) => {
|
||||
await persist(workspaces.map((w) => (w.id === ws.id ? ws : w)));
|
||||
},
|
||||
[workspaces, persist]
|
||||
);
|
||||
|
||||
const removeWorkspace = useCallback(
|
||||
async (id: string) => {
|
||||
await persist(workspaces.filter((w) => w.id !== id));
|
||||
},
|
||||
[workspaces, persist]
|
||||
);
|
||||
|
||||
const primaryWorkspace = workspaces[0] ?? null;
|
||||
|
||||
return (
|
||||
<PostizContext.Provider
|
||||
value={{
|
||||
apiKey,
|
||||
baseUrl,
|
||||
isConfigured: !!apiKey,
|
||||
workspaces,
|
||||
isConfigured: workspaces.length > 0,
|
||||
isLoading,
|
||||
unauthorized,
|
||||
clearUnauthorized,
|
||||
client,
|
||||
saveSettings,
|
||||
clearSettings,
|
||||
clients,
|
||||
addWorkspace,
|
||||
updateWorkspace,
|
||||
removeWorkspace,
|
||||
client: primaryWorkspace ? (clients[primaryWorkspace.id] ?? null) : null,
|
||||
apiKey: primaryWorkspace?.apiKey ?? "",
|
||||
baseUrl: primaryWorkspace?.baseUrl ?? DEFAULT_BASE_URL,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
|
||||
import { Platform } from "react-native";
|
||||
import { usePostiz } from "@/context/PostizContext";
|
||||
import { PostizPost } from "@/context/PostizContext";
|
||||
import { stripHtml } from "@/lib/stripHtml";
|
||||
|
||||
const POLL_INTERVAL_MS = 15 * 60 * 1000;
|
||||
const SEEN_KEY = "postiz_seen_statuses";
|
||||
@@ -44,10 +45,7 @@ async function sendStatusNotification(post: PostizPost) {
|
||||
await Notifications.scheduleNotificationAsync({
|
||||
content: {
|
||||
title: isError ? "Post failed to publish" : "Post published!",
|
||||
body:
|
||||
post.content.length > 80
|
||||
? post.content.slice(0, 80) + "…"
|
||||
: post.content,
|
||||
body: (() => { const t = stripHtml(post.content); return t.length > 80 ? t.slice(0, 80) + "…" : t; })(),
|
||||
data: { postId: post.id },
|
||||
},
|
||||
trigger: null,
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
export function stripHtml(html: string): string {
|
||||
return html
|
||||
.replace(/<br\s*\/?>/gi, "\n")
|
||||
.replace(/<\/p>/gi, "\n")
|
||||
.replace(/<[^>]+>/g, "")
|
||||
export function stripHtml(html: string | null | undefined): string {
|
||||
if (!html) return "";
|
||||
// Decode entities first so encoded tags like <p> are also stripped
|
||||
let s = html
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'")
|
||||
.replace(/ /g, " ")
|
||||
.replace(/\n{3,}/g, "\n\n")
|
||||
.trim();
|
||||
.replace(/ /g, " ");
|
||||
// Block-level tags → newlines
|
||||
s = s
|
||||
.replace(/<br\s*\/?>/gi, "\n")
|
||||
.replace(/<\/p>/gi, "\n")
|
||||
.replace(/<\/div>/gi, "\n")
|
||||
.replace(/<\/li>/gi, "\n");
|
||||
// Strip all remaining tags
|
||||
s = s.replace(/<[^>]+>/g, "");
|
||||
return s.replace(/\n{3,}/g, "\n\n").trim();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user