From 531e70beda92f65c5e285ba4167badb67bc11cd5 Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <douglas.sebastian.mme@gmail.com>
Date: Tue, 14 Nov 2023 11:44:13 -0300
Subject: [PATCH 1/7] change: GroupContent tab subfolders

---
 .../{ => GroupContentMaterials}/GroupContentMaterials.less     | 0
 .../{ => GroupContentMaterials}/GroupContentMaterials.tsx      | 0
 .../GroupContents/{ => GroupContents}/GroupContents.less       | 0
 .../GroupContents/{ => GroupContents}/GroupContents.tsx        | 0
 src/pages/Group/GroupTabs/GroupContents/index.ts               | 2 ++
 src/pages/Group/GroupTabs/index.ts                             | 3 +--
 6 files changed, 3 insertions(+), 2 deletions(-)
 rename src/pages/Group/GroupTabs/GroupContents/{ => GroupContentMaterials}/GroupContentMaterials.less (100%)
 rename src/pages/Group/GroupTabs/GroupContents/{ => GroupContentMaterials}/GroupContentMaterials.tsx (100%)
 rename src/pages/Group/GroupTabs/GroupContents/{ => GroupContents}/GroupContents.less (100%)
 rename src/pages/Group/GroupTabs/GroupContents/{ => GroupContents}/GroupContents.tsx (100%)
 create mode 100644 src/pages/Group/GroupTabs/GroupContents/index.ts

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.less b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.less
similarity index 100%
rename from src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.less
rename to src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.less
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
similarity index 100%
rename from src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx
rename to src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.less b/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.less
similarity index 100%
rename from src/pages/Group/GroupTabs/GroupContents/GroupContents.less
rename to src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.less
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx
similarity index 100%
rename from src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx
rename to src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx
diff --git a/src/pages/Group/GroupTabs/GroupContents/index.ts b/src/pages/Group/GroupTabs/GroupContents/index.ts
new file mode 100644
index 00000000..1aba1118
--- /dev/null
+++ b/src/pages/Group/GroupTabs/GroupContents/index.ts
@@ -0,0 +1,2 @@
+export * from "./GroupContents/GroupContents"
+export * from "./GroupContentMaterials/GroupContentMaterials"
diff --git a/src/pages/Group/GroupTabs/index.ts b/src/pages/Group/GroupTabs/index.ts
index 6b359d3c..f5133b2b 100644
--- a/src/pages/Group/GroupTabs/index.ts
+++ b/src/pages/Group/GroupTabs/index.ts
@@ -1,6 +1,5 @@
 export * from "./GroupTabs";
 
-export * from "./GroupContents/GroupContents";
-export * from "./GroupContents/GroupContentMaterials";
+export * from "./GroupContents";
 export * from "./GroupPeople/GroupPeople";
 export * from "./GroupGroups/GroupGroups";

From 6ab809996fbc1ef4e35a155b25beaa505f54e6e1 Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <douglas.sebastian.mme@gmail.com>
Date: Tue, 14 Nov 2023 13:30:50 -0300
Subject: [PATCH 2/7] change: refresh data can accept content id to set

