@roam-garden/landscaping-toolbox
Version:
Common UI things for Roam Garden management
158 lines • 8.6 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UploadForm = void 0;
const react_1 = __importStar(require("react"));
const theme_ui_1 = require("theme-ui");
const aws_amplify_1 = require("aws-amplify");
const tag_input_1 = require("./tag-input");
const react_2 = require("../common/react");
const config_1 = require("../config");
const storage_1 = require("../common/storage");
const roam_export_1 = require("roam-export");
const async_1 = require("../common/async");
const css_editor_1 = require("./css-editor");
const progress_indicator_1 = require("./progress-indicator");
const subscription_exists_modal_1 = require("./subscription-exists-modal");
const UploadForm = ({ allPageNames, roamDataSupplier, showModal = true, onSubmit, }) => {
const [titlePlaceholder, setTitlePlaceholder] = react_1.useState("");
const [title, setTitle] = react_2.useLocalState("title", "");
const [publicTags, setPublicTags] = react_2.useLocalState("publicTags", [{ id: 0, name: "make-public" }]);
const [privateTags, setPrivateTags] = react_2.useLocalState("privateTags", []);
const [entryPageTag, setEntryPageTag] = react_2.useLocalState("entryPageTag", []);
const [allPagesPublic, setAllPagesPublic] = react_2.useLocalState("allPagesPublic", false);
const [processingState, setProcessingState] = react_1.useState("");
const [file, setFile] = react_1.useState(undefined);
const [cssCode, setCssCode] = react_2.useLocalState("cssCode", "");
const [cssValid, setCssValid] = react_1.useState(false);
const [isSuccess, indicateSuccess] = progress_indicator_1.useSuccessIndicator();
react_1.useEffect(() => {
(async () => {
const user = await aws_amplify_1.Auth.currentAuthenticatedUser();
setTitlePlaceholder(`${user.getUsername()}'s Garden`);
})();
}, []);
const allPageTags = allPageNames.map(it => ({ name: it, id: it }));
return (react_1.default.createElement(theme_ui_1.Box, { as: "section", id: "upload", sx: {
" label": {
marginBottom: "0.7em",
},
} },
showModal && react_1.default.createElement(subscription_exists_modal_1.SubscriptionExistsModal, null),
react_1.default.createElement(theme_ui_1.Container, null,
react_1.default.createElement(theme_ui_1.Box, { as: "form", onSubmit: submit },
react_1.default.createElement(theme_ui_1.Label, { htmlFor: "title" }, "Garden Title *"),
react_1.default.createElement(theme_ui_1.Input, { name: "title", mb: 3, value: title, onChange: event => setTitle(event.target.value), placeholder: titlePlaceholder, required: true }),
react_1.default.createElement(theme_ui_1.Label, { htmlFor: "entry" }, "Starting page *"),
react_1.default.createElement(tag_input_1.TagInput, { minTags: 1, maxTags: 1, suggestions: allPageTags, tags: entryPageTag, setTags: setEntryPageTag, placeholderText: "About these notes" }),
react_1.default.createElement(theme_ui_1.Label, null,
react_1.default.createElement(theme_ui_1.Checkbox, { checked: allPagesPublic, onChange: event => setAllPagesPublic(event.target.checked) }),
"Make All pages public"),
react_1.default.createElement(theme_ui_1.Label, null, "Make pages with these tags public (all pages are private by default) *"),
react_1.default.createElement(tag_input_1.TagInput, { minTags: 1, suggestions: allPageTags, tags: publicTags, setTags: setPublicTags, disabled: allPagesPublic }),
react_1.default.createElement(theme_ui_1.Label, null, "Make blocks with these tags private"),
react_1.default.createElement(tag_input_1.TagInput, { tags: privateTags, suggestions: allPageTags, setTags: setPrivateTags }),
!roamDataSupplier && react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(theme_ui_1.Label, { htmlFor: "db" },
"Your graph JSON (",
react_1.default.createElement(theme_ui_1.Link, { href: "https://roamresearch.freshdesk.com/support/solutions/articles/64000248331-how-to-export-your-roam-graph" }, "how to get it"),
")"),
react_1.default.createElement(theme_ui_1.Input, { type: "file", name: "db", mb: 3, accept: "application/json", onChange: e => { var _a; return setFile((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]); }, required: true })),
react_1.default.createElement(theme_ui_1.Label, null, "Custom CSS (optional)"),
css_editor_1.CssEditor({ cssCode, setCssCode, cssValid, setCssValid }),
processingState ?
react_1.default.createElement(progress_indicator_1.ProgressIndicator, { processingState: processingState, isSuccess: isSuccess }) :
react_1.default.createElement(theme_ui_1.Button, { disabled: !isValid() }, "Submit")))));
function isValid() {
let result = true;
if (!(publicTags.length || allPagesPublic)) {
result = false;
console.log("Must specify at least one public tag");
}
if (!entryPageTag.length) {
result = false;
console.log("Must specify entry page");
}
if (!file && !roamDataSupplier) {
result = false;
console.log("Must select file");
}
if (!title) {
result = false;
console.log("Must enter title");
}
if (!cssValid) {
result = false;
console.log("CSS is invalid");
}
return result;
}
async function getDataToUpload() {
if (!roamDataSupplier) {
return file;
}
setProcessingState("Creating full data export");
const roamExport = await async_1.executeAfterDelay(0, roamDataSupplier);
console.log("Export done, performing filtering");
const { pages } = new roam_export_1.RoamJsonQuery(roamExport, constructFilter()).getPagesToRender();
console.log("Export & filtering done");
return JSON.stringify(pages);
}
function constructFilter() {
return {
makeAllPagesPublic: allPagesPublic,
pagesToMakePublic: [entryPageName()],
makePagesWithTheseTagsPublic: publicTags.map(it => it.name),
makeBlocksWithTheseTagsPrivate: privateTags.map(it => it.name),
};
}
async function submit(e) {
e.preventDefault();
if (!isValid())
return;
setProcessingState("Initiating upload");
const roamData = await getDataToUpload();
setProcessingState("Uploading the export to Roam Garden");
const [url, cssUrl] = await Promise.all([storage_1.upload(roamData), storage_1.upload(cssCode)]);
const entryPage = entryPageName();
const payload = {
config: {
filter: constructFilter(),
siteTitle: title,
entryPage,
cssUrl,
},
dbUrl: url,
};
console.log("sending", payload);
// todo don't commit
const result = await aws_amplify_1.API.put(config_1.gardenApi, "/garden", { body: payload });
console.log(result);
await indicateSuccess();
setProcessingState("");
await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit());
}
function entryPageName() {
return entryPageTag[0].name;
}
};
exports.UploadForm = UploadForm;
//# sourceMappingURL=upload-form.js.map