diff --git a/packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css b/packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css index 2a8fdc30b..26cc3153a 100644 --- a/packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css +++ b/packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css @@ -13,3 +13,30 @@ flex-direction: row; gap: var(--gap--16); } + +.submit > :last-child { + flex-grow: 1; +} + +.teamContentWrapper { + display: flex; + flex-direction: column; + gap: var(--space--12); +} + +.createTeamModalLink { + color: #39e9aa; + font-weight: var(--font-weight-medium); + background: transparent; +} + +.createTeamSentence { + display: flex; + flex-direction: row; + gap: var(--space--8); + color: var(--text-tertiary, #9c9cc4); + font-weight: var(--font-weight-semibold); + + font-size: 0.875rem; + line-height: 1.7; +} diff --git a/packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx b/packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx index 6d9389c63..7432afa85 100644 --- a/packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx +++ b/packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx @@ -13,62 +13,51 @@ import { CreateTeamForm, FormSwitch, } from "@thunderstore/cyberstorm-forms"; -import { TextInput, Dialog, Button } from "@thunderstore/cyberstorm"; +import { Dialog, Button } from "@thunderstore/cyberstorm"; import { SettingItem } from "@thunderstore/cyberstorm/src/components/SettingItem/SettingItem"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { packageUpload } from "@thunderstore/thunderstore-api"; +import { usePromise } from "@thunderstore/use-promise"; +import { useDapper } from "@thunderstore/dapper"; const options = [ - { label: "Asd", value: "asd" }, - { label: "Asd2", value: "asd2" }, - { label: "Asd3", value: "asd3" }, - { label: "Asd4", value: "asd4" }, - { label: "Asd5", value: "asd5" }, - { label: "Asd6", value: "asd6" }, - { label: "Asd7", value: "asd7" }, - { label: "Asd8", value: "asd8" }, - { label: "Asd9", value: "asd9" }, - { label: "Asd10", value: "asd10" }, - { label: "Asd11", value: "asd11" }, - { label: "Asd12", value: "asd12" }, - { label: "Asd13", value: "asd13" }, - { label: "Asd14", value: "asd14" }, + { label: "Asd", value: "asd asd" }, + { label: "Asd2", value: "asd2 asd2" }, + { label: "Asd3", value: "asd3 asd3" }, + { label: "Asd4", value: "asd4 asd4" }, + { label: "Asd5", value: "asd5 asd5" }, + { label: "Asd6", value: "asd6 asd6" }, ]; -interface UploadPackageFormProps { - teams: { - name: string; - }[]; -} +export function UploadPackageForm() { + const dapper = useDapper(); + const user = usePromise(dapper.getCurrentUser, []); + const communities = usePromise(dapper.getCommunities, []); -export function UploadPackageForm(props: UploadPackageFormProps) { const toaster = useFormToaster({ successMessage: "Package submitted", }); - // Parse categories to the right format for form - function communityCategoriesParse( + function communitiesParse( selected: { label: string; value: string; - }[], - onChange: (selected: { [key: string]: string[] }) => void + }[] ) { - const communityCategories: { [key: string]: string[] } = {}; - selected.map((x) => (communityCategories[x.value] = [x.value])); - onChange(communityCategories); + return selected.map((x) => x.value); } - // Parse communities to the right format for form - function communitiesParse( + function communityCategoriesParse( selected: { label: string; value: string; - }[], - onChange: (selected: string[]) => void + }[] ) { - onChange(selected.map((x) => x.value)); + const communityCategories: { [key: string]: string[] } = {}; + // TODO: Instead of getting the value from splitting a string, have it be passed in an object + selected.map( + (x) => (communityCategories["community_identifier"] = [x.value]) + ); + return communityCategories; } return ( @@ -82,46 +71,48 @@ export function UploadPackageForm(props: UploadPackageFormProps) { } + content={<>upload block here} />
- Create team - - - - - } - > - - - } + description="Select the team you want your package to be associated with." content={ - t.name)} - placeholder="Choose a team..." - /> +
+ t.name)} + placeholder="Choose a team..." + /> +
+ No teams available? + + Create Team + + } + > + + +
+
} /> { + return { label: c.name, value: c.identifier }; + })} placeholder="Choose community..." - onChangeParse={communitiesParse} + fieldFormFormatParser={communitiesParse} /> } /> @@ -134,7 +125,7 @@ export function UploadPackageForm(props: UploadPackageFormProps) { schema={uploadPackageFormSchema} options={options} placeholder="Choose categories..." - onChangeParse={communityCategoriesParse} + fieldFormFormatParser={communityCategoriesParse} /> } /> diff --git a/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx b/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx index 5a58d53ea..4d2f5e14e 100644 --- a/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx +++ b/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx @@ -4,19 +4,12 @@ import { BreadCrumbs } from "../../../BreadCrumbs/BreadCrumbs"; import { PackageUploadLink } from "../../../Links/Links"; import { BaseLayout } from "../../BaseLayout/BaseLayout"; import { UploadPackageForm } from "@thunderstore/cyberstorm-forms"; -import { useDapper } from "@thunderstore/dapper"; -import { usePromise } from "@thunderstore/use-promise"; /** * Cyberstorm PackageUpload Layout */ export function PackageUploadLayout() { - const dapper = useDapper(); - const user = usePromise(dapper.getCurrentUser, []); - // TODO: Somehow grab categories from all the selected communities and pass them on - // const communities = usePromise(dapper.getCommunities, []); - // const filters = usePromise(dapper.getCommunityFilters, [communityId]) return ( } header={} - mainContent={<UploadPackageForm teams={user.teams} />} + mainContent={<UploadPackageForm />} /> ); } diff --git a/packages/thunderstore-api/src/fetch/packageUpload.ts b/packages/thunderstore-api/src/fetch/packageUpload.ts index 5dac66fa5..9a14332a0 100644 --- a/packages/thunderstore-api/src/fetch/packageUpload.ts +++ b/packages/thunderstore-api/src/fetch/packageUpload.ts @@ -7,7 +7,7 @@ export type PackageUploadApiArgs = { team: string; community_categories: { [key: string]: string[] }; communities: string[]; - has_nsfw_content: boolean; + has_nsfw_content?: boolean; }; export function packageUpload( @@ -17,12 +17,18 @@ export function packageUpload( const path = "api/experimental/submission/submit/"; // TODO: Add these datas in form - const todoData = { ...data, upload_uuid: "123", author_name: "root" }; + const todoData = { + ...data, + upload_uuid: "123", + author_name: "root", + }; return apiFetch2({ config, path, - method: "POST", - body: JSON.stringify(todoData), + request: { + method: "POST", + body: JSON.stringify(todoData), + }, }); } diff --git a/packages/ts-api-react-forms/src/schema.ts b/packages/ts-api-react-forms/src/schema.ts index 245dc12c4..8d7de9c2a 100644 --- a/packages/ts-api-react-forms/src/schema.ts +++ b/packages/ts-api-react-forms/src/schema.ts @@ -13,5 +13,5 @@ export const uploadPackageFormSchema = z.object({ team: z.string(), community_categories: z.record(z.array(z.string())), communities: z.array(z.string()).nonempty(), - has_nsfw_content: z.boolean(), + has_nsfw_content: z.boolean().default(false), });