fastcomments-react-native-sdk
Version:
React Native FastComments Components. Add live commenting to any React Native application.
83 lines (82 loc) • 4.53 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, ActivityIndicator, Image, TouchableOpacity, Alert } from "react-native";
import { FastCommentsImageAsset } from "../types";
import { useState } from "react";
import { createURLQueryString, makeRequest } from "../services/http";
import { getActionTenantId } from "../services/tenants";
import { newBroadcastId } from "../services/broadcast-id";
import { CommentTextArea10Tap as CommentTextArea } from "./comment-text-area-10tap";
import { incChangeCounter } from "../services/comment-render-determination";
import { getMergedTranslations } from "../services/translations";
async function saveCommentText({ comment, state }, newValue) {
const tenantId = getActionTenantId({ state, tenantId: comment.tenantId });
const broadcastId = newBroadcastId();
const response = await makeRequest({
apiHost: state.apiHost.get(),
method: 'POST',
url: '/comments/' + tenantId + '/' + comment._id + '/update-text/' + createURLQueryString({
urlId: state.config.urlId.get(),
editKey: comment.editKey,
sso: state.ssoConfigString.get(),
broadcastId
}),
body: {
comment: newValue,
// TODO
// mentions: ???
// hashTags: ???
}
});
if (response.status === 'success') {
comment.approved = response.comment.approved;
comment.comment = response.comment.comment;
comment.commentHTML = response.comment.commentHTML;
incChangeCounter(comment);
}
else {
const translations = getMergedTranslations(state.translations.get({ stealth: true }), response);
const message = response.code === 'edit-key-invalid' ? translations.LOGIN_TO_EDIT : translations.ERROR_MESSAGE;
Alert.alert(":(", message, [
{
text: translations.DISMISS
}
]);
}
}
export function CommentActionEdit({ comment, isDirtyRef, pickGIF, pickImage, state, styles, close }) {
const [isLoading, setLoading] = useState(false);
const valueGetter = {};
isDirtyRef.current = () => {
if (valueGetter.getValue) {
return comment.comment !== valueGetter.getValue();
}
return false;
};
const inlineReactImages = state.config.inlineReactImages.get();
let emoticonBarConfig = {};
if (inlineReactImages) {
emoticonBarConfig.emoticons = inlineReactImages.map(function (src) {
return [src, _jsx(Image, { source: { uri: src }, style: styles.commentTextAreaEmoticonBar?.icon })];
});
}
return _jsx(View, { style: styles.commentEditModal?.centeredView, children: _jsxs(View, { style: styles.commentEditModal?.modalView, children: [_jsx(CommentTextArea, { emoticonBarConfig: emoticonBarConfig, styles: styles, state: state.get(), value: comment.comment, output: valueGetter, pickImage: pickImage, pickGIF: pickGIF }), _jsx(TouchableOpacity, { style: styles.commentEditModal?.saveButton, onPress: async () => {
setLoading(true);
try {
if (valueGetter.getValue) {
comment.comment = valueGetter.getValue();
}
await saveCommentText({ comment, state }, comment.comment);
setLoading(false);
close(true);
}
catch (e) {
console.error(e);
setLoading(false);
Alert.alert(":(", state.translations.FAILED_TO_SAVE_EDIT.get(), [
{
text: state.translations.DISMISS.get()
}
]);
}
}, children: _jsx(Text, { style: styles.commentEditModal?.saveButtonText, children: state.translations.SAVE.get() }) }), _jsx(TouchableOpacity, { style: styles.commentEditModal?.modalCancel, onPress: () => close(false), children: _jsx(Image, { source: state.imageAssets.get()[state.config.hasDarkBackground.get() ? FastCommentsImageAsset.ICON_CROSS_WHITE : FastCommentsImageAsset.ICON_CROSS], style: { width: 16, height: 16 } }) }), isLoading && _jsx(View, { style: styles.commentEditModal?.loadingView, children: _jsx(ActivityIndicator, { size: "large" }) })] }) });
}