Step #20.36 Sorted images are not persisted

[acaneva]

[Socially - Angular 1] Hi, Don´t know if this is an issue, but following the tutorial couldn´t get images order to be persisted after sorting in the view. My take on this was sorting files array (instead of thumbs) and creating a new component to show corresponding thumb image. Probably not a good practice, but here it goes:

Step 20.36 imports/ui/components/partyUpload/partyUpload.html

    <div layout="row" class="images-container-title" sv-root sv-part="partyUpload.files">
        <div  sv-element 
              class="party-image-container" 
              ng-class="{'main-image': $index === 0}" 
              ng-repeat="image in partyUpload.files" >
              <thumb-image image="image"></thumb-image>
        </div>
    </div>

Then, new view imports/ui/components/thumbImage/thumbImage.html

<img draggable="false"  ng-src="{{ thumbImage.thumb.url }}" />

and new component imports/ui/components/thumbImage/thumbImage.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
 
import template from './thumbImage.html';
import { Thumbs } from '../../../api/images';
 
class ThumbImage {
  constructor($scope, $reactive) {
    'ngInject';
    $reactive(this).attach($scope);
    this.subscribe('thumbs');

    this.helpers({
      thumb() {
        const image = this.getReactively('image', true);
        if (image) {
          return Thumbs.findOne({
            originalStore: 'images',
            originalId: image 
          });
        }
      }
    });
  }
}
 
const name = 'thumbImage';
 
// create a module
export default angular.module(name, [
  angularMeteor
]).component(name, {
  template,
  bindings: {
    image: '<'
  },
  controllerAs: name,
  controller: ThumbImage
});

Imported into Step 20.37 imports/ui/components/partyUpload/partyUpload.js

import { name as ThumbImage } from '../thumbImage/thumbImage';
...
export default angular.module(name, [
  angularMeteor,
  ngFileUpload,
  'ngImgCrop',
  'angular-sortable-view',
  ThumbImage
]).component(name, {

Finally, changed Thumbs publication Step 20.31 in imports/api/images/publish.js to:

  Meteor.publish('thumbs', function() {
    return Thumbs.find({});
  });

Thanks!