api: fix the null access

Some components were crashing in the test due to a lack of protection
for cases where any data is returned from the API. This solution is
quite temporary and is only ment to allow the unit tests to execute
without throwing errors. A major refactor of the queries is on its way
with RTKQueries and will fix the behavior when data can't be properly
fetched.

src/Components/ImagesTable/ClonesTable.js

@@ -23,6 +23,10 @@ import {
 const Row = ({ imageId }) => {
   const image = useSelector((state) => selectImageById(state, imageId));
 
+  if (!image) {
+    return null;
+  }
+
   return (
     <Tbody>
       <Tr className="no-bottom-border">

src/Components/ImagesTable/ImageLinkDirect.js

@@ -32,6 +32,9 @@ const ImageLinkDirect = ({ imageId, isExpired, isInClonesTable }) => {
   const navigate = useNavigate();
 
   const image = useSelector((state) => selectImageById(state, imageId));
+  if (!image) {
+    return null;
+  }
   const uploadStatus = image.uploadStatus;
 
   const fileExtensions = {

src/store/actions/actions.js

@@ -8,6 +8,7 @@ import {
 
 export const fetchComposeStatus = (id) => async (dispatch) => {
   const request = await api.getComposeStatus(id);
+  if (!request) return;
   dispatch(
     composeUpdatedStatus({
       id,
@@ -18,6 +19,7 @@ export const fetchComposeStatus = (id) => async (dispatch) => {
 
 export const fetchComposes = (limit, offset) => async (dispatch) => {
   const composeRequest = await api.getComposes(limit, offset);
+  if (!composeRequest) return;
 
   composeRequest.data.map((compose) => {
     dispatch(composeAdded({ compose, insert: false }));
@@ -32,6 +34,7 @@ export const fetchComposes = (limit, offset) => async (dispatch) => {
 
 export const fetchCloneStatus = (id) => async (dispatch) => {
   const request = await api.getCloneStatus(id);
+  if (!request) return;
   dispatch(
     cloneUpdatedStatus({
       id,
@@ -42,6 +45,7 @@ export const fetchCloneStatus = (id) => async (dispatch) => {
 
 export const fetchClones = (id, limit, offset) => async (dispatch) => {
   const request = await api.getClones(id, limit, offset);
+  if (!request) return;
   request.data?.forEach((clone) => {
     dispatch(cloneAdded({ clone, parent: id }));
     dispatch(fetchCloneStatus(clone.id));

src/store/composesSlice.js

@@ -80,7 +80,7 @@ export const selectComposeById = (state, composeId) => {
 export const selectClonesById = (state, composeId) => {
   const compose = state.composes.byId[composeId];
 
-  if (compose.clones.length !== 0) {
+  if (compose && compose.clones.length !== 0) {
     const clones = compose.clones.map((cloneId) => {
       const clone = state.clones.byId[cloneId];
       return {
@@ -115,7 +115,7 @@ export const selectImagesById = createSelector(
 export const selectImageStatusesById = createSelector(
   [selectImagesById],
   (images) => {
-    return images.map((image) => image.status);
+    return images.map((image) => (image !== null ? image.status : null));
   }
 );