Allow users to edit tune
This commit is contained in:
parent
2abd23cad2
commit
8a03659e74
|
@ -1,6 +1,7 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import ReactMarkdown from 'react-markdown';
|
import ReactMarkdown from 'react-markdown';
|
||||||
import {
|
import {
|
||||||
|
Button,
|
||||||
Col,
|
Col,
|
||||||
Divider,
|
Divider,
|
||||||
Form,
|
Form,
|
||||||
|
@ -8,11 +9,17 @@ import {
|
||||||
Row,
|
Row,
|
||||||
Select,
|
Select,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
|
import {
|
||||||
|
generatePath,
|
||||||
|
useNavigate,
|
||||||
|
} from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
AppState,
|
AppState,
|
||||||
TuneDataState,
|
TuneDataState,
|
||||||
} from '../types/state';
|
} from '../types/state';
|
||||||
import Loader from '../components/Loader';
|
import Loader from '../components/Loader';
|
||||||
|
import { Routes } from '../routes';
|
||||||
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
|
||||||
const { Item } = Form;
|
const { Item } = Form;
|
||||||
const rowProps = { gutter: 10 };
|
const rowProps = { gutter: 10 };
|
||||||
|
@ -23,6 +30,32 @@ const mapStateToProps = (state: AppState) => ({
|
||||||
});
|
});
|
||||||
|
|
||||||
const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
|
const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { currentUser } = useAuth();
|
||||||
|
|
||||||
|
const goToEdit = () => navigate(generatePath(Routes.UPLOAD_WITH_TUNE_ID, {
|
||||||
|
tuneId: tuneData.tuneId,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const canManage = tuneData?.userId === currentUser?.$id;
|
||||||
|
|
||||||
|
const manageSection = (
|
||||||
|
<>
|
||||||
|
<Divider>Manage</Divider>
|
||||||
|
<Row style={{ marginTop: 10 }}>
|
||||||
|
<Item style={{ width: '100%' }}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
block
|
||||||
|
onClick={goToEdit}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
</Item>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
if (!tuneData?.vehicleName) {
|
if (!tuneData?.vehicleName) {
|
||||||
return <Loader />;
|
return <Loader />;
|
||||||
}
|
}
|
||||||
|
@ -121,6 +154,7 @@ const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
|
||||||
{`${tuneData.readme}`}
|
{`${tuneData.readme}`}
|
||||||
</ReactMarkdown>}
|
</ReactMarkdown>}
|
||||||
</div>
|
</div>
|
||||||
|
{canManage && manageSection}
|
||||||
</div >
|
</div >
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -56,14 +56,11 @@ import {
|
||||||
requiredTextRules,
|
requiredTextRules,
|
||||||
requiredRules,
|
requiredRules,
|
||||||
} from '../utils/form';
|
} from '../utils/form';
|
||||||
import {
|
import { TuneDbDocument } from '../types/dbData';
|
||||||
TuneDbDataPartial,
|
|
||||||
TuneDbDocument,
|
|
||||||
} from '../types/dbData';
|
|
||||||
import { aspirationMapper } from '../utils/tune/mappers';
|
import { aspirationMapper } from '../utils/tune/mappers';
|
||||||
import { copyToClipboard } from '../utils/clipboard';
|
import { copyToClipboard } from '../utils/clipboard';
|
||||||
|
|
||||||
const { Item } = Form;
|
const { Item, useForm } = Form;
|
||||||
|
|
||||||
enum MaxFiles {
|
enum MaxFiles {
|
||||||
TUNE_FILES = 1,
|
TUNE_FILES = 1,
|
||||||
|
@ -87,6 +84,7 @@ const maxFileSizeMB = 50;
|
||||||
const descriptionEditorHeight = 260;
|
const descriptionEditorHeight = 260;
|
||||||
const thisYear = (new Date()).getFullYear();
|
const thisYear = (new Date()).getFullYear();
|
||||||
const generateTuneId = () => nanoid(10);
|
const generateTuneId = () => nanoid(10);
|
||||||
|
const defaultReadme = '# My Tune\n\ndescription';
|
||||||
|
|
||||||
const tuneIcon = () => <ToolOutlined />;
|
const tuneIcon = () => <ToolOutlined />;
|
||||||
const logIcon = () => <FundOutlined />;
|
const logIcon = () => <FundOutlined />;
|
||||||
|
@ -97,6 +95,7 @@ const tunePath = (tuneId: string) => generatePath(Routes.TUNE_TUNE, { tuneId });
|
||||||
const tuneParser = new TuneParser();
|
const tuneParser = new TuneParser();
|
||||||
|
|
||||||
const UploadPage = () => {
|
const UploadPage = () => {
|
||||||
|
const [form] = useForm();
|
||||||
const routeMatch = useMatch(Routes.UPLOAD_WITH_TUNE_ID);
|
const routeMatch = useMatch(Routes.UPLOAD_WITH_TUNE_ID);
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
@ -107,11 +106,8 @@ const UploadPage = () => {
|
||||||
const [shareUrl, setShareUrl] = useState<string>();
|
const [shareUrl, setShareUrl] = useState<string>();
|
||||||
const [isPublished, setIsPublished] = useState(false);
|
const [isPublished, setIsPublished] = useState(false);
|
||||||
const [isEditMode, setIsEditMode] = useState(false);
|
const [isEditMode, setIsEditMode] = useState(false);
|
||||||
const [readme, setReadme] = useState('# My Tune\n\ndescription');
|
const [readme, setReadme] = useState(defaultReadme);
|
||||||
const [existingTune, setExistingTune] = useState<TuneDbDocument>();
|
const [existingTune, setExistingTune] = useState<TuneDbDocument>();
|
||||||
const [initialValues, setInitialValues] = useState<TuneDbDataPartial>({
|
|
||||||
readme,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [defaultTuneFileList, setDefaultTuneFileList] = useState<UploadFile[]>([]);
|
const [defaultTuneFileList, setDefaultTuneFileList] = useState<UploadFile[]>([]);
|
||||||
const [defaultLogFilesList, setDefaultLogFilesList] = useState<UploadFile[]>([]);
|
const [defaultLogFilesList, setDefaultLogFilesList] = useState<UploadFile[]>([]);
|
||||||
|
@ -400,7 +396,7 @@ const UploadPage = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
setExistingTune(oldTune);
|
setExistingTune(oldTune);
|
||||||
setInitialValues(oldTune);
|
form.setFieldsValue(oldTune);
|
||||||
setIsEditMode(true);
|
setIsEditMode(true);
|
||||||
setTuneDocumentId(oldTune.$id);
|
setTuneDocumentId(oldTune.$id);
|
||||||
|
|
||||||
|
@ -443,13 +439,33 @@ const UploadPage = () => {
|
||||||
status: 'done',
|
status: 'done',
|
||||||
}]);
|
}]);
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
// reset state
|
||||||
|
form.resetFields();
|
||||||
|
setReadme(defaultReadme);
|
||||||
|
setTuneFileId(null);
|
||||||
|
setCustomIniFileId(null);
|
||||||
|
setDefaultTuneFileList([]);
|
||||||
|
setDefaultLogFilesList([]);
|
||||||
|
setDefaultToothLogFilesList([]);
|
||||||
|
setDefaultCustomIniFileList([]);
|
||||||
}
|
}
|
||||||
|
|
||||||
setTuneIsLoading(false);
|
setTuneIsLoading(false);
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, [currentUser, form, navigateToNewTuneId]);
|
||||||
|
|
||||||
const prepareData = useCallback(async () => {
|
const prepareData = useCallback(async () => {
|
||||||
|
const currentTuneId = routeMatch?.params.tuneId;
|
||||||
|
if (currentTuneId) {
|
||||||
|
loadExistingTune(currentTuneId);
|
||||||
|
setShareUrl(buildFullUrl([tunePath(currentTuneId)]));
|
||||||
|
} else {
|
||||||
|
navigateToNewTuneId();
|
||||||
|
}
|
||||||
|
}, [loadExistingTune, navigateToNewTuneId, routeMatch?.params.tuneId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
if (!currentUser) {
|
if (!currentUser) {
|
||||||
restrictedPage();
|
restrictedPage();
|
||||||
navigate(Routes.LOGIN);
|
navigate(Routes.LOGIN);
|
||||||
|
@ -471,18 +487,8 @@ const UploadPage = () => {
|
||||||
genericError(error as Error);
|
genericError(error as Error);
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentTuneId = routeMatch?.params.tuneId;
|
|
||||||
if (currentTuneId) {
|
|
||||||
loadExistingTune(currentTuneId);
|
|
||||||
setShareUrl(buildFullUrl([tunePath(currentTuneId)]));
|
|
||||||
} else {
|
|
||||||
navigateToNewTuneId();
|
|
||||||
}
|
|
||||||
}, [currentUser, loadExistingTune, navigate, navigateToNewTuneId, routeMatch?.params.tuneId]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
prepareData();
|
prepareData();
|
||||||
}, [currentUser, prepareData]);
|
}, [currentUser, navigate, prepareData, routeMatch?.params.tuneId]);
|
||||||
|
|
||||||
const uploadButton = (
|
const uploadButton = (
|
||||||
<Space direction="vertical">
|
<Space direction="vertical">
|
||||||
|
@ -729,7 +735,7 @@ const UploadPage = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<Form onFinish={publishTune} initialValues={initialValues}>
|
<Form onFinish={publishTune} initialValues={{ readme }} form={form}>
|
||||||
<Divider>
|
<Divider>
|
||||||
<Space>
|
<Space>
|
||||||
Upload Tune
|
Upload Tune
|
||||||
|
|
Loading…
Reference in New Issue