---
 .../ProfileInfo/ProfileBio/ProfileBio.tsx         |  2 --
 src/pages/Group/Group.tsx                         | 14 ++++++++++++--
 src/pages/Group/GroupContext.tsx                  | 15 ++++++++++++++-
 .../GroupContentMaterials.tsx                     | 12 ++++--------
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
index 37658d75..7607ea51 100644
--- a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
+++ b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
@@ -26,8 +26,6 @@ export function ProfileBio(props: ProfileBioProps) {
         ? { backgroundImage: `url(${groupBannerUrl(props.organization)})` }
         : { backgroundColor: "var(--primary-color)" }
 
-    console.dir({headerBackground});
-
     return (
         <div className="profile-bio-component card">
 
diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx
index 4aa9ae25..ac8ab04e 100644
--- a/src/pages/Group/Group.tsx
+++ b/src/pages/Group/Group.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { Navigate, useLoaderData } from "react-router-dom";
 
-import { GroupContext, GroupIntro, GroupTabRenderer, GroupTabs, fetchGroupPageData, type AvailableTabs, type GroupContextType, type GroupPageLoaderResponse } from "@/pages/Group";
+import { GroupContext, GroupIntro, GroupTabRenderer, GroupTabs, fetchGroupPageData, type AvailableTabs, type GroupContextType, type GroupPageLoaderResponse, RefreshGroupOptions } from "@/pages/Group";
 import { ProfileBio, ProfileGroups } from "@/components/ProfileInfo";
 import { AuthContext } from "@/contexts/Auth";
 import "./Group.less";
@@ -50,9 +50,14 @@ export function GroupPage() {
         setCurrentTab(tab);
     }
 
-    async function refreshGroupData() {
+    async function refreshGroupData(options?: RefreshGroupOptions) {
         const data = await fetchGroupPageData({ groupPath: page.group?.path });
         const newContext = makeContext(data);
+
+        if (options?.currentContentId) {
+            newContext.currentContent = newContext.folders.find(c => c.id === options.currentContentId);
+        }
+
         setContext(newContext);
         return newContext;
     }
@@ -77,6 +82,11 @@ export function GroupPage() {
                 setContext({...this, currentContent: c});
             },
 
+            editContent: undefined,
+            setEditContent(c) {
+                setContext({...this, editContent: c});
+            },
+
             refreshData: refreshGroupData,
         };
     }
diff --git a/src/pages/Group/GroupContext.tsx b/src/pages/Group/GroupContext.tsx
index f0928ff5..d9b097ad 100644
--- a/src/pages/Group/GroupContext.tsx
+++ b/src/pages/Group/GroupContext.tsx
@@ -13,6 +13,15 @@ export type GroupContextType = null | {
     currentContent: Folder | undefined;
     setCurrentContent(content: Folder | undefined): any;
 
+    /**
+     * The content being edited/created.
+     *
+     * If `null`, should handle creation of a content. If has a value, should handle
+     * content edit. If `undefined`, no content is being edited nor created.
+     */
+    editContent: Folder | null | undefined;
+    setEditContent(content: Folder | null | undefined): any;
+
     loggedData: {
         isParticipant: boolean;
         profile:       Profile;
@@ -20,7 +29,11 @@ export type GroupContextType = null | {
         groups:        Group[];
     };
 
-    refreshData: () => Promise<NonNullable<GroupContextType>>;
+    refreshData: (options?: RefreshGroupOptions) => Promise<NonNullable<GroupContextType>>;
 };
 
+export type RefreshGroupOptions = {
+    currentContentId?: string;
+}
+
 export const GroupContext = createContext<GroupContextType>(null);
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
index bf42349b..daf7f294 100644
--- a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
@@ -296,19 +296,15 @@ export function GroupContentMaterials() {
             icon: "warning",
         }).then(res => {
             if (res.isConfirmed) {
-                const folderId = groupContext?.currentContent?.id!;
+                const currentContentId = groupContext?.currentContent?.id!;
 
-                UniversimeApi.Capacity.removeContentFromFolder({ folderId, contentIds: material.id })
+                UniversimeApi.Capacity.removeContentFromFolder({ folderId: currentContentId, contentIds: material.id })
                     .then(res => {
                         if (!res.success)
                             return;
 
-                        groupContext?.refreshData()
-                            .then(data => {
-                                setTimeout(() => {
-                                    data.setCurrentContent(data.folders.find(c => c.id === folderId));
-                                }, 0);
-                            });
+                        groupContext?.refreshData({currentContentId})
+                            .then(refreshMaterials);
                     });
             }
         });

From 02e9201db4ccb88965375646d61ddd0e0edf095e Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <douglas.sebastian.mme@gmail.com>
Date: Tue, 14 Nov 2023 13:36:23 -0300
Subject: [PATCH 3/7] fix: fetch whole page data on remove material from folder

---
 .../GroupContentMaterials/GroupContentMaterials.tsx            | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
index daf7f294..31734c0a 100644
--- a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
@@ -303,8 +303,7 @@ export function GroupContentMaterials() {
                         if (!res.success)
                             return;
 
-                        groupContext?.refreshData({currentContentId})
-                            .then(refreshMaterials);
+                        refreshMaterials();
                     });
             }
         });

From 17d38da245bf73b75d64efca027cd637646f3f8e Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <douglas.sebastian.mme@gmail.com>
Date: Tue, 14 Nov 2023 14:27:35 -0300
Subject: [PATCH 4/7] change: add div props to ActionButton

---
 src/components/ActionButton/ActionButton.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx
