How to use the monocle-ts.Lens.fromProp function in monocle-ts

const decoder = flow(
  ApiPayloadSchema.decode,
  E.mapLeft(errors => failure(errors).join('\n'))
)

function getRandomGif(topic: string): cmd.Cmd {
  const url = `https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=${topic}`

  return pipe(
    http.get(url, decoder),
    http.send(e => newGif(E.either.map(e, a => a.data.image_url)))
  )
}

// --- Update
const gifUrlLens = Lens.fromProp()('gifUrl')

export function update(msg: Msg, model: Model): [Model, cmd.Cmd] {
  switch (msg.type) {
    case 'MorePlease':
      return [gifUrlLens.set(O.none)(model), getRandomGif(model.topic)]

    case 'NewGif':
      return [gifUrlLens.set(O.some(msg.result))(model), cmd.none]
  }
  throw new Error('err')
}

// --- View
export function view(model: Model): Html {
  return dispatch => (
    <div></div>

import { Lens } from 'monocle-ts';

export interface BrowserState {
	pageTitle: string;
	pageUrl: string;
}

export const pageTitle = Lens.fromProp()('pageTitle');
export const pageUrl = Lens.fromProp()('pageUrl');

export enum BrowserActionTypes {
	SyncBrowser = 'SYNC_BROWSER',
}

elemC(eqString)(arg),
);

const badgeDisplayCodec = fromRefinement(
	'badgeDisplay',
	(x): x is BadgeDisplay => t.string.is(x) && isBadgeDisplayOpt(x),
);

const settingsCodec = t.type({
	theme: optionFromNullable(themeCodec),
	badgeDisplay: optionFromNullable(badgeDisplayCodec),
});

export type Settings = t.TypeOf;

const theme = Lens.fromProp()('theme');
const badgeDisplay = Lens.fromProp()('badgeDisplay');

export const saveSettings = (opts: Settings): TaskEither => setSyncStorage(opts);

const getSettings: TaskEither = pipe(
	getSyncStorage(['theme', 'badgeDisplay']),
	T.map(E.chain(decode(settingsCodec))),
);

export const getActiveTheme: TaskEither> = pipe(
	getSettings,
	T.map(E.map(flow(
		theme.get,
		O.chain(O.fromPredicate(isTheme)),
	))));

import { Lens } from 'monocle-ts';
import { Theme } from 'Modules/settings';
export { Theme };

export interface UserState {
	hasBinaryComms: boolean;
	activeTheme: Theme;
	displayOpenAllBookmarksConfirmation: boolean;
	page: Page;
}

export const hasBinaryComms = Lens.fromProp()('hasBinaryComms');
export const activeTheme = Lens.fromProp()('activeTheme');
export const displayOpenAllBookmarksConfirmation = Lens.fromProp()('displayOpenAllBookmarksConfirmation');
export const page = Lens.fromProp()('page');

export enum UserActionTypes {
	SetHasBinaryComms = 'SET_HAS_BINARY_COMMS',
	SetActiveTheme = 'SET_ACTIVE_THEME',
	SetDisplayOpenAllBookmarksConfirmation = 'SET_OPEN_ALL_BOOKMARKS_CONFIRMATION',
	SetPage = 'SET_PAGE',
}

export enum Page {
	Search,
	AddBookmark,
	EditBookmark,
	StagedGroupsList,
	StagedGroup,

}

/*
 * Bookmark as stored in LocalStorage.
 */
export interface LocalBookmark extends LocalBookmarkUnsaved {
	id: number;
}


export interface LocalBookmarkWeighted extends LocalBookmark {
	weight: URLMatch;
}

export const id = Lens.fromProp()('id');
export const title = Lens.fromProp()('title');
export const weight = Lens.fromProp()('weight');

const ordTitle: Ord = contramap(title.get)(ordString);
const ordWeight: Ord = contramap(weight.get)(ordURLMatch)
export const ordLocalBookmarkWeighted = getSemigroup().concat(ordWeight, ordTitle);

/**
 * Filter out bookmarks that do not perfectly match the provided test.
 */
export const filterBookmarks = (bookmarks: Array, test: ParsedInputResult): Array =>
	bookmarks.filter((bookmark) => {
		if (!includesCI(test.name)(bookmark.title)) return false;
		if (test.desc.some(d => !includesCI(d)(bookmark.desc))) return false;
		if (test.url.some(u => !includesCI(u)(bookmark.url))) return false;
		if (test.tags.some(t => !bookmark.tags.some(tag => includesCI(t)(tag)))) return false;

import { Lens } from 'monocle-ts';
import { LocalBookmark } from 'Modules/bookmarks';

export interface StagedBookmarksGroup {
	id: number;
	time: number;
	bookmarks: Array;
}

export const id = Lens.fromProp()('id');
export const time = Lens.fromProp()('time');
export const bookmarks = Lens.fromProp()('bookmarks');

.map(() => 
      Lens.fromProp('body')
        .modify(safeStringify)(o)
    )

| "READ UNCOMMITTED"
  | "READ COMMITTED"
  | "REPEATABLE READ"
  | "SERIALIZABLE";

export interface TransactionOptions {
  readonly context: t.mixed;
  readonly deferrable: boolean;
  readonly isolation: TransactionIsolationLevel;
  readonly readOnly: boolean;
}

export type TypeParser = (val: string) => T;
export type TypeParsers = Record>;

export const connectionLens = Lens.fromProp(
  ConnectionSymbol,
);

.map(method => 
      Lens.fromProp('method')
        .set(method)(o)
    );

.map(headers => 
        Lens.fromProp('headers')
          .set(headers)(o)  
      );