index 001e35cc..968d54bf 100644
--- a/src/components/ActionButton/ActionButton.tsx
+++ b/src/components/ActionButton/ActionButton.tsx
@@ -1,14 +1,19 @@
+import { HTMLAttributes } from "react"
 import "./ActionButton.less"
 
 export interface ActionButtonProps{
     name : string
+    buttonProps?: HTMLAttributes<HTMLDivElement>;
 }
 
 export function ActionButton(props : ActionButtonProps){
+    const className = ["action-button-container", props.buttonProps?.className]
+        .filter(c => !!c && c.length > 0)
+        .join(" ");
 
 
     return(
-        <div className="action-button-container">
+        <div {...props.buttonProps} className={className}>
             <i className="bi bi-plus"></i>
             <div className="action-button-name">
                 {props.name}

From 1d83be9d9f94f4b0861a18f499b119fb0420ceef Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <douglas.sebastian.mme@gmail.com>
Date: Tue, 14 Nov 2023 16:19:41 -0300
Subject: [PATCH 5/7] feat: create and edit content

---
 .../GroupContents/GroupContents.tsx           |  12 +-
 .../ManageContent/ManageContent.less          | 106 +++++++++++
 .../ManageContent/ManageContent.tsx           | 166 ++++++++++++++++++
 .../Group/GroupTabs/GroupContents/index.ts    |   1 +
 src/services/UniversimeApi/Capacity/Folder.ts |   4 +
 5 files changed, 286 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less
 create mode 100644 src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx
index 290f3a5c..d51a9aa8 100644
--- a/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents/GroupContents.tsx
@@ -3,7 +3,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 
 import UniversimeApi from "@/services/UniversimeApi";
 import * as SwalUtils from "@/utils/sweetalertUtils";
-import { EMPTY_LIST_CLASS, GroupContentMaterials, GroupContext } from "@/pages/Group";
+import { EMPTY_LIST_CLASS, GroupContentMaterials, GroupContext, ManageContent } from "@/pages/Group";
 import { setStateAsValue } from "@/utils/tsxUtils";
 import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
 import { type OptionInMenu, renderOption, hasAvailableOption } from "@/utils/dropdownMenuUtils"
@@ -28,7 +28,9 @@ export function GroupContents() {
         {
             text: "Editar",
             biIcon: "pencil-fill",
-            disabled() { return true; },
+            onSelect(data) {
+                groupContext.setEditContent(data);
+            },
             hidden() {
                 return groupContext?.group.admin.id !== groupContext?.loggedData.profile.id;
             },
@@ -49,11 +51,15 @@ export function GroupContents() {
             <div className="heading top-container">
                 <div className="go-right">
                     <Filter setter={setFilterContents} placeholderMessage={`Buscar em Conteúdos ${groupContext.group.name}`}/>
-                    <ActionButton name="Criar conteúdo"/>
+                    <ActionButton name="Criar conteúdo" buttonProps={{
+                        onClick(){ groupContext.setEditContent(null); }
+                    }} />
                 </div>
             </div>
 
             <div className="content-list tab-list"> { makeContentList(groupContext.folders, filterContents) } </div>
+
+            <ManageContent />
         </section>
     );
 
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less
new file mode 100644
index 00000000..2cfb54c3
--- /dev/null
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less
@@ -0,0 +1,106 @@
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/fonts.less);
+
+#manage-content {
+    display: flex;
+    flex-direction: column;
+
+    background-color: @card-background-color;
+    border-radius: .625rem;
+
+    padding: 1.5rem;
+    width: 25vw;
+
+    fieldset {
+        border: none;
+
+        &:not(:last-child) {
+            margin-bottom: 1rem;
+        }
+
+        .field-input {
+            width: 100%;
+            margin-top: 5px;
+        }
+
+        input, textarea {
+            border: none;
+            border-radius: .625rem;
+
+            padding: .5em;
+
+            resize: vertical;
+
+            &:focus {
+                outline: solid 2px @primary-color;
+            }
+        }
+
+        .category-select {
+            border-radius: .625rem;
+        }
+
+        > legend {
+            display: flex;
+            flex-direction: row;
+            align-items: end;
+            justify-content: space-between;
+
+            width: 100%;
+
+            font-size: 1.25rem;
+            font-variant: small-caps;
+
+            .char-counter {
+                display: inline;
+                margin-right: .25em;
+
+                font-size: .75em;
+            }
+        }
+    }
+
+    .operation-buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        > button {
+            border: none;
+
+            width: 7em;
+            padding: .75em 0;
+            border-radius: .625rem;
+
+            color: @font-color-v1;
+            font-size: .9rem;
+            text-transform: uppercase;
+            font-weight: @font-weight-bold;
+
+            cursor: pointer;
+
+            will-change: background-color;
+
+            &.cancel-button {
+                background-color: @font-color-v6;
+                &:hover {
+                    background-color: @font-color-v3;
+                }
+            }
+
+            &.submit-button {
+                &:not(:disabled) {
+                    background-color: @primary-color;
+                    &:hover {
+                        background-color: @secondary-color;
+                    }
+                }
+
+                &:disabled {
+                    background-color: @font-color-v3;
+                }
+            }
+        }
+    }
+}
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
new file mode 100644
index 00000000..fdd9ab02
--- /dev/null
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -0,0 +1,166 @@
+import { useContext, useEffect, useState } from "react";
+import Select, { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select';
+
+import UniversimeApi from "@/services/UniversimeApi";
+import { UniversiModal } from "@/components/UniversiModal";
+import { GroupContext } from "@/pages/Group/GroupContext";
+import { setStateAsValue } from "@/utils/tsxUtils";
+
+import type { FolderCreate_ResponseDTO, FolderEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
+import type { Category } from "@/types/Capacity";
+import "./ManageContent.less";
+
+const MAX_NAME_LENGTH = 50;
+const MAX_DESC_LENGTH = 150;
+
+export function ManageContent() {
+    const context = useContext(GroupContext);
+
+    const [name, setName] = useState<string>(context?.editContent?.name ?? "");
+    const [categoriesIds, setCategoriesIds] = useState<string[]>((context?.editContent?.categories ?? []).map(c => c.id));
+    const [description, setDescription] = useState<string>(context?.editContent?.description ?? "");
+
+    const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
+    useEffect(()=>{
+        UniversimeApi.Capacity.categoryList()
+            .then(response => {
+                if (response.success && response.body) {
+                    setAvailableCategories(response.body.categories);
+                }
+            })
+    }, []);
+
+    useEffect(() => {
+        if (context?.editContent === undefined)
+            return;
+
+        setName(context.editContent?.name ?? "");
+        setDescription(context.editContent?.description ?? "");
+        setCategoriesIds((context.editContent?.categories ?? []).map(c => c.id));
+    }, [context?.editContent])
+
+    // prevent later checks
+    if (!context)
+        return null;
+
+    if (context.editContent === undefined)
+        return null;
+
+    const canSave = (name.length > 0) && (description.length > 0);
+
+    return <UniversiModal>
+        <div id="manage-content">
+            <fieldset>
+                <legend>
+                    Nome do Conteúdo
+                    <div className="char-counter">
+                        {name.length} / {MAX_NAME_LENGTH}
+                    </div>
+                </legend>
+                <input className="field-input" type="text" defaultValue={context.editContent?.name} onChange={setStateAsValue(setName)} maxLength={MAX_NAME_LENGTH}/>
+            </fieldset>
+
+            <fieldset>
+                <legend>
+                    Descrição conteúdo
+                    <div className="char-counter">
+                        {description.length} / {MAX_DESC_LENGTH}
+                    </div>
+                </legend>
+                <textarea className="field-input" defaultValue={context.editContent?.description ?? undefined} onChange={setStateAsValue(setDescription)} maxLength={MAX_DESC_LENGTH} />
+            </fieldset>
+
+            <fieldset>
+                <legend>Categorias</legend>
+                <Select placeholder="Selecionar categorias..." className="field-input category-select" isMulti options={availableCategories}
+                    onChange={(value) => {setCategoriesIds(value.map(v => v.id))}}
+                    defaultValue={ availableCategories.filter(c => context.editContent?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
+                    getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
+                />
+            </fieldset>
+
+
+            <section className="operation-buttons">
+                <button type="button" className="cancel-button" onClick={() => {context.setEditContent(undefined)}}>Cancelar</button>
+                <button type="button" className="submit-button" onClick={handleSaveContent} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
+                    { context.editContent === null ? "Criar" : "Salvar" }
+                </button>
+            </section>
+        </div>
+    </UniversiModal>
+
+    function handleSaveContent() {
+        if (!context || context.editContent === undefined)
+            return;
+
+        let request: Promise<FolderCreate_ResponseDTO | FolderEdit_ResponseDTO> = undefined!;
+        if (context.editContent === null) {
+            request = UniversimeApi.Capacity.createFolder({
+                name,
+                addCategoriesByIds: categoriesIds,
+                description,
+                rating: 5,
+                groupId: context.group.id,
+                // todo: image upload
+            });
+        }
+
+        else {
+            const addCategories = categoriesIds
+                .filter(c => undefined === context.editContent!.categories.find(check => c === check.id));
+            const removeCategories = context.editContent.categories
+                .filter(c => undefined === categoriesIds.find(check => c.id === check))
+                .map(c => c.id);
+
+            request = UniversimeApi.Capacity.editFolder({
+                id: context.editContent.id,
+                name,
+                description,
+                addCategoriesByIds: addCategories,
+                removeCategoriesByIds: removeCategories,
+                rating: 5,
+                // todo: image upload
+            });
+        }
+
+        request.then(res => {
+            if (res.success) {
+                context.refreshData();
+            }
+        })
+    }
+}
+
+const CATEGORY_SELECT_STYLES: StylesConfig<Category, true, GroupBase<Category>> = {
+    control: (styles, { isFocused }) => ({
+        ...styles,
+        borderRadius: ".625rem",
+        outline: isFocused ? "solid 2px var(--primary-color)" : "none",
+    }),
+
+    option: (styles, { isFocused }) => {
+        const styling: CSSObjectWithLabel = {
+            ...styles,
+        };
+
+        if (isFocused) {
+            styling.backgroundColor = "var(--primary-color)";
+            styling.fontWeight = "var(--font-weight-bold)";
+            styling.color = "var(--font-color-v1)";
+        }
+
+        return styling;
+    },
+
+    multiValue: (styles) => ({
+        ...styles,
+        padding: ".25em",
+        backgroundColor: "var(--primary-color)",
+        color: "var(--font-color-v1)",
+    }),
+
+    multiValueLabel: (styles) => ({
+        ...styles,
+        color: "var(--font-color-v1)",
+    })
+};
diff --git a/src/pages/Group/GroupTabs/GroupContents/index.ts b/src/pages/Group/GroupTabs/GroupContents/index.ts
index 1aba1118..3c4bcb77 100644
--- a/src/pages/Group/GroupTabs/GroupContents/index.ts
+++ b/src/pages/Group/GroupTabs/GroupContents/index.ts
@@ -1,2 +1,3 @@
 export * from "./GroupContents/GroupContents"
 export * from "./GroupContentMaterials/GroupContentMaterials"
+export * from "./ManageContent/ManageContent";
diff --git a/src/services/UniversimeApi/Capacity/Folder.ts b/src/services/UniversimeApi/Capacity/Folder.ts
index 9bbe7a2f..7c91fcb5 100644
--- a/src/services/UniversimeApi/Capacity/Folder.ts
+++ b/src/services/UniversimeApi/Capacity/Folder.ts
@@ -12,6 +12,8 @@ export type FolderCreate_RequestDTO = {
     description?:        string;
     rating?:             number;
     addCategoriesByIds?: string | string[];
+    groupId?:            string;
+    groupPath?:          string;
 };
 
 export type FolderEdit_RequestDTO = {
@@ -50,6 +52,8 @@ export async function createFolder(body: FolderCreate_RequestDTO) {
         description:        body.description,
         rating:             body.rating,
         addCategoriesByIds: body.addCategoriesByIds,
+        groupId:            body.groupId,
+        groupPath:          body.groupPath,
     })).data;
 }
 

From 9de4cef7871e6b094245f99d05a17a65a39ddb42 Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <douglas.sebastian.mme@gmail.com>
Date: Tue, 14 Nov 2023 17:57:34 -0300
Subject: [PATCH 6/7] feat: edit material

---
 src/pages/Group/Group.tsx                     |   5 +
 src/pages/Group/GroupContext.tsx              |  11 +-
 .../GroupContentMaterials.tsx                 |   8 +-
 .../ManageContent/ManageContent.tsx           |   4 +-
 .../ManageMaterial/ManageMaterial.tsx         | 131 ++++++++++++++++++
 .../Group/GroupTabs/GroupContents/index.ts    |   1 +
 6 files changed, 155 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx

diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx
index ac8ab04e..b5d26995 100644
--- a/src/pages/Group/Group.tsx
+++ b/src/pages/Group/Group.tsx
@@ -87,6 +87,11 @@ export function GroupPage() {
                 setContext({...this, editContent: c});
             },
 
+            editMaterial: undefined,
+            setEditMaterial(c) {
+                setContext({...this, editMaterial: c});
+            },
+
             refreshData: refreshGroupData,
         };
     }
diff --git a/src/pages/Group/GroupContext.tsx b/src/pages/Group/GroupContext.tsx
index d9b097ad..61fbe989 100644
--- a/src/pages/Group/GroupContext.tsx
+++ b/src/pages/Group/GroupContext.tsx
@@ -1,7 +1,7 @@
 import { createContext } from "react";
 import { Group } from "@/types/Group";
 import { Profile } from "@/types/Profile";
-import { Folder } from "@/types/Capacity";
+import type { Content, Folder } from "@/types/Capacity";
 import { Link } from "@/types/Link";
 
 export type GroupContextType = null | {
@@ -22,6 +22,15 @@ export type GroupContextType = null | {
     editContent: Folder | null | undefined;
     setEditContent(content: Folder | null | undefined): any;
 
+    /**
+     * The material being edited/created.
+     *
+     * If `null`, should handle creation of a material. If has a value, should handle
+     * material edit. If `undefined`, no material is being edited nor created.
+     */
+    editMaterial: Content | null | undefined;
+    setEditMaterial(material: Content | null | undefined): any;
+
     loggedData: {
         isParticipant: boolean;
         profile:       Profile;
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
index 31734c0a..903a1a42 100644
--- a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import UniversimeApi from "@/services/UniversimeApi";
 import * as SwalUtils from "@/utils/sweetalertUtils";
-import { EMPTY_LIST_CLASS, GroupContext } from "@/pages/Group";
+import { EMPTY_LIST_CLASS, GroupContext, ManageMaterial } from "@/pages/Group";
 import { setStateAsValue } from "@/utils/tsxUtils";
 import { ContentStatusEnum, type Content } from "@/types/Capacity";
 
@@ -38,7 +38,9 @@ export function GroupContentMaterials() {
         {
             text: "Editar",
             biIcon: "pencil-fill",
-            disabled() { return true; },
+            onSelect(data) {
+                groupContext.setEditMaterial(data);
+            },
             hidden() {
                 return groupContext?.group.admin.id !== groupContext?.loggedData.profile.id;
             },
@@ -72,6 +74,8 @@ export function GroupContentMaterials() {
             </div>
 
             <div className="material-list"> { makeMaterialsList(materials, filterMaterials) } </div>
+
+            <ManageMaterial refreshMaterials={refreshMaterials} />
         </section>
     );
 
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index fdd9ab02..abc7a652 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -62,7 +62,7 @@ export function ManageContent() {
 
             <fieldset>
                 <legend>
-                    Descrição conteúdo
+                    Descrição
                     <div className="char-counter">
                         {description.length} / {MAX_DESC_LENGTH}
                     </div>
@@ -131,7 +131,7 @@ export function ManageContent() {
     }
 }
 
-const CATEGORY_SELECT_STYLES: StylesConfig<Category, true, GroupBase<Category>> = {
+export const CATEGORY_SELECT_STYLES: StylesConfig<Category, true, GroupBase<Category>> = {
     control: (styles, { isFocused }) => ({
         ...styles,
         borderRadius: ".625rem",
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
new file mode 100644
index 00000000..84c36544
--- /dev/null
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -0,0 +1,131 @@
+import { useContext, useEffect, useState } from "react";
+import Select from 'react-select';
+
+import { CATEGORY_SELECT_STYLES, GroupContext } from "@/pages/Group";
+import UniversimeApi from "@/services/UniversimeApi";
+import { UniversiModal } from "@/components/UniversiModal";
+import { setStateAsValue } from "@/utils/tsxUtils";
+
+import type { ContentCreate_ResponseDTO, ContentEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
+import type { Category, ContentType } from "@/types/Capacity";
+
+export type ManageMaterialProps = {
+    refreshMaterials: () => any;
+}
+
+const MAX_TITLE_LENGTH = 50;
+const MAX_DESC_LENGTH = 150;
+
+export function ManageMaterial(props: ManageMaterialProps) {
+    const context = useContext(GroupContext);
+
+    const [title, setTitle] = useState<string>(context?.editMaterial?.title ?? "");
+    const [description, setDescription] = useState<string>(context?.editMaterial?.description ?? "");
+    const [url, setUrl] = useState<string>(context?.editMaterial?.url ?? "");
+    const [type, setType] = useState<ContentType>(context?.editMaterial?.type ?? "LINK");
+    // const [contentsIds, setContentsIds] = useState<string[]>((context?.editMaterial?.folders ?? []).map(c => c.id));
+    const [categoriesIds, setCategories] = useState<string[]>((context?.editMaterial?.categories ?? []).map(c => c.id));
+
+    const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
+    useEffect(()=>{
+        UniversimeApi.Capacity.categoryList()
+            .then(response => {
+                if (response.success && response.body) {
+                    setAvailableCategories(response.body.categories);
+                }
+            })
+    }, []);
+
+    useEffect(() => {
+        if (context?.editMaterial === undefined)
+            return;
+
+        setTitle(context?.editMaterial?.title ?? "");
+        setDescription(context?.editMaterial?.description ?? "");
+        setUrl(context?.editMaterial?.url ?? "");
+        setType(context?.editMaterial?.type ?? "LINK");
+        // setContentsIds((context?.editMaterial?.folders ?? []).map(c => c.id));
+        setCategories((context?.editMaterial?.categories ?? []).map(c => c.id));
+    }, [context?.editMaterial]);
+
+    // prevent later checks
+    if (!context)
+        return null;
+
+    if (context.editMaterial === undefined)
+        return null;
+
+    const canSave = (title.length > 0) && (description.length > 0) && (url.length > 0);
+
+    return <UniversiModal>
+        <div id="manage-material">
+            <fieldset>
+                <legend>
+                    Título do Material
+                    <div className="char-counter">
+                        {title.length} / {MAX_TITLE_LENGTH}
+                    </div>
+                </legend>
+                <input className="field-input" type="text" defaultValue={context.editMaterial?.title} onChange={setStateAsValue(setTitle)} maxLength={MAX_TITLE_LENGTH}/>
+            </fieldset>
+
+            <fieldset>
+                <legend>
+                    Descrição
+                    <div className="char-counter">
+                        {description.length} / {MAX_DESC_LENGTH}
+                    </div>
+                </legend>
+                <textarea className="field-input" defaultValue={context.editMaterial?.description ?? undefined} onChange={setStateAsValue(setDescription)} maxLength={MAX_DESC_LENGTH} />
+            </fieldset>
+
+            <fieldset>
+                <legend>Categorias</legend>
+                <Select placeholder="Selecionar categorias..." className="field-input category-select" isMulti options={availableCategories}
+                    onChange={(value) => {setCategories(value.map(v => v.id))}}
+                    defaultValue={ availableCategories.filter(c => context.editMaterial?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
+                    getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
+                />
+            </fieldset>
+
+
+            <section className="operation-buttons">
+                <button type="button" className="cancel-button" onClick={() => {context.setEditMaterial(undefined)}}>Cancelar</button>
+                <button type="button" className="submit-button" onClick={handleSaveMaterial} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
+                    { context.editMaterial === null ? "Criar" : "Salvar" }
+                </button>
+            </section>
+        </div>
+    </UniversiModal>
+
+    function handleSaveMaterial() {
+        if (!context || context.editMaterial === undefined)
+            return;
+
+        if (context.editMaterial === null) {
+            UniversimeApi.Capacity.createContent({
+                title, description, url, type, addCategoriesByIds: categoriesIds, addFoldersByIds: context.currentContent?.id, rating: 5,
+                // todo: image upload
+            }).then(afterSave);
+        }
+
+        else {
+            const addCategoriesByIds = categoriesIds
+                .filter(c => undefined === context.editMaterial!.categories.find(check => c === check.id));
+            const removeCategoriesByIds = context.editMaterial.categories
+                .filter(c => undefined === categoriesIds.find(check => c.id === check))
+                .map(c => c.id);
+
+            UniversimeApi.Capacity.editContent({
+                id: context.editMaterial.id, title, description, url, type, addCategoriesByIds, removeCategoriesByIds
+                // todo: image upload
+                // todo: verify if editing contents will be a thing
+            }).then(afterSave);
+        }
+
+        function afterSave(response: ContentCreate_ResponseDTO | ContentEdit_ResponseDTO) {
+            context!.setEditMaterial(undefined);
+            props.refreshMaterials();
+        }
+    }
+}
diff --git a/src/pages/Group/GroupTabs/GroupContents/index.ts b/src/pages/Group/GroupTabs/GroupContents/index.ts
index 3c4bcb77..a85c7a73 100644
--- a/src/pages/Group/GroupTabs/GroupContents/index.ts
+++ b/src/pages/Group/GroupTabs/GroupContents/index.ts
@@ -1,3 +1,4 @@
 export * from "./GroupContents/GroupContents"
 export * from "./GroupContentMaterials/GroupContentMaterials"
 export * from "./ManageContent/ManageContent";
+export * from "./ManageMaterial/ManageMaterial";

From 03dfbf0b66322804ae02c0bdaeff26bbf393444e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Wed, 15 Nov 2023 18:07:09 -0300
Subject: [PATCH 7/7] finalizando design

---
 public/assets/imgs/create-content-icon.svg    | 182 ++++++++++++++++++
 public/assets/imgs/create-content.png         | Bin 0 -> 10844 bytes
 .../ManageContent/ManageContent.less          | 103 ++++++++--
 .../ManageContent/ManageContent.tsx           |  65 +++++--
 4 files changed, 317 insertions(+), 33 deletions(-)
 create mode 100644 public/assets/imgs/create-content-icon.svg
 create mode 100644 public/assets/imgs/create-content.png

diff --git a/public/assets/imgs/create-content-icon.svg b/public/assets/imgs/create-content-icon.svg
new file mode 100644
index 00000000..a0fbff07
--- /dev/null
+++ b/public/assets/imgs/create-content-icon.svg
@@ -0,0 +1,182 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;" xml:space="preserve">
+<image style="overflow:visible;" width="512" height="462" xlink:href="data:image/png;base64,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
++WYnYpUQAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 165 66.2756)">
+</image>
+</svg>
diff --git a/public/assets/imgs/create-content.png b/public/assets/imgs/create-content.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0f729703f5b8a77de051d49bb5ca4ef3f2eddff
GIT binary patch
literal 10844
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
E0^7$=Bme*a

literal 0
HcmV?d00001

diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less
index 2cfb54c3..83c3a079 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.less
@@ -2,17 +2,82 @@
 @import url(/src/layouts/fonts.less);
 
 #manage-content {
+    @left-padding: 2.1rem;
+
     display: flex;
     flex-direction: column;
 
-    background-color: @card-background-color;
+    background-color: white;
     border-radius: .625rem;
 
-    padding: 1.5rem;
-    width: 25vw;
+    width: 45rem;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
+    img{
+        max-width: 3rem;
+        max-height: 3rem;
+    }
+
+    .header{
+        display: flex;
+        flex-direction: row;
+        background-color: var(--primary-color);
+        border-bottom: 5px solid var(--secondary-color);
+        color: white;
+        padding: 1rem @left-padding;
+        gap: 1rem;
+        align-items: center;
+    }
+
+    .finish-button{
+        display: flex; 
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        i{
+            width: 1rem !important;
+            font-size: 1.2rem;
+            margin:0px ;
+        }
+    }
+
+    .title{
+        color: white;
+    }
+
+    .multiple-buttons{
+        display: flex; 
+        padding: 0px 2.1rem;
+        justify-content: space-between;
+
+        .label-button{
+            display: flex; 
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .image-button{
+            background-color: var(--primary-color);
+            color: white;
+            text-align: center;
+            padding: 0.5rem 0.5rem ;
+            border-radius: 0.675rem;
+            cursor: pointer;
+        }
+
+        .category-select {
+            align-self: center;
+            border-radius: .625rem;
+        }
+    }
 
     fieldset {
         border: none;
+        padding: 0rem @left-padding;
+        margin-top: 1rem;
+
 
         &:not(:last-child) {
             margin-bottom: 1rem;
@@ -20,15 +85,23 @@
 
         .field-input {
             width: 100%;
-            margin-top: 5px;
+            background-color: @card-background-color;
+        }
+
+        input{
+            padding: 1rem 0.5rem;
+            font-size: 1rem;
+        }
+
+        textarea{
+            height: 8rem;
+            padding: 0.5rem 0.5rem;
         }
 
         input, textarea {
             border: none;
             border-radius: .625rem;
 
-            padding: .5em;
-
             resize: vertical;
 
             &:focus {
@@ -36,9 +109,6 @@
             }
         }
 
-        .category-select {
-            border-radius: .625rem;
-        }
 
         > legend {
             display: flex;
@@ -49,7 +119,7 @@
             width: 100%;
 
             font-size: 1.25rem;
-            font-variant: small-caps;
+            padding-bottom: 0.75rem;
 
             .char-counter {
                 display: inline;
@@ -64,18 +134,20 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        justify-content: space-between;
+        justify-content: flex-end;
+        margin: 2.1rem;
+        gap: 1rem;
 
         > button {
             border: none;
 
-            width: 7em;
+            width: 7.5rem;
+            max-height: 2rem;
             padding: .75em 0;
             border-radius: .625rem;
 
             color: @font-color-v1;
             font-size: .9rem;
-            text-transform: uppercase;
             font-weight: @font-weight-bold;
 
             cursor: pointer;
@@ -83,10 +155,7 @@
             will-change: background-color;
 
             &.cancel-button {
-                background-color: @font-color-v6;
-                &:hover {
-                    background-color: @font-color-v3;
-                }
+                background-color: var(--secondary-color);
             }
 
             &.submit-button {
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index abc7a652..fd264e5e 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { ChangeEvent, useContext, useEffect, useState } from "react";
 import Select, { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select';
 
 import UniversimeApi from "@/services/UniversimeApi";
@@ -9,9 +9,10 @@ import { setStateAsValue } from "@/utils/tsxUtils";
 import type { FolderCreate_ResponseDTO, FolderEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
 import type { Category } from "@/types/Capacity";
 import "./ManageContent.less";
+import { api } from "@/services/UniversimeApi/api";
 
 const MAX_NAME_LENGTH = 50;
-const MAX_DESC_LENGTH = 150;
+const MAX_DESC_LENGTH = 200;
 
 export function ManageContent() {
     const context = useContext(GroupContext);
@@ -19,6 +20,7 @@ export function ManageContent() {
     const [name, setName] = useState<string>(context?.editContent?.name ?? "");
     const [categoriesIds, setCategoriesIds] = useState<string[]>((context?.editContent?.categories ?? []).map(c => c.id));
     const [description, setDescription] = useState<string>(context?.editContent?.description ?? "");
+    const [imagem, setImagem] = useState<string | undefined>("");
 
     const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
     useEffect(()=>{
@@ -46,14 +48,20 @@ export function ManageContent() {
     if (context.editContent === undefined)
         return null;
 
-    const canSave = (name.length > 0) && (description.length > 0);
+    const canSave = (name.length > 0) && (description.length > 0) && (imagem != "");
 
     return <UniversiModal>
         <div id="manage-content">
+
+            <div className="header">
+                <img src="/assets/imgs/create-content.png"/>
+                <h1 className="title">Criar conteúdo</h1>
+            </div>
+
             <fieldset>
                 <legend>
-                    Nome do Conteúdo
-                    <div className="char-counter">
+                    Título do Conteúdo
+                    <div className="char-counter" style={name.length >= MAX_NAME_LENGTH-5 ? {color: "red"} : {}}>
                         {name.length} / {MAX_NAME_LENGTH}
                     </div>
                 </legend>
@@ -63,32 +71,56 @@ export function ManageContent() {
             <fieldset>
                 <legend>
                     Descrição
-                    <div className="char-counter">
+                    <div className="char-counter" style={description.length >= MAX_DESC_LENGTH-5 ? {color: "red"} : {}}>
                         {description.length} / {MAX_DESC_LENGTH}
                     </div>
                 </legend>
                 <textarea className="field-input" defaultValue={context.editContent?.description ?? undefined} onChange={setStateAsValue(setDescription)} maxLength={MAX_DESC_LENGTH} />
             </fieldset>
 
-            <fieldset>
-                <legend>Categorias</legend>
-                <Select placeholder="Selecionar categorias..." className="field-input category-select" isMulti options={availableCategories}
-                    onChange={(value) => {setCategoriesIds(value.map(v => v.id))}}
-                    defaultValue={ availableCategories.filter(c => context.editContent?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
-                    getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
-                />
-            </fieldset>
+            <div className="multiple-buttons">
+                <div className="label-button">
+                    <legend>Categorias</legend>
+                    <Select placeholder="Selecionar categorias..." className="field-input category-select" isMulti options={availableCategories}
+                        onChange={(value) => {setCategoriesIds(value.map(v => v.id))}}
+                        defaultValue={ availableCategories.filter(c => context.editContent?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
+                        getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
+                    />
+                </div>
+                <div className="label-button">
+                    <legend>Imagem de conteúdo</legend>
+                    <input type="file" style={{display: "none"}} id="file-input" accept="image/*" onChange={createImage}/>
+                    <div onClick={()=>{document.getElementById("file-input")?.click()}} className="image-button">
+                        Selecionar arquivo
+                    </div>
+                </div>
+            </div>
 
 
             <section className="operation-buttons">
-                <button type="button" className="cancel-button" onClick={() => {context.setEditContent(undefined)}}>Cancelar</button>
-                <button type="button" className="submit-button" onClick={handleSaveContent} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
+                <button type="button" className="finish-button cancel-button" onClick={() => {context.setEditContent(undefined)}}><i class="bi bi-x-circle-fill"></i>Cancelar</button>
+                <button type="button" className="finish-button submit-button" onClick={handleSaveContent} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
+                    <i className="bi bi-check-circle-fill"></i>
                     { context.editContent === null ? "Criar" : "Salvar" }
                 </button>
             </section>
+
+
+
         </div>
     </UniversiModal>
 
+    async function createImage(e : ChangeEvent<HTMLInputElement>){
+        const image = e.currentTarget.files?.item(0);
+        if(!image)
+            return
+        const reader = new FileReader();
+        reader.readAsArrayBuffer(image);
+        const imageResponse = await UniversimeApi.Image.upload({image:image});
+        setImagem(imageResponse.body?.link)
+    }
+
+
     function handleSaveContent() {
         if (!context || context.editContent === undefined)
             return;
@@ -101,6 +133,7 @@ export function ManageContent() {
                 description,
                 rating: 5,
                 groupId: context.group.id,
+                image: imagem,
                 // todo: image upload
             });
         }